Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add Jekyll site

  • Loading branch information...
commit f53fe2475652c46d16091422a351f003db193e30 1 parent f142256
@kaishin kaishin authored
Showing with 2,031 additions and 0 deletions.
  1. +3 −0  _config.yml
  2. +34 −0 _layouts/default.html
  3. +229 −0 _sass/_reset.scss
  4. +4 −0 _sass/_variables.scss
  5. +40 −0 _sass/bourbon/_bourbon.scss
  6. +273 −0 _sass/bourbon/addons/_button.scss
  7. +29 −0 _sass/bourbon/addons/_clearfix.scss
  8. +12 −0 _sass/bourbon/addons/_font-face.scss
  9. +5 −0 _sass/bourbon/addons/_font-family.scss
  10. +15 −0 _sass/bourbon/addons/_hide-text.scss
  11. +36 −0 _sass/bourbon/addons/_html5-input-types.scss
  12. +42 −0 _sass/bourbon/addons/_position.scss
  13. +32 −0 _sass/bourbon/addons/_timing-functions.scss
  14. +125 −0 _sass/bourbon/css3/_animation.scss
  15. +3 −0  _sass/bourbon/css3/_appearance.scss
  16. +57 −0 _sass/bourbon/css3/_background-image.scss
  17. +11 −0 _sass/bourbon/css3/_background-size.scss
  18. +107 −0 _sass/bourbon/css3/_background.scss
  19. +56 −0 _sass/bourbon/css3/_border-image.scss
  20. +44 −0 _sass/bourbon/css3/_border-radius.scss
  21. +12 −0 _sass/bourbon/css3/_box-shadow.scss
  22. +4 −0 _sass/bourbon/css3/_box-sizing.scss
  23. +47 −0 _sass/bourbon/css3/_columns.scss
  24. +52 −0 _sass/bourbon/css3/_flex-box.scss
  25. +8 −0 _sass/bourbon/css3/_inline-block.scss
  26. +43 −0 _sass/bourbon/css3/_linear-gradient.scss
  27. +12 −0 _sass/bourbon/css3/_prefixer.scss
  28. +76 −0 _sass/bourbon/css3/_radial-gradient.scss
  29. +11 −0 _sass/bourbon/css3/_transform.scss
  30. +72 −0 _sass/bourbon/css3/_transition.scss
  31. +3 −0  _sass/bourbon/css3/_user-select.scss
  32. +44 −0 _sass/bourbon/functions/_deprecated-webkit-gradient.scss
  33. +35 −0 _sass/bourbon/functions/_flex-grid.scss
  34. +13 −0 _sass/bourbon/functions/_grid-width.scss
  35. +23 −0 _sass/bourbon/functions/_linear-gradient.scss
  36. +40 −0 _sass/bourbon/functions/_modular-scale.scss
  37. +62 −0 _sass/bourbon/functions/_radial-gradient.scss
  38. +14 −0 _sass/bourbon/functions/_render-gradients.scss
  39. +9 −0 _sass/bourbon/functions/_tint-shade.scss
  40. +22 −0 _sass/bourbon/functions/_transition-property-name.scss
  41. +19 −0 _sass/bourbon/lib/bourbon.rb
  42. +6 −0 _sass/bourbon/lib/bourbon/sass_extensions.rb
  43. +13 −0 _sass/bourbon/lib/bourbon/sass_extensions/functions.rb
  44. +14 −0 _sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
  45. +48 −0 _sass/desktop.scss
  46. +80 −0 _sass/mobile.scss
  47. +28 −0 images/logo.svg
  48. +64 −0 index.html
View
3  _config.yml
@@ -0,0 +1,3 @@
+auto: true
+exclude: README.md, functions, grid, typography, settings
+
View
34 _layouts/default.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>Bourbon Neat</title>
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+
+ <link rel="stylesheet" href="stylesheets/example/mobile.css">
+ <link rel="stylesheet" href="stylesheets/example/desktop.css" media="(min-width:40em)">
+
+ <!--[if (lt IE 9) & (!IEMobile)]>
+ <link rel="stylesheet" href="/css/ie.css">
+ <![endif]-->
+
+ </head>
+
+ <body>
+ <header>
+ <div class="header-content">
+ <div class="logo">
+ <img src="images/logo.svg" alt="" />
+ <div id="name">
+ <h2>Bourbon</h2>
+ <h1>Neat</h1>
+ </div>
+ </div>
+ </div>
+ </header>
+ {{ content }}
+ </body>
+
+</html>
View
229 _sass/_reset.scss
@@ -0,0 +1,229 @@
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+ margin:0;
+ padding:0;
+ border:0;
+ outline:0;
+ vertical-align:baseline;
+ background:transparent;
+}
+
+html,body {
+ font-size: 100%;
+}
+
+// Corrects block display not defined in IE8/9 & FF3
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
+ display: block;
+}
+
+// Corrects inline-block display not defined in IE8/9 & FF3
+audio, canvas, video {
+ display: inline-block;
+}
+
+// Prevents modern browsers from displaying 'audio' without controls
+audio:not([controls]) {
+ display: none;
+}
+
+// Addresses styling for 'hidden' attribute not present in IE8/9, FF3, S4
+[hidden] {
+ display: none;
+}
+
+// Prevents iOS text size adjust after orientation change, without disabling user zoom
+// www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+html {
+ font-size: 100%;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+// Addresses font-family inconsistency between 'textarea' and other form elements.
+html, button, input, select, textarea {
+ font-family: sans-serif;
+}
+
+a {
+ // Addresses outline displayed oddly in Chrome
+ &:focus {
+ outline: thin dotted;
+ // Webkit
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
+ }
+
+ // Improves readability when focused and also mouse hovered in all browsers
+ // people.opera.com/patrickl/experiments/keyboard/test
+ &:hover, &:active {
+ outline: 0;
+ }
+}
+
+// Addresses styling not present in IE8/9, S5, Chrome
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+// Addresses style set to 'bolder' in FF3+, S4/5, Chrome
+b, strong {
+ font-weight: bold;
+}
+
+blockquote {
+ margin: 1em 40px;
+}
+
+// Addresses styling not present in S5, Chrome
+dfn {
+ font-style: italic;
+}
+
+// Addresses styling not present in IE8/9
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+// Corrects font family set oddly in S4/5, Chrome
+// en.wikipedia.org/wiki/User:Davidgothberg/Test59
+pre, code, kbd, samp {
+ font-family: monospace, serif;
+ _font-family: 'courier new', monospace;
+ font-size: 1em;
+}
+
+// Improves readability of pre-formatted text in all browsers
+pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+// Addresses quote property not supported in S4
+blockquote, q {
+ quotes: none;
+ &:before, &:after {
+ content: '';
+ content: none;
+ }
+}
+
+small {
+ font-size: 75%;
+}
+
+sub, sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+nav {
+ ul, ol {
+ list-style: none;
+ list-style-image: none;
+ }
+}
+
+// Removes border when inside 'a' element in IE8/9, FF3
+img {
+ border: 0;
+ height: auto;
+ max-width: 100%;
+ -ms-interpolation-mode: bicubic;
+}
+
+// Corrects overflow displayed oddly in IE9
+svg:not(:root) {
+ overflow: hidden;
+}
+
+// Define consistent border, margin, and padding
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+ border: 0; // Corrects color not being inherited in IE8/9
+ padding: 0;
+ white-space: normal; // Corrects text not wrapping in FF3
+}
+
+button, input, select, textarea {
+ font-size: 100%; // Corrects font size not being inherited in all browsers
+ margin: 0; // Addresses margins set differently in FF3+, S5, Chrome
+ vertical-align: baseline; // Improves appearance and consistency in all browsers
+}
+
+// Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
+button, input {
+ line-height: normal;
+}
+
+button, input[type="button"], input[type="reset"], input[type="submit"] {
+ cursor: pointer; // Improves usability and consistency of cursor style between image-type 'input' and others
+ -webkit-appearance: button; // Corrects inability to style clickable 'input' types in iOS
+}
+
+// Re-set default cursor for disabled elements
+button[disabled], input[disabled] {
+ cursor: default;
+}
+
+input[type="checkbox"], input[type="radio"] {
+ box-sizing: border-box; // Addresses box sizing set to content-box in IE8/9
+ padding: 0; //Removes excess padding in IE8/9
+}
+
+input[type="search"] {
+ -webkit-appearance: textfield; // Addresses appearance set to searchfield in S5, Chrome
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box; // Addresses box-sizing set to border-box in S5, Chrome (-moz to future-proof)
+ box-sizing: content-box;
+}
+
+// Removes inner padding and search cancel button in S5, Chrome on OS X
+input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+}
+
+// Removes inner padding and border in FF3+
+// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
+button::-moz-focus-inner, input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+textarea {
+ overflow: auto; // Removes default vertical scrollbar in IE8/9
+ vertical-align: top; // Improves readability and alignment in all browsers
+}
+
+// Remove most spacing between table cells
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
View
4 _sass/_variables.scss
@@ -0,0 +1,4 @@
+@import "../neat/functions";
+
+// Overrides Neat's default
+$max-width: em(1024);
View
40 _sass/bourbon/_bourbon.scss
@@ -0,0 +1,40 @@
+// Custom Functions
+@import "functions/deprecated-webkit-gradient";
+@import "functions/flex-grid";
+@import "functions/grid-width";
+@import "functions/linear-gradient";
+@import "functions/modular-scale";
+@import "functions/radial-gradient";
+@import "functions/render-gradients";
+@import "functions/tint-shade";
+@import "functions/transition-property-name";
+
+// CSS3 Mixins
+@import "css3/animation";
+@import "css3/appearance";
+@import "css3/background";
+@import "css3/background-image";
+@import "css3/background-size";
+@import "css3/border-image";
+@import "css3/border-radius";
+@import "css3/box-shadow";
+@import "css3/box-sizing";
+@import "css3/columns";
+@import "css3/flex-box";
+@import "css3/inline-block";
+@import "css3/linear-gradient";
+@import "css3/prefixer";
+@import "css3/radial-gradient";
+@import "css3/transform";
+@import "css3/transition";
+@import "css3/user-select";
+
+// Addons & other mixins
+@import "addons/button";
+@import "addons/clearfix";
+@import "addons/font-face";
+@import "addons/font-family";
+@import "addons/hide-text";
+@import "addons/html5-input-types";
+@import "addons/position";
+@import "addons/timing-functions";
View
273 _sass/bourbon/addons/_button.scss
@@ -0,0 +1,273 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+
+ @if type-of($style) == color {
+ $base-color: $style;
+ $style: simple;
+ }
+
+ // Grayscale button
+ @if $base-color == grayscale($base-color) {
+ @if $style == simple {
+ @include simple($base-color, $grayscale: true);
+ }
+
+ @else if $style == shiny {
+ @include shiny($base-color, $grayscale: true);
+ }
+
+ @else if $style == pill {
+ @include pill($base-color, $grayscale: true);
+ }
+ }
+
+ // Colored button
+ @else {
+ @if $style == simple {
+ @include simple($base-color);
+ }
+
+ @else if $style == shiny {
+ @include shiny($base-color);
+ }
+
+ @else if $style == pill {
+ @include pill($base-color);
+ }
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+}
+
+
+// Simple Button
+//************************************************************************//
+@mixin simple($base-color, $grayscale: false) {
+ $color: hsl(0, 0, 100%);
+ $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
+ $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
+ $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @if $grayscale == true {
+ $border: grayscale($border);
+ $inset-shadow: grayscale($inset-shadow);
+ $stop-gradient: grayscale($stop-gradient);
+ $text-shadow: grayscale($text-shadow);
+ }
+
+ border: 1px solid $border;
+ @include border-radius (3px);
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+ color: $color;
+ display: inline-block;
+ font-size: 11px;
+ font-weight: bold;
+ @include linear-gradient ($base-color, $stop-gradient);
+ padding: 7px 18px;
+ text-decoration: none;
+ text-shadow: 0 1px 0 $text-shadow;
+ -webkit-background-clip: padding-box;
+
+ &:hover:not(:disabled) {
+ $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
+ $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
+
+ @if $grayscale == true {
+ $base-color-hover: grayscale($base-color-hover);
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
+ }
+
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+ cursor: pointer;
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ }
+
+ &:active:not(:disabled) {
+ $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+ @if $grayscale == true {
+ $border-active: grayscale($border-active);
+ $inset-shadow-active: grayscale($inset-shadow-active);
+ }
+
+ border: 1px solid $border-active;
+ @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+ }
+}
+
+
+// Shiny Button
+//************************************************************************//
+@mixin shiny($base-color, $grayscale: false) {
+ $color: hsl(0, 0, 100%);
+ $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+ $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
+ $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
+ $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
+ $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
+ $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+ $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @if $grayscale == true {
+ $border: grayscale($border);
+ $border-bottom: grayscale($border-bottom);
+ $fourth-stop: grayscale($fourth-stop);
+ $inset-shadow: grayscale($inset-shadow);
+ $second-stop: grayscale($second-stop);
+ $text-shadow: grayscale($text-shadow);
+ $third-stop: grayscale($third-stop);
+ }
+
+ border: 1px solid $border;
+ border-bottom: 1px solid $border-bottom;
+ @include border-radius(5px);
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow);
+ color: $color;
+ display: inline-block;
+ font-size: 14px;
+ font-weight: bold;
+ @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+ padding: 8px 20px;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: 0 -1px 1px $text-shadow;
+
+ &:hover:not(:disabled) {
+ $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+ $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+ $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+ $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
+
+ @if $grayscale == true {
+ $first-stop-hover: grayscale($first-stop-hover);
+ $second-stop-hover: grayscale($second-stop-hover);
+ $third-stop-hover: grayscale($third-stop-hover);
+ $fourth-stop-hover: grayscale($fourth-stop-hover);
+ }
+
+ cursor: pointer;
+ @include linear-gradient(top, $first-stop-hover 0%,
+ $second-stop-hover 50%,
+ $third-stop-hover 50%,
+ $fourth-stop-hover 100%);
+ }
+
+ &:active:not(:disabled) {
+ $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+ @if $grayscale == true {
+ $inset-shadow-active: grayscale($inset-shadow-active);
+ }
+
+ @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
+ }
+}
+
+
+// Pill Button
+//************************************************************************//
+@mixin pill($base-color, $grayscale: false) {
+ $color: hsl(0, 0, 100%);
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+ $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
+ $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
+ $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @if $grayscale == true {
+ $border-bottom: grayscale($border-bottom);
+ $border-sides: grayscale($border-sides);
+ $border-top: grayscale($border-top);
+ $inset-shadow: grayscale($inset-shadow);
+ $stop-gradient: grayscale($stop-gradient);
+ $text-shadow: grayscale($text-shadow);
+ }
+
+ border: 1px solid $border-top;
+ border-color: $border-top $border-sides $border-bottom;
+ @include border-radius(16px);
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+ color: $color;
+ display: inline-block;
+ font-size: 11px;
+ font-weight: normal;
+ line-height: 1;
+ @include linear-gradient ($base-color, $stop-gradient);
+ padding: 5px 16px;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: 0 -1px 1px $text-shadow;
+ -webkit-background-clip: padding-box;
+
+ &:hover:not(:disabled) {
+ $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
+ $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
+ $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
+
+ @if $grayscale == true {
+ $base-color-hover: grayscale($base-color-hover);
+ $border-bottom: grayscale($border-bottom);
+ $border-sides: grayscale($border-sides);
+ $border-top: grayscale($border-top);
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
+ $text-shadow-hover: grayscale($text-shadow-hover);
+ }
+
+ border: 1px solid $border-top;
+ border-color: $border-top $border-sides $border-bottom;
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+ cursor: pointer;
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ text-shadow: 0 -1px 1px $text-shadow-hover;
+ -webkit-background-clip: padding-box;
+ }
+
+ &:active:not(:disabled) {
+ $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
+ $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
+ $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
+ $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
+ $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
+
+ @if $grayscale == true {
+ $active-color: grayscale($active-color);
+ $border-active: grayscale($border-active);
+ $border-bottom-active: grayscale($border-bottom-active);
+ $inset-shadow-active: grayscale($inset-shadow-active);
+ $text-shadow-active: grayscale($text-shadow-active);
+ }
+
+ background: $active-color;
+ border: 1px solid $border-active;
+ border-bottom: 1px solid $border-bottom-active;
+ @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+ text-shadow: 0 -1px 1px $text-shadow-active;
+ }
+}
View
29 _sass/bourbon/addons/_clearfix.scss
@@ -0,0 +1,29 @@
+// Micro clearfix provides an easy way to contain floats without adding additional markup
+//
+// Example usage:
+//
+// // Contain all floats within .wrapper
+// .wrapper {
+// @include clearfix;
+// .content,
+// .sidebar {
+// float : left;
+// }
+// }
+
+@mixin clearfix {
+ zoom: 1;
+
+ &:before,
+ &:after {
+ content: "";
+ display: table;
+ }
+
+ &:after {
+ clear: both;
+ }
+}
+
+// Acknowledgements
+// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)
View
12 _sass/bourbon/addons/_font-face.scss
@@ -0,0 +1,12 @@
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
+ @font-face {
+ font-family: $font-family;
+ src: url('#{$file-path}.eot');
+ src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
+ url('#{$file-path}.woff') format('woff'),
+ url('#{$file-path}.ttf') format('truetype'),
+ url('#{$file-path}.svg##{$font-family}') format('svg');
+ font-weight: $weight;
+ font-style: $style;
+ }
+}
View
5 _sass/bourbon/addons/_font-family.scss
@@ -0,0 +1,5 @@
+$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
+$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
+$verdana: Verdana, Geneva, sans-serif;
View
15 _sass/bourbon/addons/_hide-text.scss
@@ -0,0 +1,15 @@
+@mixin hide-text {
+ background-color: transparent;
+ border: 0;
+ color: transparent;
+ font: 0/0 a;
+ text-shadow: none;
+}
+
+// A CSS image replacement method that does not require the use of text-indent.
+//
+// Examples
+//
+// .ir {
+// @include hide-text;
+// }
View
36 _sass/bourbon/addons/_html5-input-types.scss
@@ -0,0 +1,36 @@
+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+ 'input[type="number"]',
+ 'input[type="password"]',
+ 'input[type="search"]',
+ 'input[type="tel"]',
+ 'input[type="text"]',
+ 'input[type="url"]',
+
+ // Webkit & Gecko may change the display of these in the future
+ 'input[type="color"]',
+ 'input[type="date"]',
+ 'input[type="datetime"]',
+ 'input[type="datetime-local"]',
+ 'input[type="month"]',
+ 'input[type="time"]',
+ 'input[type="week"]';
+
+$unquoted-inputs-list: ();
+
+@each $input-type in $inputs-list {
+ $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
+}
+
+$all-text-inputs: $unquoted-inputs-list;
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+//************************************************************************//
+// #{$all-text-inputs}, textarea {
+// border: 1px solid red;
+// }
View
42 _sass/bourbon/addons/_position.scss
@@ -0,0 +1,42 @@
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+ @if type-of($position) == list {
+ $coordinates: $position;
+ $position: relative;
+ }
+
+ $top: nth($coordinates, 1);
+ $right: nth($coordinates, 2);
+ $bottom: nth($coordinates, 3);
+ $left: nth($coordinates, 4);
+
+ position: $position;
+
+ @if $top == auto {
+ top: $top;
+ }
+ @else if not(unitless($top)) {
+ top: $top;
+ }
+
+ @if $right == auto {
+ right: $right;
+ }
+ @else if not(unitless($right)) {
+ right: $right;
+ }
+
+ @if $bottom == auto {
+ bottom: $bottom;
+ }
+ @else if not(unitless($bottom)) {
+ bottom: $bottom;
+ }
+
+ @if $left == auto {
+ left: $left;
+ }
+ @else if not(unitless($left)) {
+ left: $left;
+ }
+}
View
32 _sass/bourbon/addons/_timing-functions.scss
@@ -0,0 +1,32 @@
+// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
+
+// EASE IN
+$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+// EASE OUT
+$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
+// EASE IN OUT
+$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
View
125 _sass/bourbon/css3/_animation.scss
@@ -0,0 +1,125 @@
+// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
+
+// Official animation shorthand property.
+@mixin animation ($animation-1,
+ $animation-2: false, $animation-3: false,
+ $animation-4: false, $animation-5: false,
+ $animation-6: false, $animation-7: false,
+ $animation-8: false, $animation-9: false)
+ {
+ $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
+ $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
+
+ @include prefixer(animation, $full);
+}
+
+// Individual Animation Properties
+@mixin animation-name ($name-1,
+ $name-2: false, $name-3: false,
+ $name-4: false, $name-5: false,
+ $name-6: false, $name-7: false,
+ $name-8: false, $name-9: false)
+ {
+ $full: compact($name-1, $name-2, $name-3, $name-4,
+ $name-5, $name-6, $name-7, $name-8, $name-9);
+
+ @include prefixer(animation-name, $full);
+}
+
+
+@mixin animation-duration ($time-1: 0,
+ $time-2: false, $time-3: false,
+ $time-4: false, $time-5: false,
+ $time-6: false, $time-7: false,
+ $time-8: false, $time-9: false)
+ {
+ $full: compact($time-1, $time-2, $time-3, $time-4,
+ $time-5, $time-6, $time-7, $time-8, $time-9);
+
+ @include prefixer(animation-duration, $full);
+}
+
+
+@mixin animation-timing-function ($motion-1: ease,
+// ease | linear | ease-in | ease-out | ease-in-out
+ $motion-2: false, $motion-3: false,
+ $motion-4: false, $motion-5: false,
+ $motion-6: false, $motion-7: false,
+ $motion-8: false, $motion-9: false)
+ {
+ $full: compact($motion-1, $motion-2, $motion-3, $motion-4,
+ $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
+
+ @include prefixer(animation-timing-function, $full);
+}
+
+
+@mixin animation-iteration-count ($value-1: 1,
+// infinite | <number>
+ $value-2: false, $value-3: false,
+ $value-4: false, $value-5: false,
+ $value-6: false, $value-7: false,
+ $value-8: false, $value-9: false)
+ {
+ $full: compact($value-1, $value-2, $value-3, $value-4,
+ $value-5, $value-6, $value-7, $value-8, $value-9);
+
+ @include prefixer(animation-iteration-count, $full);
+}
+
+
+@mixin animation-direction ($direction-1: normal,
+// normal | alternate
+ $direction-2: false, $direction-3: false,
+ $direction-4: false, $direction-5: false,
+ $direction-6: false, $direction-7: false,
+ $direction-8: false, $direction-9: false)
+ {
+ $full: compact($direction-1, $direction-2, $direction-3, $direction-4,
+ $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
+
+ @include prefixer(animation-direction, $full);
+}
+
+
+@mixin animation-play-state ($state-1: running,
+// running | paused
+ $state-2: false, $state-3: false,
+ $state-4: false, $state-5: false,
+ $state-6: false, $state-7: false,
+ $state-8: false, $state-9: false)
+ {
+ $full: compact($state-1, $state-2, $state-3, $state-4,
+ $state-5, $state-6, $state-7, $state-8, $state-9);
+
+ @include prefixer(animation-play-state, $full);
+}
+
+
+@mixin animation-delay ($time-1: 0,
+ $time-2: false, $time-3: false,
+ $time-4: false, $time-5: false,
+ $time-6: false, $time-7: false,
+ $time-8: false, $time-9: false)
+ {
+ $full: compact($time-1, $time-2, $time-3, $time-4,
+ $time-5, $time-6, $time-7, $time-8, $time-9);
+
+ @include prefixer(animation-delay, $full);
+}
+
+
+@mixin animation-fill-mode ($mode-1: none,
+// http://goo.gl/l6ckm
+// none | forwards | backwards | both
+ $mode-2: false, $mode-3: false,
+ $mode-4: false, $mode-5: false,
+ $mode-6: false, $mode-7: false,
+ $mode-8: false, $mode-9: false)
+ {
+ $full: compact($mode-1, $mode-2, $mode-3, $mode-4,
+ $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
+
+ @include prefixer(animation-fill-mode, $full);
+}
View
3  _sass/bourbon/css3/_appearance.scss
@@ -0,0 +1,3 @@
+@mixin appearance ($value) {
+ @include prefixer(appearance, $value, webkit, moz, ms, o);
+}
View
57 _sass/bourbon/css3/_background-image.scss
@@ -0,0 +1,57 @@
+//************************************************************************//
+// Background-image property for adding multiple background images with
+// gradients, or for stringing multiple gradients together.
+//************************************************************************//
+
+@mixin background-image(
+ $image-1 , $image-2: false,
+ $image-3: false, $image-4: false,
+ $image-5: false, $image-6: false,
+ $image-7: false, $image-8: false,
+ $image-9: false, $image-10: false
+) {
+ $images: compact($image-1, $image-2,
+ $image-3, $image-4,
+ $image-5, $image-6,
+ $image-7, $image-8,
+ $image-9, $image-10);
+
+ background-image: add-prefix($images, webkit);
+ background-image: add-prefix($images, moz);
+ background-image: add-prefix($images, ms);
+ background-image: add-prefix($images, o);
+ background-image: add-prefix($images);
+}
+
+
+@function add-prefix($images, $vendor: false) {
+ $images-prefixed: ();
+
+ @for $i from 1 through length($images) {
+ $type: type-of(nth($images, $i)); // Get type of variable - List or String
+
+ // If variable is a list - Gradient
+ @if $type == list {
+ $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
+ $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+
+ $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
+ $images-prefixed: append($images-prefixed, $gradient, comma);
+ }
+
+ // If variable is a string - Image
+ @else if $type == string {
+ $images-prefixed: join($images-prefixed, nth($images, $i), comma);
+ }
+ }
+ @return $images-prefixed;
+}
+
+
+
+//Examples:
+ //@include background-image(linear-gradient(top, orange, red));
+ //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
+ //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
+ //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
+ //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red);
View
11 _sass/bourbon/css3/_background-size.scss
@@ -0,0 +1,11 @@
+@mixin background-size ($length-1,
+ $length-2: false, $length-3: false,
+ $length-4: false, $length-5: false,
+ $length-6: false, $length-7: false,
+ $length-8: false, $length-9: false)
+ {
+ $full: compact($length-1, $length-2, $length-3, $length-4,
+ $length-5, $length-6, $length-7, $length-8, $length-9);
+
+@include prefixer(background-size, $full, webkit, moz, ms, o);
+}
View
107 _sass/bourbon/css3/_background.scss
@@ -0,0 +1,107 @@
+//************************************************************************//
+// Background property for adding multiple backgrounds using shorthand
+// notation.
+//************************************************************************//
+
+@mixin background(
+ $background-1 , $background-2: false,
+ $background-3: false, $background-4: false,
+ $background-5: false, $background-6: false,
+ $background-7: false, $background-8: false,
+ $background-9: false, $background-10: false,
+ $fallback: false
+) {
+ $backgrounds: compact($background-1, $background-2,
+ $background-3, $background-4,
+ $background-5, $background-6,
+ $background-7, $background-8,
+ $background-9, $background-10);
+
+ $fallback-color: false;
+ @if (type-of($fallback) == color) or ($fallback == "transparent") {
+ $fallback-color: $fallback;
+ }
+ @else {
+ $fallback-color: extract-background-color($backgrounds);
+ }
+
+ @if $fallback-color {
+ background-color: $fallback-color;
+ }
+ background: background-add-prefix($backgrounds, webkit);
+ background: background-add-prefix($backgrounds, moz);
+ background: background-add-prefix($backgrounds, ms);
+ background: background-add-prefix($backgrounds, o);
+ background: background-add-prefix($backgrounds);
+}
+
+@function extract-background-color($backgrounds) {
+ $final-bg-layer: nth($backgrounds, length($backgrounds));
+ @if type-of($final-bg-layer) == list {
+ @for $i from 1 through length($final-bg-layer) {
+ $value: nth($final-bg-layer, $i);
+ @if type-of($value) == color {
+ @return $value;
+ }
+ }
+ }
+ @return false;
+}
+
+
+@function background-add-prefix($backgrounds, $vendor: false) {
+ $backgrounds-prefixed: ();
+
+ @for $i from 1 through length($backgrounds) {
+ $shorthand: nth($backgrounds, $i); // Get member for current index
+ $type: type-of($shorthand); // Get type of variable - List or String
+
+ // If shorthand is a list
+ @if $type == list {
+ $first-member: nth($shorthand, 1); // Get first member of shorthand
+
+ // Linear Gradient
+ @if index(linear radial, nth($first-member, 1)) {
+ $gradient-type: nth($first-member, 1); // linear || radial
+
+ // Get actual gradient (red, blue)
+ $gradient-args: false;
+ $shorthand-start: false;
+ // Linear gradient and positioning, repeat, etc. values
+ @if type-of($first-member) == list {
+ $gradient-args: nth($first-member, 2);
+ $shorthand-start: 2;
+ }
+ // Linear gradient only
+ @else {
+ $gradient-args: nth($shorthand, 2); // Get actual gradient (red, blue)
+ $shorthand-start: 3;
+ }
+
+ $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
+ @for $j from $shorthand-start through length($shorthand) {
+ $gradient: join($gradient, nth($shorthand, $j), space);
+ }
+ $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
+ }
+
+ // Image with additional properties
+ @else {
+ $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
+ }
+
+ }
+
+ // If shorthand is a simple string, color or image
+ @else if $type == string {
+ $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
+ }
+ }
+ @return $backgrounds-prefixed;
+}
+
+//Examples:
+ //@include background(linear-gradient(top, orange, red));
+ //@include background(radial-gradient(50% 50%, cover circle, orange, red));
+ //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
+ //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
View
56 _sass/bourbon/css3/_border-image.scss
@@ -0,0 +1,56 @@
+@mixin border-image($images) {
+ -webkit-border-image: border-add-prefix($images, webkit);
+ -moz-border-image: border-add-prefix($images, moz);
+ -o-border-image: border-add-prefix($images, o);
+ border-image: border-add-prefix($images);
+}
+
+@function border-add-prefix($images, $vendor: false) {
+ $border-image: ();
+ $images-type: type-of(nth($images, 1));
+ $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial)
+
+ // If input is a gradient
+ @if $images-type == string {
+ @if ($first-var == "linear") or ($first-var == "radial") {
+ @for $i from 2 through length($images) {
+ $gradient-type: nth($images, 1); // Get type of gradient (linear || radial)
+ $gradient-args: nth($images, $i); // Get actual gradient (red, blue)
+ $border-image: render-gradients($gradient-args, $gradient-type, $vendor);
+ }
+ }
+
+ // If input is a URL
+ @else {
+ $border-image: $images;
+ }
+ }
+
+ // If input is gradient or url + additional args
+ @else if $images-type == list {
+ @for $i from 1 through length($images) {
+ $type: type-of(nth($images, $i)); // Get type of variable - List or String
+
+ // If variable is a list - Gradient
+ @if $type == list {
+ $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
+ $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+ $border-image: render-gradients($gradient-args, $gradient-type, $vendor);
+ }
+
+ // If variable is a string - Image or number
+ @else if ($type == string) or ($type == number) {
+ $border-image: append($border-image, nth($images, $i));
+ }
+ }
+ }
+ @return $border-image;
+}
+
+//Examples:
+// @include border-image(url("image.png"));
+// @include border-image(url("image.png") 20 stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow));
+// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
+// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
View
44 _sass/bourbon/css3/_border-radius.scss
@@ -0,0 +1,44 @@
+@mixin border-radius ($radii) {
+ @include prefixer(border-radius, $radii, webkit, not moz);
+ @warn "border-radius mixin is deprecated and will be removed in the next major version release.";
+}
+
+@mixin border-top-left-radius($radii) {
+ @include prefixer(border-top-left-radius, $radii, webkit, not moz);
+ @warn "border-top-left-radius mixin is deprecated and will be removed in the next major version release.";
+}
+
+@mixin border-top-right-radius($radii) {
+ @include prefixer(border-top-right-radius, $radii, webkit, not moz);
+ @warn "border-top-right-radius mixin is deprecated and will be removed in the next major version release.";
+}
+
+@mixin border-bottom-left-radius($radii) {
+ @include prefixer(border-bottom-left-radius, $radii, webkit, not moz);
+ @warn "border-bottom-left-radius mixin is deprecated and will be removed in the next major version release.";
+}
+
+@mixin border-bottom-right-radius($radii) {
+ @include prefixer(border-bottom-right-radius, $radii, webkit, not moz);
+ @warn "border-bottom-right-radius mixin is deprecated and will be removed in the next major version release.";
+}
+
+@mixin border-top-radius($radii) {
+ @include border-top-left-radius($radii);
+ @include border-top-right-radius($radii);
+}
+
+@mixin border-right-radius($radii) {
+ @include border-top-right-radius($radii);
+ @include border-bottom-right-radius($radii);
+}
+
+@mixin border-bottom-radius($radii) {
+ @include border-bottom-left-radius($radii);
+ @include border-bottom-right-radius($radii);
+}
+
+@mixin border-left-radius($radii) {
+ @include border-top-left-radius($radii);
+ @include border-bottom-left-radius($radii);
+}
View
12 _sass/bourbon/css3/_box-shadow.scss
@@ -0,0 +1,12 @@
+// Box-Shadow Mixin Requires Sass v3.1.1+
+@mixin box-shadow ($shadow-1,
+ $shadow-2: false, $shadow-3: false,
+ $shadow-4: false, $shadow-5: false,
+ $shadow-6: false, $shadow-7: false,
+ $shadow-8: false, $shadow-9: false)
+ {
+ $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
+ $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
+
+ @include prefixer(box-shadow, $full, webkit, not moz);
+}
View
4 _sass/bourbon/css3/_box-sizing.scss
@@ -0,0 +1,4 @@
+@mixin box-sizing ($box) {
+// content-box | border-box | inherit
+ @include prefixer(box-sizing, $box);
+}
View
47 _sass/bourbon/css3/_columns.scss
@@ -0,0 +1,47 @@
+@mixin columns($arg: auto) {
+// <column-count> || <column-width>
+ @include prefixer(columns, $arg);
+}
+
+@mixin column-count($int: auto) {
+// auto || integer
+ @include prefixer(column-count, $int);
+}
+
+@mixin column-gap($length: normal) {
+// normal || length
+ @include prefixer(column-gap, $length);
+}
+
+@mixin column-fill($arg: auto) {
+// auto || length
+ @include prefixer(columns-fill, $arg);
+}
+
+@mixin column-rule($arg) {
+// <border-width> || <border-style> || <color>
+ @include prefixer(column-rule, $arg);
+}
+
+@mixin column-rule-color($color) {
+ @include prefixer(column-rule-color, $color);
+}
+
+@mixin column-rule-style($style: none) {
+// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
+ @include prefixer(column-rule-style, $style);
+}
+
+@mixin column-rule-width ($width: none) {
+ @include prefixer(column-rule-width, $width);
+}
+
+@mixin column-span($arg: none) {
+// none || all
+ @include prefixer(column-span, $arg);
+}
+
+@mixin column-width($length: auto) {
+// auto || length
+ @include prefixer(column-width, $length);
+}
View
52 _sass/bourbon/css3/_flex-box.scss
@@ -0,0 +1,52 @@
+// CSS3 Flexible Box Model and property defaults
+
+// Custom shorthand notation for flexbox
+@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
+ @include display-box;
+ @include box-orient($orient);
+ @include box-pack($pack);
+ @include box-align($align);
+}
+
+@mixin display-box {
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+}
+
+@mixin box-orient($orient: inline-axis) {
+// horizontal|vertical|inline-axis|block-axis|inherit
+ @include prefixer(box-orient, $orient);
+}
+
+@mixin box-pack($pack: start) {
+// start|end|center|justify
+ @include prefixer(box-pack, $pack);
+}
+
+@mixin box-align($align: stretch) {
+// start|end|center|baseline|stretch
+ @include prefixer(box-align, $align);
+}
+
+@mixin box-direction($direction: normal) {
+// normal|reverse|inherit
+ @include prefixer(box-direction, $direction);
+}
+
+@mixin box-lines($lines: single) {
+// single|multiple
+ @include prefixer(box-lines, $lines);
+}
+
+@mixin box-ordinal-group($int: 1) {
+ @include prefixer(box-ordinal-group, $int);
+}
+
+@mixin box-flex($value: 0.0) {
+ @include prefixer(box-flex, $value);
+}
+
+@mixin box-flex-group($int: 1) {
+ @include prefixer(box-flex-group, $int);
+}
View
8 _sass/bourbon/css3/_inline-block.scss
@@ -0,0 +1,8 @@
+// Legacy support for inline-block in IE7 (maybe IE6)
+@mixin inline-block {
+ display: inline-block;
+ vertical-align: baseline;
+ zoom: 1;
+ *display: inline;
+ *vertical-align: auto;
+}
View
43 _sass/bourbon/css3/_linear-gradient.scss
@@ -0,0 +1,43 @@
+@mixin linear-gradient($pos, $G1, $G2: false,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false,
+ $G9: false, $G10: false,
+ $deprecated-pos1: left top,
+ $deprecated-pos2: left bottom,
+ $fallback: false) {
+ // Detect what type of value exists in $pos
+ $pos-type: type-of(nth($pos, 1));
+
+ // If $pos is missing from mixin, reassign vars and add default position
+ @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
+ $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+ $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+ $pos: top; // Default position
+ }
+
+ $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+ // Set $G1 as the default fallback color
+ $fallback-color: nth($G1, 1);
+
+ // If $fallback is a color use that color as the fallback color
+ @if (type-of($fallback) == color) or ($fallback == "transparent") {
+ $fallback-color: $fallback;
+ }
+
+ background-color: $fallback-color;
+ background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
+ background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
+ background-image: -moz-linear-gradient($pos, $full);
+ background-image: -ms-linear-gradient($pos, $full);
+ background-image: -o-linear-gradient($pos, $full);
+ background-image: unquote("linear-gradient(#{$pos}, #{$full})");
+}
+
+
+// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
+// @include linear-gradient(#1e5799, #2989d8);
+// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
+// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
+// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
View
12 _sass/bourbon/css3/_prefixer.scss
@@ -0,0 +1,12 @@
+@mixin prefixer ($property, $value,
+ $webkit: true,
+ $moz: true,
+ $ms: false,
+ $o: false,
+ $spec: true) {
+ @if $webkit { -webkit-#{$property}: $value; }
+ @if $moz { -moz-#{$property}: $value; }
+ @if $ms { -ms-#{$property}: $value; }
+ @if $o { -o-#{$property}: $value; }
+ @if $spec { #{$property}: $value; }
+}
View
76 _sass/bourbon/css3/_radial-gradient.scss
@@ -0,0 +1,76 @@
+// Requires Sass 3.1+
+@mixin radial-gradient($G1, $G2,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false,
+ $G9: false, $G10: false,
+ $pos: 50% 50%,
+ $shape-size: ellipse cover,
+ $deprecated-pos1: center center,
+ $deprecated-pos2: center center,
+ $deprecated-radius1: 0,
+ $deprecated-radius2: 460,
+ $fallback: false) {
+
+ @each $value in $G1, $G2 {
+ $first-val: nth($value, 1);
+ $pos-type: type-of($first-val);
+
+ @if ($pos-type != color) or ($first-val != "transparent") {
+ @if ($pos-type == number)
+ or ($first-val == "center")
+ or ($first-val == "top")
+ or ($first-val == "right")
+ or ($first-val == "bottom")
+ or ($first-val == "left") {
+
+ $pos: $value;
+
+ @if $pos == $G1 {
+ $G1: false;
+ }
+ }
+
+ @else if
+ ($first-val == "ellipse")
+ or ($first-val == "circle")
+ or ($first-val == "closest-side")
+ or ($first-val == "closest-corner")
+ or ($first-val == "farthest-side")
+ or ($first-val == "farthest-corner")
+ or ($first-val == "contain")
+ or ($first-val == "cover") {
+
+ $shape-size: $value;
+
+ @if $value == $G1 {
+ $G1: false;
+ }
+
+ @else if $value == $G2 {
+ $G2: false;
+ }
+ }
+ }
+ }
+
+ $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+ $fallback-color: nth($G1, 1);
+
+ @if (type-of($fallback) == color) or ($fallback == "transparent") {
+ $fallback-color: $fallback;
+ }
+
+ background-color: $fallback-color;
+ background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0
+ background-image: -webkit-radial-gradient($pos, $shape-size, $full);
+ background-image: -moz-radial-gradient($pos, $shape-size, $full);
+ background-image: -ms-radial-gradient($pos, $shape-size, $full);
+ background-image: -o-radial-gradient($pos, $shape-size, $full);
+ background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
+}
+
+// Usage: Gradient position and shape-size are required. Color stops are optional.
+// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
+// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
View
11 _sass/bourbon/css3/_transform.scss
@@ -0,0 +1,11 @@
+@mixin transform($property: none) {
+// none | <transform-function>
+ @include prefixer(transform, $property, webkit, moz, ms, o);
+}
+
+@mixin transform-origin($axes: 50%) {
+// x-axis - left | center | right | length | %
+// y-axis - top | center | bottom | length | %
+// z-axis - length
+ @include prefixer(transform-origin, $axes, webkit, moz, ms, o);
+}
View
72 _sass/bourbon/css3/_transition.scss
@@ -0,0 +1,72 @@
+// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include transition (all, 2.0s, ease-in-out);
+// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
+// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
+
+@mixin transition ($prop-1: all 0.15s ease-out 0,
+ $prop-2: false, $prop-3: false,
+ $prop-4: false, $prop-5: false,
+ $prop-6: false, $prop-7: false,
+ $prop-8: false, $prop-9: false)
+ {
+ $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
+ $prop-6, $prop-7, $prop-8, $prop-9);
+
+ @include prefixer(transition, $full, webkit, moz, ms, o);
+}
+
+
+
+@mixin transition-property ($prop-1: all,
+ $prop-2: false, $prop-3: false,
+ $prop-4: false, $prop-5: false,
+ $prop-6: false, $prop-7: false,
+ $prop-8: false, $prop-9: false)
+ {
+ $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
+ $prop-6, $prop-7, $prop-8, $prop-9);
+
+ -webkit-transition-property: transition-property-names($full, 'webkit');
+ -moz-transition-property: transition-property-names($full, 'moz');
+ -ms-transition-property: transition-property-names($full, 'ms');
+ -o-transition-property: transition-property-names($full, 'o');
+ transition-property: transition-property-names($full, false);
+}
+
+@mixin transition-duration ($time-1: 0,
+ $time-2: false, $time-3: false,
+ $time-4: false, $time-5: false,
+ $time-6: false, $time-7: false,
+ $time-8: false, $time-9: false)
+ {
+ $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
+ $time-6, $time-7, $time-8, $time-9);
+
+ @include prefixer(transition-duration, $full, webkit, moz, ms, o);
+}
+
+@mixin transition-timing-function ($motion-1: ease,
+ $motion-2: false, $motion-3: false,
+ $motion-4: false, $motion-5: false,
+ $motion-6: false, $motion-7: false,
+ $motion-8: false, $motion-9: false)
+ {
+ $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
+ $motion-6, $motion-7, $motion-8, $motion-9);
+
+// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
+ @include prefixer(transition-timing-function, $full, webkit, moz, ms, o);
+}
+
+@mixin transition-delay ($time-1: 0,
+ $time-2: false, $time-3: false,
+ $time-4: false, $time-5: false,
+ $time-6: false, $time-7: false,
+ $time-8: false, $time-9: false)
+ {
+ $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
+ $time-6, $time-7, $time-8, $time-9);
+
+ @include prefixer(transition-delay, $full, webkit, moz, ms, o);
+}
+
View
3  _sass/bourbon/css3/_user-select.scss
@@ -0,0 +1,3 @@
+@mixin user-select($arg: none) {
+ @include prefixer(user-select, $arg, webkit, moz, ms);
+}
View
44 _sass/bourbon/functions/_deprecated-webkit-gradient.scss
@@ -0,0 +1,44 @@
+// Render Deprecated Webkit Gradient - Linear || Radial
+//************************************************************************//
+@function deprecated-webkit-gradient($type,
+ $deprecated-pos1, $deprecated-pos2,
+ $full,
+ $deprecated-radius1: false, $deprecated-radius2: false) {
+ $gradient-list: ();
+ $gradient: false;
+ $full-length: length($full);
+ $percentage: false;
+ $gradient-type: $type;
+
+ @for $i from 1 through $full-length {
+ $gradient: nth($full, $i);
+
+ @if length($gradient) == 2 {
+ $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
+ $gradient-list: join($gradient-list, $color-stop, comma);
+ }
+
+ @else {
+ @if $i == $full-length {
+ $percentage: 100%;
+ }
+
+ @else {
+ $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
+ }
+
+ $color-stop: color-stop(unquote($percentage), $gradient);
+ $gradient-list: join($gradient-list, $color-stop, comma);
+ }
+ }
+
+ @if $type == radial {
+ $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
+ }
+
+ @else if $type == linear {
+ $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
+ }
+
+ @return $gradient;
+}
View
35 _sass/bourbon/functions/_flex-grid.scss
@@ -0,0 +1,35 @@
+// Flexible grid
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+ $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+ @return percentage($width / $container-width);
+}
+
+// Flexible gutter
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+ @return percentage($gutter / $container-width);
+}
+
+// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
+// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
+//
+// $fg-column: 60px; // Column Width
+// $fg-gutter: 25px; // Gutter Width
+// $fg-max-columns: 12; // Total Columns For Main Container
+//
+// div {
+// width: flex-grid(4); // returns (315px / 1020px) = 30.882353%;
+// margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
+//
+// p {
+// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
+// float: left;
+// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
+// }
+//
+// blockquote {
+// float: left;
+// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
+// }
+// }
View
13 _sass/bourbon/functions/_grid-width.scss
@@ -0,0 +1,13 @@
+@function grid-width($n) {
+ @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
+
+// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
+//
+// $gw-column: 100px; // Column Width
+// $gw-gutter: 40px; // Gutter Width
+//
+// div {
+// width: grid-width(4); // returns 520px;
+// margin-left: $gw-gutter; // returns 40px;
+// }
View
23 _sass/bourbon/functions/_linear-gradient.scss
@@ -0,0 +1,23 @@
+@function linear-gradient($pos: top, $G1: false, $G2: false,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false,
+ $G9: false, $G10: false) {
+
+ // Detect what type of value exists in $pos
+ $pos-type: type-of(nth($pos, 1));
+
+ // If $pos is missing from mixin, reassign vars and add default position
+ @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
+ $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+ $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+ $pos: top; // Default position
+ }
+
+ $type: linear;
+ $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+ $type-gradient: append($type, $gradient, comma);
+
+ @return $type-gradient;
+}
+
View
40 _sass/bourbon/functions/_modular-scale.scss
@@ -0,0 +1,40 @@
+@function modular-scale($value, $increment, $ratio) {
+ @if $increment > 0 {
+ @for $i from 1 through $increment {
+ $value: ($value * $ratio);
+ }
+ }
+
+ @if $increment < 0 {
+ $increment: abs($increment);
+ @for $i from 1 through $increment {
+ $value: ($value / $ratio);
+ }
+ }
+
+ @return $value;
+}
+
+// div {
+// Increment Up GR with positive value
+// font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
+//
+// Increment Down GR with negative value
+// font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
+//
+// Can be used with ceil(round up) or floor(round down)
+// font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
+// font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
+// }
+//
+// modularscale.com
+
+@function golden-ratio($value, $increment) {
+ @return modular-scale($value, $increment, 1.618)
+}
+
+// div {
+// font-size: golden-ratio(14px, 1); // returns: 22.652px
+// }
+//
+// goldenratiocalculator.com
View
62 _sass/bourbon/functions/_radial-gradient.scss
@@ -0,0 +1,62 @@
+// This function is required and used by the background-image mixin.
+@function radial-gradient($G1, $G2,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false,
+ $G9: false, $G10: false,
+ $pos: 50% 50%,
+ $shape-size: ellipse cover,
+ $deprecated-pos1: center center,
+ $deprecated-pos2: center center,
+ $deprecated-radius1: 0,
+ $deprecated-radius2: 50,
+ $fallback: false) {
+
+ @each $value in $G1, $G2 {
+ $first-val: nth($value, 1);
+ $pos-type: type-of($first-val);
+
+ @if ($pos-type != color) or ($first-val != "transparent") {
+ @if ($pos-type == number)
+ or ($first-val == "center")
+ or ($first-val == "top")
+ or ($first-val == "right")
+ or ($first-val == "bottom")
+ or ($first-val == "left") {
+
+ $pos: $value;
+
+ @if $pos == $G1 {
+ $G1: false;
+ }
+ }
+
+ @else if
+ ($first-val == "ellipse")
+ or ($first-val == "circle")
+ or ($first-val == "closest-side")
+ or ($first-val == "closest-corner")
+ or ($first-val == "farthest-side")
+ or ($first-val == "farthest-corner")
+ or ($first-val == "contain")
+ or ($first-val == "cover") {
+
+ $shape-size: $value;
+
+ @if $value == $G1 {
+ $G1: false;
+ }
+
+ @else if $value == $G2 {
+ $G2: false;
+ }
+ }
+ }
+ }
+
+ $type: radial;
+ $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+ $type-gradient: append($type, $gradient, comma);
+
+ @return $type-gradient;
+}
View
14 _sass/bourbon/functions/_render-gradients.scss
@@ -0,0 +1,14 @@
+// User for linear and radial gradients within background-image or border-image properties
+
+@function render-gradients($gradients, $gradient-type, $vendor: false) {
+ $vendor-gradients: false;
+ @if $vendor {
+ $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
+ }
+
+ @else if $vendor == false {
+ $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
+ $vendor-gradients: unquote($vendor-gradients);
+ }
+ @return $vendor-gradients;
+}
View
9 _sass/bourbon/functions/_tint-shade.scss
@@ -0,0 +1,9 @@
+// Add percentage of white to a color
+@function tint($color, $percent){
+ @return mix(white, $color, $percent);
+}
+
+// Add percentage of black to a color
+@function shade($color, $percent){
+ @return mix(black, $color, $percent);
+}
View
22 _sass/bourbon/functions/_transition-property-name.scss
@@ -0,0 +1,22 @@
+// Return vendor-prefixed property names if appropriate
+// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
+//************************************************************************//
+@function transition-property-names($props, $vendor: false) {
+ $new-props: ();
+
+ @each $prop in $props {
+ $new-props: append($new-props, transition-property-name($prop, $vendor), comma);
+ }
+
+ @return $new-props;
+}
+
+@function transition-property-name($prop, $vendor: false) {
+ // put other properties that need to be prefixed here aswell
+ @if $vendor and $prop == transform {
+ @return unquote('-'+$vendor+'-'+$prop);
+ }
+ @else {
+ @return $prop;
+ }
+}
View
19 _sass/bourbon/lib/bourbon.rb
@@ -0,0 +1,19 @@
+require "bourbon/generator"
+
+module Bourbon
+ if defined?(Rails) && defined?(Rails::Engine)
+ class Engine < ::Rails::Engine
+ require 'bourbon/engine'
+ end
+
+ module Rails
+ class Railtie < ::Rails::Railtie
+ rake_tasks do
+ load "tasks/install.rake"
+ end
+ end
+ end
+ end
+end
+
+require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions")
View
6 _sass/bourbon/lib/bourbon/sass_extensions.rb
@@ -0,0 +1,6 @@
+module Bourbon::SassExtensions
+end
+
+require "sass"
+
+require File.join(File.dirname(__FILE__), "/sass_extensions/functions")
View
13 _sass/bourbon/lib/bourbon/sass_extensions/functions.rb
@@ -0,0 +1,13 @@
+module Bourbon::SassExtensions::Functions
+end
+
+require File.join(File.dirname(__FILE__), "/functions/compact")
+
+module Sass::Script::Functions
+ include Bourbon::SassExtensions::Functions::Compact
+end
+
+# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
+class Sass::Script::Functions::EvaluationContext
+ include Sass::Script::Functions
+end
View
14 _sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
@@ -0,0 +1,14 @@
+# Compact function pulled from compass
+module Bourbon::SassExtensions::Functions::Compact
+
+ def compact(*args)
+ sep = :comma
+ if args.size == 1 && args.first.is_a?(Sass::Script::List)
+ list = args.first
+ args = list.value
+ sep = list.separator
+ end
+ Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
+ end
+
+end
View
48 _sass/desktop.scss
@@ -0,0 +1,48 @@
+@import "bourbon/bourbon";
+@import "variables";
+@import "../neat";
+
+header {
+ div.header-content {
+ @include outer-container;
+
+ div.logo {
+ @include span-columns(6);
+ padding: golden-ratio(1em, 2);
+ h1 {
+ @media(min-width: 64em) {
+ font-size: golden-ratio(1em, 3);
+ }
+ }
+ }
+ }
+}
+
+section.description {
+ @include outer-container;
+
+ div {
+ @include span-columns(6);
+ padding: 2em 1.5em;
+ @media(min-width: 74em) {
+ padding: 2em 0;
+ }
+
+ &#developers {
+ border-bottom: 0;
+ }
+ }
+}
+
+section.instructions {
+ @include outer-container;
+
+ aside {
+ @include span-columns(3, 12, table);
+ }
+
+ article {
+ @include span-columns(9, 12, table);
+ padding: 1.5em;
+ }
+}
View
80 _sass/mobile.scss
@@ -0,0 +1,80 @@
+@import "bourbon/bourbon";
+@import "variables";
+@import "../neat";
+@import "reset";
+
+header {
+ background-color: #6DBCE6;
+
+ div.header-content {
+ div.logo {
+ padding: golden-ratio(1em, 1);
+ color: darken(#6DBCE6, 20%);
+ background-color: rgba(255,255,255, 0.5);
+ text-align: left;
+
+ div#name {
+ display: inline-block;
+ margin-left: 0.5em;
+
+ h1 {
+ font-size: golden-ratio(1em, 3);
+ line-height: 1.1em;
+ text-transform: uppercase;
+ }
+
+ h2 {
+ color: darken(#6DBCE6, 30%);
+ font-family: "Helvetica Neue";
+ font-weight: 100;
+ font-size: golden-ratio(1em, 2);
+ padding-left: 0.1em;
+ }
+ }
+ }
+ }
+}
+
+section.description {
+ border-bottom: 1px solid #eee;
+
+ div {
+ padding: 2em;
+ color: #555;
+
+ &#developers {
+ border-bottom: 1px solid #eee;
+ }
+
+ h2 {
+ color: #555;
+ margin-bottom: 0.5em;
+ }
+ p {
+ line-height: $body-line-height;
+ }
+ }
+}
+
+section.instructions {
+ &#getting-started {
+ border-top: 1px solid #eee;
+ margin-top: 1em;
+ }
+
+ aside {
+ background-color: #eee;
+ padding: 1em;
+
+ h3 {
+ font-family: 'Helvetica Neue', 'helvetica', sans-serif;
+ font-weight: 200;
+ color: #888;
+ }
+ }
+
+ article {
+ padding: 1em;
+ color: #555;
+ }
+}
View
28 images/logo.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="95px" height="95px" viewBox="0 0 95 95" enable-background="new 0 0 95 95" xml:space="preserve">
+<g>
+ <path fill="none" stroke="#0071BC" stroke-miterlimit="10" stroke-dasharray="2.4171" d="M17.5,52v11.021
+ c0,1.328,1.478,3.479,2.806,3.479h21.569c2.625,0,3.625-2.15,3.625-3.479V52"/>
+</g>
+<g>
+ <path fill="none" stroke="#0071BC" stroke-miterlimit="10" stroke-dasharray="2.4171" d="M50.5,52v11.021
+ c0,1.33,1.109,3.479,2.438,3.479l20.938,0.25c3.375,0,3.625-2.4,3.625-3.729V52"/>
+</g>
+<g>
+ <path fill="none" stroke="#0071BC" stroke-miterlimit="10" d="M77.5,52V40.056c0-1.329-0.002-3.556-2.957-3.556H52.938
+ c-2.524,0-2.438,2.227-2.438,3.556V52"/>
+</g>
+<g>
+ <path fill="none" stroke="#0071BC" stroke-miterlimit="10" d="M45.5,52V40.056c0-1.329-0.436-3.556-3.392-3.556H20.503
+ c-2.524,0-3.003,2.227-3.003,3.556V52"/>
+</g>
+<line fill="none" stroke="#0071BC" stroke-miterlimit="10" x1="3" y1="52.5" x2="93" y2="52.5"/>
+<rect x="6" y="52" opacity="0.3" fill="#FFFFFF" enable-background="new " width="85" height="39"/>
+<g>
+ <path fill="none" stroke="#338FCF" stroke-width="4" stroke-miterlimit="10" d="M91,5v80.525C91,89.368,88.131,93,84.288,93H11.025
+ C7.182,93,4,89.368,4,85.525V5"/>
+</g>
+</svg>
View
64 index.html
@@ -0,0 +1,64 @@
+---
+layout: default
+---
+
+<section class="description">
+<div id="developers">
+ <h2>For Developers</h2>
+ <p>
+ A decisive and simple fluid grid framework that gets you up and running in minutes, minus the headaches.
+ </p>
+</div>
+
+<div id="designers">
+ <h2>For Designers</h2>
+ <p>
+ A boilerlate fluid grid framework that comes with few handy SASS mixins and a ton of flexibility.
+ </p>
+</div>
+</section>
+
+<section class="instructions" id="setup">
+<aside>
+<h3>The Framework</h3>
+</aside>
+
+<article>
+<p>Neat is an open source fluid grid framework on top of http://thoughtbot.com/bourbon. The grid and typography are built using ems and percentages based off of the golden ratio so that it can remain easily scalable and produces visually appealing results. Neat uses all mixins for its grid to encourage semantic and meaningful classes.</p>
+<h3>Why is Neat not fully responsive?</h3>
+<p>We believe that a fully responsive framework would depend on Sass 3.2</p>
+</article>
+</section>
+
+<section class="instructions" id="getting-started">
+<aside>
+<h3>Getting Started</h3>
+</aside>
+
+<article>
+Site container:
+
+<pre>
+<code>
+@include outer-container;
+</code>
+</pre>
+Column span:
+<pre>
+<code>
+@include span-column(columns, container, display type)
+</code>
+</pre>
+<ul><li>
+ columns – the amount of columns you wish this element to span
+ </li>
+ <li>
+ container – the number of columns the container spans, defaults to full width
+ </li>
+ <li>
+ display type – change the way that you layout objects, use block, the default, for floated layout, table for table-cell layout, and inline-block for inline block layout
+</li></ul>
+</article>
+</section>
+
+<footer></footer>
Please sign in to comment.
Something went wrong with that request. Please try again.