prelude-framework 0.7

data/scss/prelude/abstractions/_media.scss

@@ -0,0 +1,61 @@
+// =============================================================================
+// Media Object
+// The media object is an image to the left, with descriptive content
+// to the right (and an optional button to the right).
+// It saves hundreds of lines of code.
+//
+// Learn more:
+// http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
+//
+// @usage:
+// <div class="t-media">
+//     <div class="t-media__fl">
+//         <img src="placehold.it/45" alt="image">
+//     </div>
+//     <div class="t-media__body">
+//         Descriptive content to the right
+//     </div>
+// </div>
+//
+// @usage (extended - adding a button to the right):
+//   <div class="t-media">
+//       <div class="t-media__fr">
+//         <a href="#" class="btn">click me</a>
+//       </div>
+//       <div class="t-media__fl">
+//           <img src="placehold.it/45" alt="image">
+//       </div>
+//       <div class="t-media__body">
+//           Descriptive content to the right
+//     </div>
+// </div>
+//
+// =============================================================================
+
+// Container
+.media {
+    @extend %prelude-clearfix;
+}
+
+// Left floated image
+.media__fl {
+    float: left;
+    margin-right: $base-spacing-unit;
+
+    .islet & { margin-right: $half-spacing-unit; }
+    .nauru & { margin-right: $quarter-spacing-unit; }
+}
+
+// Right floated image
+.media__fr {
+    float: right;
+    margin-left: $base-spacing-unit;
+    .islet & { margin-left: $half-spacing-unit; }
+    .nauru & { margin-left: $quarter-spacing-unit; }
+}
+
+// Main content
+.media__body {
+    @extend %prelude-clearfix;
+    overflow: hidden;
+}

data/scss/prelude/abstractions/_nav.scss

@@ -0,0 +1,110 @@
+// =============================================================================
+// Nav Object
+//
+// The nav object is a horizontal list of things (a menu, a breadcrumb, a list
+// of logos,…)
+// It saves lots of lines of code.
+//
+// Table of contents:
+// 1. Nav
+// 2. Stacked extension
+// 3. Banner extension
+// 4. Elastic extension
+//
+// Learn more:
+// http://csswizardry.com/2011/09/the-nav-abstraction/
+//
+// =============================================================================
+
+// =============================================================================
+// 1. Nav
+//
+// @usage:
+//   <ul class="nav">
+//     <li><a href="#">item 1</a></li>
+//     <li><a href="#">item 2</a></li>
+//     <li><a href="#">item 3</a></li>
+//   </ul>
+//
+// =============================================================================
+
+// Use only on `ul` or `ol` elements
+.nav {
+	@extend %prelude-clearfix;
+	list-style: none;
+	margin-left: 0;
+
+	// (Required)
+	> li,
+	> li > a {
+		display: inline-block;
+	}
+
+}
+
+
+// =============================================================================
+// 2. Stacked extension
+//
+// Vertical mode for the list
+//
+// @usage:
+//   <ul class="nav nav--stacked">
+//     <li><a href="#">item 1</a></li>
+//     <li><a href="#">item 2</a></li>
+//     <li><a href="#">item 3</a></li>
+//   </ul>
+//
+// =============================================================================
+
+.nav--stacked {
+	> li {
+		display:list-item;
+		> a { display: block; }
+	}
+}
+
+
+// =============================================================================
+// 3. Banner extension
+//
+// Centered list
+//
+// @usage:
+//   <ul class="nav nav--banner">
+//     <li><a href="#">item 1</a></li>
+//     <li><a href="#">item 2</a></li>
+//     <li><a href="#">item 3</a></li>
+//   </ul>
+//
+// =============================================================================
+
+.nav--banner {
+    text-align: center;
+}
+
+
+// =============================================================================
+// 4. Elastic extension
+//
+// Makes the list span the whole width
+//
+// @usage:
+//   <ul class="nav nav--elastic">
+//     <li><a href="#">item 1</a></li>
+//     <li><a href="#">item 2</a></li>
+//     <li><a href="#">item 3</a></li>
+//   </ul>
+//
+// =============================================================================
+
+.nav--elastic {
+    display: table !important;
+    width: 100%;
+    padding-left: 0;
+
+    >li {
+        text-align: center;
+        display: table-cell !important;
+    }
+}

data/scss/prelude/abstractions/_split.scss

@@ -0,0 +1,26 @@
+// =============================================================================
+// Split
+//
+// The split abstraction floats two elements away from each other
+//
+// @usage:
+//   <dl class="split">
+//       <dt class="split__left">Title</dt>
+//       <dd>Value</dd>
+//   </dl>
+//
+// =============================================================================
+
+// Split block
+.split{
+    text-align: right;
+    list-style: none;
+    margin-left: 0;
+}
+
+// Element to the left
+.split__left{
+    text-align: left;
+    float: left;
+    clear: left;
+}

data/scss/prelude/base/_border-box.scss

@@ -0,0 +1,7 @@
+// =============================================================================
+// Border-box FTW
+// =============================================================================
+
+* {
+  @include box-sizing(border-box);
+}

data/scss/prelude/base/_helpers.scss

@@ -0,0 +1,167 @@
+// =============================================================================
+// Helpers
+// A collection of helper classes
+//
+// Table of contents:
+// 1. Clearfix
+// 2. Floats
+// 3. Text utilities
+// 4. Display utilities
+// 5. Hidden text
+// 6. Add/remove margins
+// 7. Add/remove paddings
+//
+// =============================================================================
+
+// =============================================================================
+// 1. Clearfix
+// =============================================================================
+
+.cf { @extend %prelude-clearfix; }
+
+// =============================================================================
+// 2. Floats
+// =============================================================================
+
+// Float left
+.fl { float: left; }
+
+// Float right
+.fr { float: right }
+
+// Float none
+.fn { float: none; }
+
+// Clear left
+.cl { clear: left; }
+
+// Clear right
+.cr { clear: right; }
+
+// Clear both
+.cb { clear: both; }
+
+// =============================================================================
+// 3. Text utilities
+// =============================================================================
+
+// Ellipsis clips text that does not fit into its box
+.ellipsis { @include ellipsis; }
+
+// Uppercase text
+.caps { text-transform: uppercase; }
+
+
+// Text alignment
+// =============================================================================
+
+.text--left   { text-align: left; }
+.text--center { text-align: center; }
+.text--right  { text-align: right; }
+
+
+// =============================================================================
+// 4. Display state utilities
+// =============================================================================
+
+// Hide for both screenreaders and browsers:
+// css-discuss.incutio.com/wiki/Screenreader_Visibility
+.is-hidden {
+	display: none !important;
+	visibility: hidden !important;
+}
+
+.is-displayed {
+	display: block !important;
+	visibility: visible !important;
+}
+
+// Hide visually and from screenreaders, but maintain layout
+.is-invisible {
+	visibility: hidden !important;
+}
+
+.is-visible {
+	visibility: visible !important;
+}
+
+// Hide only visually, but have it available for screenreaders: h5bp.com/v
+.is-visually-hidden {
+    position: absolute;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+}
+
+// =============================================================================
+// 5. Hidden text
+// =============================================================================
+
+// Hides text using the Kellum method
+// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
+.ht {
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+// =============================================================================
+// 6. Add/remove margins
+// =============================================================================
+
+.push               { margin:        $base-spacing-unit !important; }
+.push--top          { margin-top:    $base-spacing-unit !important; }
+.push--right        { margin-right:  $base-spacing-unit !important; }
+.push--bottom       { margin-bottom: $base-spacing-unit !important; }
+.push--left         { margin-left:   $base-spacing-unit !important; }
+.push--ends         { margin-top:    $base-spacing-unit !important; margin-bottom: $base-spacing-unit !important; }
+.push--sides        { margin-right:  $base-spacing-unit !important; margin-left: $base-spacing-unit !important; }
+
+.push-half          { margin:       $half-spacing-unit !important; }
+.push-half--top     { margin-top:   $half-spacing-unit !important; }
+.push-half--right   { margin-right: $half-spacing-unit !important; }
+.push-half--bottom  { margin-bottom:$half-spacing-unit !important; }
+.push-half--left    { margin-left:  $half-spacing-unit !important; }
+.push-half--ends    { margin-top:   $half-spacing-unit !important; margin-bottom:$half-spacing-unit !important; }
+.push-half--sides   { margin-right: $half-spacing-unit !important; margin-left:  $half-spacing-unit !important; }
+
+.flush              { margin:       0 !important; }
+.flush--top         { margin-top:   0 !important; }
+.flush--right       { margin-right: 0 !important; }
+.flush--bottom      { margin-bottom:0 !important; }
+.flush--left        { margin-left:  0 !important; }
+.flush--ends        { margin-top:   0 !important; margin-bottom:0 !important; }
+.flush--sides       { margin-right: 0 !important; margin-left:  0 !important; }
+
+
+// =============================================================================
+// 7. Add/remove paddings
+// =============================================================================
+
+.soft               { padding:       $base-spacing-unit !important; }
+.soft--top          { padding-top:   $base-spacing-unit !important; }
+.soft--right        { padding-right: $base-spacing-unit !important; }
+.soft--bottom       { padding-bottom:$base-spacing-unit !important; }
+.soft--left         { padding-left:  $base-spacing-unit !important; }
+.soft--ends         { padding-top:   $base-spacing-unit !important; padding-bottom:$base-spacing-unit !important; }
+.soft--sides        { padding-right: $base-spacing-unit !important; padding-left:  $base-spacing-unit !important; }
+
+.soft-half          { padding:       $half-spacing-unit !important; }
+.soft-half--top     { padding-top:   $half-spacing-unit !important; }
+.soft-half--right   { padding-right: $half-spacing-unit !important; }
+.soft-half--bottom  { padding-bottom:$half-spacing-unit !important; }
+.soft-half--left    { padding-left:  $half-spacing-unit !important; }
+.soft-half--ends    { padding-top:   $half-spacing-unit !important; padding-bottom:$half-spacing-unit !important; }
+.soft-half--sides   { padding-right: $half-spacing-unit !important; padding-left:  $half-spacing-unit !important; }
+
+.hard               { padding:       0 !important; }
+.hard--top          { padding-top:   0 !important; }
+.hard--right        { padding-right: 0 !important; }
+.hard--bottom       { padding-bottom:0 !important; }
+.hard--left         { padding-left:  0 !important; }
+.hard--ends         { padding-top:   0 !important; padding-bottom:0 !important; }
+.hard--sides        { padding-right: 0 !important; padding-left:  0 !important; }

data/scss/prelude/functions/_contrasty.scss

@@ -0,0 +1,24 @@
+// =============================================================================
+// Contrasty
+//
+// A more robust color contrast function
+// Important! -> This function might be part of Compass 0.13
+// https://github.com/chriseppstein/compass/issues/1051
+// =============================================================================
+
+@function contrasty(
+    $bg-color,
+    $dark-color: black,
+    $light-color: white
+    ) {
+
+  $color-brightness: round((red($bg-color) * 299) + (green($bg-color) * 587) + (blue($bg-color) * 114) / 1000);
+  $light-color-brightness: round((red($light-color) * 299) + (green($light-color) * 587) + (blue($light-color) * 114) / 1000);
+  $dark-color-brightness: round((red($dark-color) * 299) + (green($dark-color) * 587) + (blue($dark-color) * 114) / 1000);
+
+  @if abs($color-brightness - $light-color-brightness) > abs($color-brightness - $dark-color-brightness) {
+    @return $light-color;
+  } @else {
+    @return $dark-color;
+  }
+}

data/scss/prelude/functions/_is-saturated.scss

@@ -0,0 +1,14 @@
+// =============================================================================
+// Is saturated?
+//
+// Checks if a color has saturation or not
+//
+// =============================================================================
+
+@function is-saturated($color) {
+    @if ($color == desaturate($color,100%)) {
+        @return false;
+    } @else {
+        @return true;
+    }
+}

data/scss/prelude/functions/_pixels-to-ems.scss

@@ -0,0 +1,7 @@
+// =============================================================================
+// Convert pixel values into ems
+// =============================================================================
+
+@function pixels-to-ems($px, $context: $base-font-size) {
+    @return #{$px / $context}em;
+}

data/scss/prelude/images/_base.scss

@@ -0,0 +1,36 @@
+// =============================================================================
+// Base
+//
+// Base image styles
+// =============================================================================
+
+img {
+    max-width: 100%;
+}
+
+figure > img {
+    display: block;
+}
+
+
+// Image placement
+// =============================================================================
+
+.img--center{
+    display: block;
+    margin-right: auto;
+    margin-bottom: $base-spacing-unit;
+    margin-left: auto;
+}
+
+.img--left{
+    float: left;
+    margin-right: $base-spacing-unit;
+    margin-bottom: $base-spacing-unit;
+}
+
+.img--right{
+    float: right;
+    margin-bottom: $base-spacing-unit;
+    margin-left: $base-spacing-unit;
+}

data/scss/prelude/images/_cover-image.scss

@@ -0,0 +1,16 @@
+// =============================================================================
+// Cover Image mixin
+// =============================================================================
+
+@mixin cover-image($image-url, $background-position: 50% 50%){
+	@include background-size(cover);
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: -1;
+	width: 100%;
+	height: 100%;
+	background-image: image-url($image-url);
+	background-repeat: no-repeat;
+	background-position: $background-position;
+}

data/scss/prelude/images/_thumbnails.scss

@@ -0,0 +1,47 @@
+// =============================================================================
+// Thumbnails
+//
+// Classes for styling <img> elements
+//
+// Table of contents:
+// 1. Thumbnail Rounded
+// 2. Thumbnail Circle
+// 3. Thumbnail Polaroid
+//
+// =============================================================================
+
+// =============================================================================
+// Settings
+// =============================================================================
+
+$thumbail-rounded-radius: $default-border-radius !default;
+$thumbail-polaroid-border-width: 4px !default;
+
+
+// =============================================================================
+// 1. Thumbnail-rounded
+// =============================================================================
+
+.thumbnail-rounded {
+	border-radius: $thumbail-rounded-radius;
+}
+
+
+// =============================================================================
+// 2. Thumbnail-rounded
+// =============================================================================
+
+.thumbnail-circle {
+	border-radius: 500px;
+}
+
+
+// =============================================================================
+// 3. Thumbnail-rounded
+// =============================================================================
+
+.thumbnail-polaroid {
+	@include box-shadow(0 1px 2px rgba(0,0,0,.25));
+	padding: 4px;
+	background-color: #fff;
+}

data/scss/prelude/mixins/_button-style.scss

@@ -0,0 +1,40 @@
+// =============================================================================
+// Buttons style generator
+//
+// @usage:
+//   simply include the btn-style mixin into your new button class and pass
+//   the desired background color. The mixin takes care of gradients and
+//   text color
+// =============================================================================
+
+@import "gradients";
+
+@mixin btn-style($background-color, $use-gradient: $btn-use-gradient ){
+
+    $is-saturated: is-saturated($background-color);
+    $contrast-color: contrasty($background-color, scale-lightness($background-color, 90%), scale-lightness($background-color, -90%));
+
+    @if ($is-saturated) {
+        border-color: scale-saturation(scale-lightness($background-color, -40%), 75%);
+    } @else {
+        border-color: scale-lightness($background-color, -40%);
+    }
+
+    color: $contrast-color;
+
+    @if $use-gradient == false {
+        background-color: $background-color;
+        &:hover { background-color: scale-lightness($background-color, 25%); }
+    } @else {
+
+        @if ($is-saturated) {
+            @include vertical-gradient(scale-saturation(scale-lightness($background-color, 30%), 50%), scale-saturation(scale-lightness($background-color, -15%), 50%));
+        } @else {
+            @include vertical-gradient(scale-lightness($background-color, 30%), scale-lightness($background-color, -15%));
+        }
+
+        filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)"; // Reset filter for IE
+        background-repeat: repeat-x;
+        text-shadow: 0 1px 0 rgba(invert($contrast-color), .5);
+    }
+}

data/scss/prelude/mixins/_each-grid-breakpoint.scss

@@ -0,0 +1,21 @@
+// =============================================================================
+// Each grid breakpoint
+// Generates a class with for each breakpoint
+// =============================================================================
+
+@mixin each-grid-breakpoint($class-name, $base-class: false) {
+
+    @if $base-class == true {
+        .#{$class-name}{
+            @content;
+        }
+    }
+
+    @each $grid in $grids {
+        .#{$grid}-#{$class-name}{
+            @include respond-to(#{nth($breakpoints,index($grids, $grid))}-only){
+                @content;
+            }
+        }
+    }
+}

data/scss/prelude/mixins/_gradients.scss

@@ -0,0 +1,12 @@
+// =============================================================================
+// Gradient mixins
+// =============================================================================
+
+// Vertical gradient
+@mixin vertical-gradient($primary-color, $secondary-color) {
+    background-color: $secondary-color;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $primary-color), color-stop(100%, $secondary-color));
+    background-image: -webkit-linear-gradient($primary-color, $secondary-color);
+    background-image: linear-gradient($primary-color, $secondary-color);
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#{ie-hex-str($primary-color)}', endColorstr='#{ie-hex-str($secondary-color)}')";
+}

data/scss/prelude/mixins/_rem.scss

@@ -0,0 +1,31 @@
+// =============================================================================
+// Pixels to rems
+//
+// @usage: @include rem(property, value-in-pixels)
+// @example: @include rem(font-size, 16px); // result: font-size: 16px; font-size: 1rem;
+//
+// =============================================================================
+
+@mixin rem($property, $values) {
+
+    // Placeholder variables
+    $shorthand-px:  "";
+    $shorthand-rem: "";
+
+    // Parameter $values might be a list of elements
+    @each $value in $values
+    {
+        // Current value is a valid number and greater than 0
+        @if $value != auto and $value != 0 {
+            $shorthand-px: #{ $shorthand-px + " " + $value };
+            $shorthand-rem: #{ $shorthand-rem + " " + ($value / $base-font-size) + rem };
+        } @else {
+            // Add only 'auto' or 0 to the placeholder variables
+            $shorthand-px: #{ $shorthand-px + " " + $value };
+            $shorthand-rem: #{ $shorthand-rem + " " + $value };
+        }
+    }
+    // Output the property in px and rems
+    #{$property}: $shorthand-px;
+    #{$property}: $shorthand-rem;
+}

data/scss/prelude/mixins/_set-font-size.scss

@@ -0,0 +1,26 @@
+// =============================================================================
+// Set font size mixins
+//
+// Sets base html font-size and line-height. Use within media queries for
+// responsive typography. Font size is converted into percentage and line-height
+// in a unit-less value.
+//
+// @usage
+//  // Base
+//   @include set-font-size(24px, 36px);
+//  // Responsive design
+//  @media only screen and (min-width: 30em) {
+//      @include set-font-size(18px, 24px);
+//  }
+//
+// =============================================================================
+
+@mixin set-font-size($font-size: $base-font-size, $base-line: $base-line-height ) {
+    $fs: (($font-size / 1px ) / 16) * 100;
+    $bl: ($base-line / $font-size);
+
+    html {
+        font-size: $fs * 1%;
+        line-height: $bl;
+    }
+}