prelude-framework 0.7

data/.gitignore

@@ -0,0 +1,20 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+.sass-cache/*
+test/.sass-cache/*
+test/css/*

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in prelude.gemspec
+gemspec

data/LICENCE

@@ -0,0 +1,19 @@
+Copyright (c) 2012 Daniel Guillan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,5 @@
+# Prelude
+
+An Object-oriented Sass + Compass framework for fast, robust and extensible front-end development.
+
+Prelude includes: abstracted objects and components, powerful and salt-grained typesetting, mixins, utilities and class helpers.

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/lib/prelude/version.rb

@@ -0,0 +1,3 @@
+module Prelude
+  VERSION = "0.7"
+end

data/lib/prelude-framework.rb

@@ -0,0 +1,8 @@
+root = File.join(File.dirname(__FILE__), "..")
+
+require "prelude/version"
+require "compass"
+
+Compass::Frameworks.register("prelude",
+  :stylesheets_directory => File.join(root,"scss")
+)

data/prelude.gemspec

@@ -0,0 +1,23 @@
+# -*- encoding: utf-8 -*-
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'prelude/version'
+
+Gem::Specification.new do |gem|
+  gem.name          = "prelude-framework"
+  gem.version       = Prelude::VERSION
+  gem.authors       = ["Daniel Guillan"]
+  gem.email         = ["hello@danielguillan.com"]
+  gem.description   = %q{A robust, extensible and opinionated OOCSS front-end framework built with SASS and Compass framework}
+  gem.summary       = %q{A robust, extensible and opinionated OOCSS front-end framework built with SASS and Compass framework}
+  gem.homepage      = "https://github.com/danielguillan/prelude"
+
+  gem.files         = `git ls-files`.split($\)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f)}
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.require_paths = ["lib"]
+
+  gem.add_dependency "sass", [">= 3.2.3"]
+  gem.add_dependency "compass", [">= 0.12.2"]
+  gem.add_dependency "rake"
+end

data/scss/prelude/_abstractions.scss

@@ -0,0 +1,21 @@
+// =============================================================================
+// Abstractions
+// This is a set of very basic/generic structures that can be extended and
+// styled using aditional classes. These abstracted classes save lots of lines
+// of code by providing common structure patterns with DRY code.
+//
+// Learn more about abstraction:
+// http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
+// http://csswizardry.com/2011/09/the-nav-abstraction/
+//
+// Learn more about class extensions:
+// http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
+//
+// =============================================================================
+
+@import "abstractions/media",
+        "abstractions/flag",
+		"abstractions/nav",
+		"abstractions/island",
+        "abstractions/split",
+        "abstractions/flexbox";

data/scss/prelude/_all.scss

@@ -0,0 +1,6 @@
+@import "prelude/base",
+        "prelude/mixins",
+        "prelude/abstractions",
+        "prelude/typography",
+        "prelude/images",
+        "prelude/modules";

data/scss/prelude/_base.scss

@@ -0,0 +1,6 @@
+// =============================================================================
+// Base
+// =============================================================================
+
+
+@import "base/helpers";

data/scss/prelude/_core.scss

@@ -0,0 +1,13 @@
+// =============================================================================
+// Prelude core
+//
+// =============================================================================
+
+// Border box FTW!
+// =============================================================================
+* { @include box-sizing(border-box) }
+
+
+// Clearfix placeholder
+// =============================================================================
+%prelude-clearfix { @include pie-clearfix; }

data/scss/prelude/_debug-mode.scss

@@ -0,0 +1,125 @@
+// =============================================================================
+// Debug mode
+//
+// Borrowed, adapted and extended from inuit.css
+// (https://github.com/csswizardry/inuit.css)
+//
+// Enable $debug-mode to visually detect any improperly nested or
+// potentially invalid markup, or any potentially inaccessible code.
+//
+// Red          ==      definite error
+// Yellow       ==      double-check
+// None         ==      should be fine
+//
+// Please note that this method of checking markup quality should not be relied
+// upon entirely. Validate your markup!
+//
+// =============================================================================
+
+@if $debug-mode == true {
+
+    %debug-error    { outline: 5px solid red; }
+    %debug-info     { outline: 5px solid yellow; }
+    %debug-ok       { outline: none; }
+
+    // Are there any empty elements in your page?
+    // =============================================================================
+
+    :empty { @extend %debug-info; }
+
+    // Images require `alt` attributes, empty `alt`s are fine but should be
+    // double-checked, no `alt` is bad and is flagged red.
+    // =============================================================================
+
+    img { @extend %debug-error; }
+
+    img[alt=""] { @extend %debug-info; }
+
+    img[alt] { @extend %debug-ok; }
+
+    // Links sometimes, though not always, benefit from `title` attributes. Links
+    // without are never invalid but it’s a good idea to check.
+    // =============================================================================
+
+    a { @extend %debug-info; }
+
+    a[title] { @extend %debug-ok; }
+
+    // Double-check any links whose `href` is something questionable.
+    // =============================================================================
+
+    a[href="#"],
+    a[href*="javascript"] { @extend %debug-info; }
+
+    // The `target` attribute ain’t too nice...
+    // =============================================================================
+
+    a[target] { @extend %debug-info; }
+
+    // Ensure any lists only contain `li`s as children.
+    // =============================================================================
+
+    ul,
+    ol {
+        > *:not(li) { @extend %debug-error; }
+    }
+
+    // It’s always nice to give `th`s `scope` attributes.
+    // =============================================================================
+
+    th { @extend %debug-info; }
+
+    th[scope] { @extend %debug-ok; }
+
+    // `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`?
+    // =============================================================================
+
+    table > tr { @extend %debug-info; }
+
+    // `tfoot` needs to come *before* `tbody`.
+    // =============================================================================
+
+    tbody + tfoot { @extend %debug-info; }
+
+    // Forms require `action` attributes
+    // =============================================================================
+
+    form { @extend %debug-error; }
+
+    form[action] { @extend %debug-ok; }
+
+    // Various form-field types have required attributes. `input`s need `type`
+    // attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
+    // need a `value` attribute.
+    // =============================================================================
+
+    textarea,
+    input { @extend %debug-error; }
+
+    input[type] { @extend %debug-ok; }
+
+    textarea[rows][cols] { @extend %debug-ok; }
+
+    input[type=submit] { @extend %debug-error; }
+
+    input[type=submit][value] { @extend %debug-ok; }
+
+    // Avoid inline styles where possible.
+    // =============================================================================
+
+    [style] { @extend %debug-info; }
+
+    // You should avoid using IDs for CSS, is this doing any styling?
+    // =============================================================================
+
+    [id] { @extend %debug-info; }
+
+    // Are you using the grid system correctly?
+    // =============================================================================
+
+    .gw > :not(.g),
+    .grid-wrapper > :not(.grid),
+    .gw--rev > :not(.g),
+    .grid-wrapper--rev > :not(.grid) { @extend %debug-error; }
+
+}

data/scss/prelude/_defaults.scss

@@ -0,0 +1,159 @@
+// =============================================================================
+// Prelude settings
+//
+// Table of contents:
+// 1. Base
+// 2. Colors
+// 3. Typography
+// 4. Forms
+// 5. Tables
+// 6. Buttons
+// 7. Debug mode
+//
+// =============================================================================
+
+// =============================================================================
+// 1. Base
+// =============================================================================
+
+//Border radius
+$default-border-radius:     4px !default; // default: 4px
+
+// =============================================================================
+// 2. Colors
+// =============================================================================
+
+// Grays
+$white:                     #fff !default; // default: #fff
+$gray-lighter:              #ccc !default; // default: #ccc
+$gray-light:                #999 !default; // default: #999
+$gray:                      #777 !default; // default: #777
+$gray-dark:                 #555 !default; // default: #555
+$gray-darker:               #333 !default; // default: #333
+$black:                     #000 !default; // default: #000
+
+// Accent Colors
+$red:                       #9d261d !default; // default: #9d261d
+$green:                     #349D76 !default; // default: #349D76
+$blue:                      #36C !default; // default: #36C
+$yellow:                    #fffbe4 !default; // default: #fffbe4
+$orange:                    #f89406 !default; // default: #f89406
+$pink:                      #fa5b7d !default; // default: #fa5b7d
+$purple:                    #7a43b6 !default; // default: #7a43b6
+
+// Link Colors
+$link-color:                $blue !default; // default: $blue
+$link-hover-color:          $pink !default; // default: $pink
+
+// Text Colors
+$base-text-color:           $gray-darker !default; // default: $gray-darker
+$strong-text-color:         $black !default; // default: $black
+$weak-text-color:           $gray !default; // default: $gray
+$header-color:              $gray-lighter !default; // default: $gray-lighter
+$blockquote-color:          $gray-lighter !default; // default: $gray-lighter
+
+// Line & Border colors
+$line-color: #e6e6e6 !default; // default: #e6e6e6
+
+// =============================================================================
+// 3. Typography
+// =============================================================================
+
+// Vertical Rythm
+$base-font-size:            $base-font-size !default; // default: $base-font-size (from Compass)
+$base-line-height:          $base-line-height !default; // default: $base-line-height (From Compass)
+
+$base-spacing-unit:         $base-line-height !default; // default: $base-line-height
+$half-spacing-unit:         $base-spacing-unit / 2 !default; // default: $base-spacing-unit / 2
+$quarter-spacing-unit:      $half-spacing-unit / 2 !default; // default: $half-spacing-unit / 2
+
+// Typographic scale
+$giga:                      117px !default; // default 117px
+$mega:                      90px !default;  // default 90px
+$kilo:                      72px !default;  // default 72px
+$alpha:                     60px !default;  // default 60px
+$beta:                      48px !default;  // default 48px
+$gamma:                     36px !default;  // default 36px
+$delta:                     24px !default;  // default 24px
+$epsilon:                   21px !default;  // default 21px
+$zeta:                      18px !default;  // default 18px
+$milli:                     16px !default;  // default 16px
+$micro:                     14px !default;  // default 14px
+$nano:                      11px !default;  // default 11px
+
+// Fonts
+$base-font-family: "Helvetica Neue", Arial, sans-serif !default; // default: "Helvetica Neue", Arial, sans-serif
+$alternate-font-family: Georgia, "Times New Roman", serif !default; // default: Georgia, "Times New Roman", serif
+$headings-font-family: $base-font-family !default; // default: $base-font-family
+
+// Brand
+$brand-face: $base-font-family !default; // default: $base-font-family
+$brand-color: $black !default; // default: $black
+
+// Colors
+$subheader-color: $gray-light !default; // default: $gray-light
+
+// =============================================================================
+// 4. Forms
+// =============================================================================
+
+$input-background:          $white !default; // default: $white
+$input-border:              #ccc !default; // default: #ccc
+$input-border-radius:       3px !default; // default: 3px
+$input-disabled-background: $gray-lighter !default; // default: $gray-lighter
+$form-actions-background:   #f5f5f5 !default; // default: #f5f5f5
+
+// Form states and alerts
+// =============================================================================
+
+$warning-text:              #c09853 !default; // default: #c09853
+$warning-background:        #fcf8e3 !default; // default: #fcf8e3
+$warning-border:            darken(adjust-hue($warning-background, -10), 3%) !default; // default: darken(adjust-hue($warning-background, -10), 3%)
+
+$error-text:                #b94a48 !default; // default: #b94a48
+$error-background:          #f2dede !default; // default: #f2dede
+$error-border:              darken(adjust-hue($error-background, -10), 3%) !default; // default: darken(adjust-hue($error-background, -10), 3%)
+
+$success-text:              #468847 !default; // default: #468847
+$success-background:        #dff0d8 !default; // default: #dff0d8
+$success-border:            darken(adjust-hue($success-background, -10), 5%) !default; // default: darken(adjust-hue($success-background, -10), 5%)
+
+$info-text:                 #3a87ad !default; // default: #3a87ad
+$info-background:           #d9edf7 !default; // default: #d9edf7
+$info-border:               darken(adjust-hue($info-background, -10), 7%) !default; // default: darken(adjust-hue($info-background, -10), 7%)
+
+// =============================================================================
+// 5. Tables
+// =============================================================================
+
+$table-background:          transparent !default; // default: transparent
+$table-background-stripe:   #f1f1f1 !default; // default: #f1f1f1
+$table-background-hover:    #f1f1f1 !default; // default: #f1f1f1
+$table-border:              $line-color !default; // default: $line-color
+
+// =============================================================================
+// 6. Buttons
+// =============================================================================
+
+$btn-font-weight:           normal !default; // default: normal
+$btn-border-radius:         none !default; // default: none
+$btn-padding:               .35em 1.5em !default; // default: .35em 1.5em
+
+$btn-use-gradient:          false !default; // default: false
+$btn-use-shadow:            false !default; // default: false
+
+$create-btn-styles:         true !default; // default: true
+
+$btn-background:            #f1f1f1 !default; // default: #f1f1f1
+$btn-primary-background:    $link-color !default; // default: $link-color
+$btn-info-background:       #5bc0de !default; // default: #5bc0de
+$btn-success-background:    lighten($green, 15%) !default; // default: lighten($green, 15%)
+$btn-warning-background:    lighten($orange, 15%) !default; // default: lighten($orange, 15%)
+$btn-danger-background:     #ee5f5b !default; // default: #ee5f5b
+$btn-inverse-background:    $gray !default; // default: $gray
+
+// =============================================================================
+// 7. Debug mode
+// =============================================================================
+
+$debug-mode:                false !default; // default: false

data/scss/prelude/_functions.scss

@@ -0,0 +1,8 @@
+// =============================================================================
+// Functions
+// A collection of functions
+// =============================================================================
+
+@import "functions/pixels-to-ems",
+        "functions/contrasty",
+        "functions/is-saturated";

data/scss/prelude/_images.scss

@@ -0,0 +1,9 @@
+// =============================================================================
+// Images
+// A collection of image mixins and classes
+//
+// =============================================================================
+
+@import "images/base",
+        "images/cover-image",
+		"images/thumbnails";

data/scss/prelude/_mixins.scss

@@ -0,0 +1,9 @@
+// =============================================================================
+// Mixins
+// A collection of mixins
+// =============================================================================
+
+@import "mixins/gradients",
+        "mixins/rem",
+        "mixins/set-font-size",
+        "mixins/button-style";

data/scss/prelude/_modules.scss

@@ -0,0 +1,7 @@
+// =============================================================================
+// Modules
+// =============================================================================
+
+@import "modules/forms",
+        "modules/tables",
+		"modules/buttons";

data/scss/prelude/_typography.scss

@@ -0,0 +1,15 @@
+// =============================================================================
+// Typography
+//
+// Basic typography styles.
+// Core sizes and typefaces are configurable via the variables in the settings
+// partial
+//
+// =============================================================================
+
+@import "typography/base",
+        "typography/sizes",
+		"typography/paragraphs",
+		"typography/quotes",
+		"typography/links",
+        "typography/brand";

data/scss/prelude/abstractions/_flag.scss

@@ -0,0 +1,67 @@
+// =============================================================================
+// Flag Object
+//
+// The flag object shares a lot of common traits with the media object.
+// It's able to vertically align the image and text to the tops, middles or
+// bottoms of each other.
+//
+// Learn more:
+// http://csswizardry.com/2013/05/the-flag-object/
+//
+// @usage:
+// <div class="flag">
+//     <div class="flag__image">
+//         <img src="placehold.it/45" alt="image">
+//     </div>
+//     <div class="flag__body">
+//         Descriptive content to the right
+//     </div>
+// </div>
+//
+// =============================================================================
+
+.flag{
+    display: table;
+    width: 100%;
+}
+
+.flag__image,
+.flag__body {
+    display: table-cell;
+    vertical-align: middle;
+
+    .flag--top & {
+        vertical-align: top;
+    }
+
+    .flag--bottom & {
+        vertical-align: bottom;
+    }
+}
+
+.flag__image {
+    padding-right: $base-spacing-unit;
+
+    > img {
+        display: block;
+        max-width: none; // fix for fluid images
+    }
+
+    .flag--rev & {
+        padding-right: 0;
+        padding-left: $base-spacing-unit;
+    }
+}
+
+.flag__body {
+    width: 100%;
+
+    & + .flag__body {
+        padding-left: $base-spacing-unit;
+
+        .flag--rev & {
+            padding-left: 0;
+            padding-right: $base-spacing-unit;
+        }
+    }
+}

data/scss/prelude/abstractions/_flexbox.scss

@@ -0,0 +1,29 @@
+// =============================================================================
+// Flexbox
+//
+// @usage:
+//   <div class="flexbox">
+//       <div class="flexbox__item">I'm kinda</div>
+//       <div class="flexbox__item">flexboxy</div>
+//   </div>
+//
+// =============================================================================
+
+.flexbox {
+    display: table;
+    width: 100%;
+}
+
+
+// Nasty hack to circumvent Modernizr conflicts.
+// =============================================================================
+
+html.flexbox {
+    display: block;
+    width: auto;
+}
+
+.flexbox__item {
+    display: table-cell;
+    vertical-align: middle;
+}

data/scss/prelude/abstractions/_island.scss

@@ -0,0 +1,53 @@
+// =============================================================================
+// Island Object
+//
+// A simple object used to boxoff content, leaving it closed on all sides.
+//
+// Learn more:
+// http://csswizardry.com/2011/10/the-island-object
+//
+// @usage:
+// <div class="island">
+// 	I am boxed off
+// </div>
+//
+// =============================================================================
+
+.island,
+.islet,
+.nauru {
+	@extend %prelude-clearfix;
+    display:block;
+}
+
+.island { padding: $base-spacing-unit; }
+
+// Remove margin bottom on the last island
+.island > :last-child,
+.islet > :last-child,
+.nauru > :last-child { margin-bottom: 0; }
+
+ // A smaller island
+.islet { padding: $half-spacing-unit; }
+
+ // A tiny island
+.nauru { padding: $quarter-spacing-unit; }
+
+// Pull items full width of .island, .islet or .nauru parents.
+// =============================================================================
+
+.full-bleed {
+
+    margin-right: -($base-spacing-unit);
+    margin-left: -($base-spacing-unit);
+
+    .islet & {
+        margin-right: -($half-spacing-unit);
+        margin-left: -($half-spacing-unit);
+    }
+
+    .nauru & {
+        margin-right:-($quarter-spacing-unit);
+        margin-left: -($quarter-spacing-unit);
+    }
+}