Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Update for version 1.1

Added new functions and shifted content around to make life easier!
  • Loading branch information...
commit ab83ddd63ef1bad051d9cfbce75042aad011385a 1 parent cfc41dd
@atomicpages authored
View
25 compass/config.rb
@@ -0,0 +1,25 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "scss"
+images_dir = "images"
+javascripts_dir = "scripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+output_style = :expanded
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
View
45 compass/sass/_functions.sass
@@ -1,18 +1,9 @@
-// GLOBAL VARIABLES
-$width: 960px
-
-// base grid
-
-// ----------- change values at your own risk
-$tabletWidth: 768px
-
-// tablet width
-$mobilePortraitWidth: 300px
-
-// mobile portrait
-$mobileLandscapeWidth: 420px
+// SASS Transcription of Skeleton Framework
+// @license MIT <http://www.opensource.org/licenses/mit-license.php>
+// @author Dennis Thompson <http://www.atomicpages.net/>
+// @copyright Copyright 2013, Dennis Thompson
-// mobile landscape
+// Add custom functions here
// Function that takes in an int and converts it to the English word up to twenty
// edit the function to suit your needs.
@@ -65,3 +56,29 @@ $mobileLandscapeWidth: 420px
@else if $int == 20
$res: "twenty"
@return $res
+
+// addresses https://github.com/nex3/sass/issues/533
+@function strip-units($number)
+ @return $number / ($number * 0 + 1)
+
+// getters for grid variables
+@function getWidth()
+ @return $width
+
+// @returns number
+@function getCols()
+ @return $columns
+
+// @returns number
+@function getColWidth()
+ @return $columnWidth
+
+// @returns number
+@function getGutterWidth()
+ @return $gutterWidth
+
+// @returns number
+@function getFixed()
+ @return $fixed
+
+// @returns bool
View
33 compass/sass/_mixins.sass
@@ -1,6 +1,39 @@
+// DEPENDENCIES
+@import functions
+
+// import _functions
+
+// SASS Transcription of Skeleton Framework
+// @license MIT <http://www.opensource.org/licenses/mit-license.php>
+// @author Dennis Thompson <http://www.atomicpages.net/>
+// @copyright Copyright 2013, Dennis Thompson
+
+// This file is meant for all of your custom mixins.
+
// ---- MIXINS ----
=linkStyle($color, $decoration: underline)
color: $color
text-decoration: $decoration
&:hover
text-decoration: none
+
+// TODO: Allow for fluid grids
+=makeGrid($width: getWidth(), $column_width: getColWidth(), $gutter_width: getGutterWidth(), $columns: getCols(), $fixed: getFixed())
+ @for $i from 1 through $columns
+ @if $i == 1
+ .container .one.column,
+ .container .one.columns
+ width: $column_width
+ @else
+ // a_n = 40 + (60 (n - 1))
+ .container .#{getWordFromNum($i)}.columns
+ width: $column_width + ($column_width + $gutter_width) * ($i - 1)
+ .container .one-third.column
+ width: round($width * 1 / 3) - $gutter_width
+ .container .two-thirds.column
+ width: round($width * 2 / 3) - $gutter_width
+ /* Offsets
+ @for $i from 1 through $columns
+ @if $i < $columns
+ .container .offset-by-#{getWordFromNum($i)}
+ width: ($column_width + $gutter_width) * $i
View
48 compass/sass/_vars.sass
@@ -1,13 +1,45 @@
+// SASS Transcription of Skeleton Framework
+// @license MIT <http://www.opensource.org/licenses/mit-license.php>
+// @author Dennis Thompson <http://www.atomicpages.net/>
+// @copyright Copyright 2013, Dennis Thompson
+
+// This file is meant for all of your variables. Feel free to add your own!
+
// ---- VARIABLES ----
-// backgrounds
-$backgroundColor: white
+// grid vars
+$width: 960px
+
+// base grid
+
+// background vars
+$backgroundColor: white !default
-// font styles
+// font vars
$fontSize: 14px
-$fontFamily: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
-$formFontFamily: $fontFamily
+$fontFamily: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !default
+$fontColor: #444444 !default
+
+// form vars
+$formFont: $fontFamily !default
+
+// link vars
+$linkColor: #333333 !default
+$linkHoverColor: black !default
+$linkDecoration: underline !default
+
+// heading vars
+$headingFamily: "Georgia", "Times New Roman", serif !default
+$headingColor: #181818 !default
+
+// grid vars continued
+// ----------- change values at your own risk
+$columnWidth: 40px
+$gutterWidth: 20px
+$columns: 16
+$fixed: false
-// heading styles
-$headingFamily: "Georgia", "Times New Roman", serif
-$headingColor: #181818
+// media query dimensions
+$tabletWidth: 768px !default
+$mobilePortraitWidth: 300px !default
+$mobileLandscapeWidth: 420px !default
View
71 compass/sass/base.sass
@@ -1,3 +1,8 @@
+// SASS Transcription of Skeleton Framework
+// @license MIT <http://www.opensource.org/licenses/mit-license.php>
+// @author Dennis Thompson <http://www.atomicpages.net/>
+// @copyright Copyright 2013, Dennis Thompson
+
/*
** Skeleton V1.2
** Copyright 2011, Dave Gamache
@@ -6,15 +11,14 @@
** http://www.opensource.org/licenses/mit-license.php
** 6/20/2012
-// SASS Transcription of Skeleton Framework
-// @license MIT <http://www.opensource.org/licenses/mit-license.php>
-// @author Dennis Thompson <http://www.atomicpages.net/>
-
// IMPORTS
@import compass/css3
@import vars
-// import _global_variables.scss
+// import _vars
+@import mixins
+
+// import _mixins
/* Table of Contents
*==================================================
@@ -31,7 +35,7 @@
/* # Reset & Basics (Inspired by E. Meyers)
*==================================================
-// Keep as is because we want this placement in file
+// Because it differs from compass reset
html, body, div, span, applet, object, iframe, h1, h2,
h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
@@ -77,9 +81,13 @@ table
*==================================================
body
background: $backgroundColor
- font: $fontSize $fontFamily
+ font:
+ size: $fontSize
+ family: $fontFamily
+ weight: normal
+ style: normal
line-height: $fontSize * 1.5
- color: #444
+ color: $fontColor
-webkit-font-smoothing: antialiased
/* Fix for webkit rendering
-webkit-text-size-adjust: 100%
@@ -88,8 +96,9 @@ body
*==================================================
h1, h2, h3, h4, h5, h6
color: $headingColor
- font-family: $headingFamily
- font-weight: normal
+ font:
+ family: $headingFamily
+ weight: normal
h1, h2, h3,
h4, h5, h6
@@ -182,19 +191,21 @@ hr
/* #Links
*==================================================
a, a:visited
- color: #333
- text-decoration: underline
+ color: $linkColor
+ text-decoration: $linkDecoration
outline: 0
a:hover, a:focus, a:active
- color: #000
+ color: $linkHoverColor
p a, p a:visited
line-height: inherit
/* #Lists
*==================================================
-ul, ol
+
+ul,
+ol
margin-bottom: 20px
ul
@@ -203,7 +214,10 @@ ul
ol
list-style: decimal
-ol, ul.square, ul.circle, ul.disc
+ol,
+ul.square,
+ul.circle,
+ul.disc
margin-left: 30px
ul.square
@@ -215,12 +229,21 @@ ul.circle
ul.disc
list-style: disc outside
-ul ul, ul ol, ol ol, ol ul
- margin: 4px 0 5px 30px
+ul ul,
+ul ol,
+ol ol,
+ol ul
+ margin:
+ top: 4px
+ right: 0
+ bottom: 5px
+ left: 30px
font-size: 90%
-ul ul li, ul ol li,
-ol ol li, ol ul li
+ul ul li,
+ul ol li,
+ol ol li,
+ol ul li
margin-bottom: 6px
li
@@ -258,7 +281,7 @@ input[type="button"]
font:
size: $fontSize - 1
weight: bold
- family: $fontFamily
+ family: $formFont
text-decoration: none
+text-shadow(0 1px rgba(255, 255, 255, 0.75))
cursor: pointer
@@ -317,7 +340,7 @@ select
+border-radius(2px)
font:
size: $fontSize + 1
- family: $fontFamily
+ family: $formFont
color: #777
margin: 0 0 20px
width: 210px
@@ -359,6 +382,9 @@ legend span
/* #Misc
*==================================================
+.subtract-bottom
+ margin-bottom: -20px !important
+
.remove-bottom
margin-bottom: 0 !important
@@ -367,6 +393,3 @@ legend span
.add-bottom
margin-bottom: 20px !important
-
-.subtract-bottom
- margin-bottom: -20px !important
View
21 compass/sass/layout.sass
@@ -1,3 +1,8 @@
+// SASS Transcription of Skeleton Framework
+// @license MIT <http://www.opensource.org/licenses/mit-license.php>
+// @author Dennis Thompson <http://www.atomicpages.net/>
+// @copyright Copyright 2013, Dennis Thompson
+
/*
** Skeleton V1.2
** Copyright 2012, Dave Gamache
@@ -14,9 +19,6 @@
* #Font-Face
// IMPORTS
-@import functions
-
-// import _functions.scss
@import vars
// import _global_variables.scss
@@ -26,25 +28,34 @@
/* #Site Styles
*==================================================
+/* Add site styles here such as a { color: $linkColor; }
/* #Page Styles
*==================================================
+/* Add page styles here such as .home { background: $homeBg; }
/* #Media Queries
*==================================================
+/* Otherwise known as custom responsive code! Write it here!
@media only screen and (min-width: $width) and (max-width: 1280px)
+ /* add code here
-/* Smaller than standard #{$width} (devices and browsers)
+/* Smaller than standard #{strip-units($width)} (devices and browsers)
@media only screen and (max-width: $width - 1)
+ /* add code here
-/* Tablet Portrait size to standard #{$width} (devices and browsers)
+/* Tablet Portrait size to standard #{strip-units($width)} (devices and browsers)
@media only screen and (min-width: $tabletWidth) and (max-width: $width - 1)
+ /* add code here
/* All Mobile Sizes (devices and browser)
@media only screen and (max-width: $tabletWidth - 1)
+ /* add code here
/* Mobile Landscape Size to Tablet Portrait (devices and browsers)
@media only screen and (min-width: 480px) and (max-width: $tabletWidth - 1)
+ /* add code here
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
@media only screen and (max-width: 479px)
+ /* add code here
View
56 compass/sass/skeleton.sass
@@ -1,3 +1,8 @@
+// SASS Transcription of Skeleton Framework
+// @license MIT <http://www.opensource.org/licenses/mit-license.php>
+// @author Dennis Thompson <http://www.atomicpages.net/>
+// @copyright Copyright 2013, Dennis Thompson
+
/*
** Skeleton V1.2
** Copyright 2011, Dave Gamache
@@ -6,46 +11,23 @@
** http://www.opensource.org/licenses/mit-license.php
** 6/20/2012
+// IMPORTS
+@import vars
+
+// import _vars
+@import mixins
+
+// import _mixins
+
/* Table of Contents
*==================================================
- * #Base 960 Grid
+ * #Base #{strip-units($width)} Grid
* #Tablet (Portrait)
* #Mobile (Portrait)
* #Mobile (Landscape)
* #Clearing
-// SASS Transcription of Skeleton Framework
-// @license MIT <http://www.opensource.org/licenses/mit-license.php>
-// @author Dennis Thompson <http://www.atomicpages.net/>
-// @copyright Copyright 2013, Dennis Thompson
-
-// IMPORTS
-@import functions
-
-// import _functions.scss
-
-// TODO: Allow for fluid grids
-=makeGrid($width: 960px, $column_width: 40px, $gutter_width: 20px, $columns: 16, $fixed: false)
- @for $i from 1 through $columns
- @if $i == 1
- .container .one.column,
- .container .one.columns
- width: $column_width
- @else
- // a_n = 40 + (60 (n - 1))
- .container .#{getWordFromNum($i)}.columns
- width: $column_width + ($column_width + $gutter_width) * ($i - 1)
- .container .one-third.column
- width: round($width * 1 / 3) - $gutter_width
- .container .two-thirds.column
- width: round($width * 2 / 3) - $gutter_width
- /* Offsets
- @for $i from 1 through $columns
- @if $i < $columns
- .container .offset-by-#{getWordFromNum($i)}
- width: ($column_width + $gutter_width) * $i
-
-/* #Base #{$width} Grid
+/* #Base #{strip-units($width)} Grid
*==================================================
.container
position: relative
@@ -73,7 +55,7 @@
/* #Tablet (Portrait)
*==================================================
-/* Note: Design for a width of #{unitless($tabletWidth)}
+/* Note: Design for a width of #{strip-units($tabletWidth)}
@media only screen and (min-width: $tabletWidth) and (max-width: $width - 1)
.container
width: $tabletWidth
@@ -97,7 +79,7 @@
/* #Mobile (Portrait)
*==================================================
-/* Note: Design for a width of #{unitless($mobilePortraitWidth)}
+/* Note: Design for a width of #{strip-units($mobilePortraitWidth)}
@media only screen and (max-width: $tabletWidth - 1)
.container
width: $mobilePortraitWidth
@@ -144,7 +126,7 @@
/* #Mobile (Landscape)
*==================================================
-/* Note: Design for a width of #{unitless($mobileLandscapeWidth)}
+/* Note: Design for a width of #{strip-units($mobileLandscapeWidth)}
@media only screen and (min-width: 480px) and (max-width: $tabletWidth - 1)
.container
width: $mobileLandscapeWidth
@@ -189,7 +171,7 @@
.clearfix
zoom: 1
&:after, &:before
- content: '\0020'
+ content: "\0020"
display: block
overflow: hidden
visibility: hidden
View
89 compass/scss/_functions.scss
@@ -1,39 +1,50 @@
-// GLOBAL VARIABLES
-$width: 960px; // base grid
-
-// ----------- change values at your own risk
-$tabletWidth: 768px; // tablet width
-$mobilePortraitWidth: 300px; // mobile portrait
-$mobileLandscapeWidth: 420px; // mobile landscape
-
-// Function that takes in an int and converts it to the English word up to twenty
-// edit the function to suit your needs.
-// @author Dennis Thompson <http://www.atomicpages.net/>
-// @copyright AtomicPages LLC 2013. All Rights Reserved.
-// @license MIT <http://opensource.org/licenses/MIT>
-// @param int $int
-@function getWordFromNum($int) {
- $int: abs($int); // if it is negative, let's make it positive
- $res: '';
- @if $int == 1 { $res: 'one';
- } @else if $int == 2 { $res: 'two';
- } @else if $int == 3 { $res: 'three';
- } @else if $int == 4 { $res: 'four';
- } @else if $int == 5 { $res: 'five'
- } @else if $int == 6 { $res: 'six'
- } @else if $int == 7 { $res: 'seven'
- } @else if $int == 8 { $res: 'eight'
- } @else if $int == 9 { $res: 'nine'
- } @else if $int == 10 { $res: 'ten'
- } @else if $int == 11 { $res: 'eleven'
- } @else if $int == 12 { $res: 'twelve'
- } @else if $int == 13 { $res: 'thirteen'
- } @else if $int == 14 { $res: 'fourteen'
- } @else if $int == 15 { $res: 'fifteen'
- } @else if $int == 16 { $res: 'sixteen'
- } @else if $int == 17 { $res: 'seventeen'
- } @else if $int == 18 { $res: 'eighteen'
- } @else if $int == 19 { $res: 'nineteen'
- } @else if $int == 20 { $res: 'twenty'
- } @return $res;
-}
+// SASS Transcription of Skeleton Framework
+// @license MIT <http://www.opensource.org/licenses/mit-license.php>
+// @author Dennis Thompson <http://www.atomicpages.net/>
+// @copyright Copyright 2013, Dennis Thompson
+
+// Add custom functions here
+
+// Function that takes in an int and converts it to the English word up to twenty
+// edit the function to suit your needs.
+// @author Dennis Thompson <http://www.atomicpages.net/>
+// @copyright AtomicPages LLC 2013. All Rights Reserved.
+// @license MIT <http://opensource.org/licenses/MIT>
+// @param int $int
+@function getWordFromNum($int) {
+ $int: abs($int); // if it is negative, let's make it positive
+ $res: '';
+ @if $int == 1 { $res: 'one';
+ } @else if $int == 2 { $res: 'two';
+ } @else if $int == 3 { $res: 'three';
+ } @else if $int == 4 { $res: 'four';
+ } @else if $int == 5 { $res: 'five'
+ } @else if $int == 6 { $res: 'six'
+ } @else if $int == 7 { $res: 'seven'
+ } @else if $int == 8 { $res: 'eight'
+ } @else if $int == 9 { $res: 'nine'
+ } @else if $int == 10 { $res: 'ten'
+ } @else if $int == 11 { $res: 'eleven'
+ } @else if $int == 12 { $res: 'twelve'
+ } @else if $int == 13 { $res: 'thirteen'
+ } @else if $int == 14 { $res: 'fourteen'
+ } @else if $int == 15 { $res: 'fifteen'
+ } @else if $int == 16 { $res: 'sixteen'
+ } @else if $int == 17 { $res: 'seventeen'
+ } @else if $int == 18 { $res: 'eighteen'
+ } @else if $int == 19 { $res: 'nineteen'
+ } @else if $int == 20 { $res: 'twenty'
+ } @return $res;
+}
+
+// addresses https://github.com/nex3/sass/issues/533
+ @function strip-units($number) {
+ @return $number / ($number * 0 + 1);
+}
+
+// getters for grid variables
+@function getWidth() { @return $width; } // @returns number
+@function getCols() { @return $columns; } // @returns number
+@function getColWidth() { @return $columnWidth; } // @returns number
+@function getGutterWidth() { @return $gutterWidth; } // @returns number
+@function getFixed() { @return $fixed; } // @returns bool
View
32 compass/scss/_mixins.scss
@@ -1,6 +1,38 @@
+// DEPENDENCIES
+@import "functions"; // import _functions
+
+// SASS Transcription of Skeleton Framework
+// @license MIT <http://www.opensource.org/licenses/mit-license.php>
+// @author Dennis Thompson <http://www.atomicpages.net/>
+// @copyright Copyright 2013, Dennis Thompson
+
+// This file is meant for all of your custom mixins.
+
+
// ---- MIXINS ----
@mixin linkStyle($color, $decoration: underline) {
color: $color;
text-decoration: $decoration;
&:hover { text-decoration: none; }
+}
+
+// TODO: Allow for fluid grids
+@mixin makeGrid($width: getWidth(), $column_width: getColWidth(), $gutter_width: getGutterWidth(), $columns: getCols(), $fixed: getFixed()) {
+ @for $i from 1 through $columns {
+ @if $i == 1 {
+ .container .one.column,
+ .container .one.columns { width: $column_width; }
+ } @else {
+ // a_n = 40 + (60 (n - 1))
+ .container .#{getWordFromNum($i)}.columns { width: $column_width + (($column_width + $gutter_width) * ($i - 1)); }
+ }
+ }
+ .container .one-third.column { width: round($width * (1/3)) - $gutter_width ; }
+ .container .two-thirds.column { width: round($width * (2/3)) - $gutter_width; }
+ /* Offsets */
+ @for $i from 1 through $columns {
+ @if $i < $columns {
+ .container .offset-by-#{getWordFromNum($i)} { width: ($column_width + $gutter_width) * $i; }
+ }
+ }
}
View
46 compass/scss/_vars.scss
@@ -1,13 +1,43 @@
+// SASS Transcription of Skeleton Framework
+// @license MIT <http://www.opensource.org/licenses/mit-license.php>
+// @author Dennis Thompson <http://www.atomicpages.net/>
+// @copyright Copyright 2013, Dennis Thompson
+
+// This file is meant for all of your variables. Feel free to add your own!
+
// ---- VARIABLES ----
-// backgrounds
-$backgroundColor: #fff;
+// grid vars
+$width: 960px; // base grid
-// font styles
+// background vars
+$backgroundColor: #fff !default;
+
+// font vars
$fontSize: 14px;
-$fontFamily: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$formFontFamily: $fontFamily;
+$fontFamily: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$fontColor: #444 !default;
+
+// form vars
+$formFont: $fontFamily !default;
+
+// link vars
+$linkColor: #333 !default;
+$linkHoverColor: #000 !default;
+$linkDecoration: underline !default;
+
+// heading vars
+$headingFamily: "Georgia", "Times New Roman", serif !default;
+$headingColor: #181818 !default;
+
+// grid vars continued
+// ----------- change values at your own risk
+$columnWidth: 40px;
+$gutterWidth: 20px;
+$columns: 16;
+$fixed: false;
-// heading styles
-$headingFamily: "Georgia", "Times New Roman", serif;
-$headingColor: #181818;
+// media query dimensions
+$tabletWidth: 768px !default;
+$mobilePortraitWidth: 300px !default;
+$mobileLandscapeWidth: 420px !default;
View
691 compass/scss/base.scss
@@ -1,334 +1,357 @@
-/*
-* Skeleton V1.2
-* Copyright 2011, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 6/20/2012
-*/
-
-// SASS Transcription of Skeleton Framework
-// @license MIT <http://www.opensource.org/licenses/mit-license.php>
-// @author Dennis Thompson <http://www.atomicpages.net/>
-
-// IMPORTS
-@import "compass/css3";
-@import "vars"; // import _global_variables.scss
-
-/* Table of Contents
-==================================================
- # Reset & Basics
- # Basic Styles
- # Site Styles
- # Typography
- # Links
- # Lists
- # Images
- # Buttons
- # Forms
- # Misc */
-
-
-/* # Reset & Basics (Inspired by E. Meyers)
-================================================== */
-// Keep as is because we want this placement in file
-html, body, div, span, applet, object, iframe, h1, h2,
-h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
-address, big, cite, code, del, dfn, em, img, ins, kbd,
-q, s, samp, small, strike, strong, sub, sup, tt, var,
-b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,
-form, label, legend, table, caption, tbody, tfoot,
-thead, tr, th, td, article, aside, canvas, details,
-embed, figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary, time,
-mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
-}
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu,
-nav, section { display: block; }
-body { line-height: 1; }
-ol, ul { list-style: none; }
-blockquote, q {
- quotes: none;
- &:before,
- &:after {
- content: '';
- content: none;
- }
-}
-table {
- border: {
- collapse: collapse;
- spacing: 0;
- }
-}
-
-/* #Basic Styles
-================================================== */
-body {
- background: $backgroundColor;
- font: $fontSize $fontFamily;
- line-height: $fontSize * 1.5;
- color: #444;
- -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
- -webkit-text-size-adjust: 100%;
-}
-
-/* #Typography
-================================================== */
-h1, h2, h3, h4, h5, h6 {
- color: $headingColor;
- font-family: $headingFamily;
- font-weight: normal;
-}
-h1, h2, h3,
-h4, h5, h6 {
- a { font-weight: inherit; }
-}
-h1 {
- font-size: round($fontSize * 3.8333);
- line-height: round($fontSize * 4.1666);
- margin-bottom: round($fontSize * 1.1666);
-}
-h2 {
- font-size: round($fontSize * 2.9166);
- line-height: round($fontSize * 3.333);
- margin-bottom: round($fontSize * 0.833);
-}
-h3 {
- font-size: round($fontSize * 2.333);
- line-height: round($fontSize * 2.833);
- margin-bottom: round($fontSize * 0.666);
-}
-h4 {
- font-size: round($fontSize * 1.75);
- line-height: round($fontSize * 2.5);
- margin-bottom: round($fontSize * 0.333);
-}
-h5 {
- font-size: round($fontSize * 1.4166);
- line-height: $fontSize * 2;
-}
-h6 {
- font-size: round($fontSize * 1.1666);
- line-height: round($fontSize * 1.75);
-}
-.subheader { color: #777; }
-p {
- margin: 0 0 20px 0;
- img { margin: 0; }
- &.lead {
- font-size: round($fontSize * 1.75);
- line-height: round($fontSize * 2.25);
- color: #777;
- }
-}
-em, i { font-style: italic; }
-strong, b {
- font-weight: bold;
- color: #333;
-}
-u { text-decoration: underline; }
-small { font-size: 80%; }
-/* Blockquotes */
-blockquote, blockquote p {
- font-size: round($fontSize * 1.4166);
- line-height: $fontSize * 2;
- color: #777;
- font-style: italic;
-}
-blockquote {
- margin: 0 0 20px;
- padding: 9px 20px 0 19px;
- border-left: 1px solid #ddd;
-}
-blockquote cite {
- display: block;
- font-size: $fontSize;
- color: #555;
- &:before { content: "\2014 \0020"; }
- a, a:visited { color: #555; }
-}
-hr {
- border: {
- style: solid;
- color: #ddd;
- width: 1px 0 0;
- };
- clear: both;
- margin: 10px 0 30px;
- height: 0;
-}
-
-/* #Links
-================================================== */
-a, a:visited {
- color: #333;
- text-decoration: underline;
- outline: 0;
-}
-a:hover, a:focus, a:active { color: #000; }
-p a, p a:visited { line-height: inherit; }
-
-/* #Lists
-================================================== */
-ul, ol { margin-bottom: 20px; }
-ul { list-style: none outside; }
-ol { list-style: decimal; }
-ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
-ul.square { list-style: square outside; }
-ul.circle { list-style: circle outside; }
-ul.disc { list-style: disc outside; }
-ul ul, ul ol, ol ol, ol ul {
- margin: 4px 0 5px 30px;
- font-size: 90%;
-}
-ul ul li, ul ol li,
-ol ol li, ol ul li { margin-bottom: 6px; }
-li {
- line-height: 18px;
- margin-bottom: 12px;
-}
-ul.large li { line-height: 21px; }
-li p { line-height: 21px; }
-
-/* #Images
-================================================== */
-img.scale-with-grid {
- max-width: 100%;
- height: auto;
-}
-
-/* #Buttons
-================================================== */
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
- @include background(#eee linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.2) 100%));
- border: 1px solid #aaa;
- border: {
- top: 1px solid #ccc;
- left: 1px solid #ccc;
- };
- @include border-radius(3px);
- color: #444;
- display: inline-block;
- font: {
- size: $fontSize - 1;
- weight: bold;
- family: $fontFamily;
- };
- text-decoration: none;
- @include text-shadow(0 1px rgba(255, 255, 255, 0.75));
- cursor: pointer;
- line-height: normal;
- padding: 8px 10px;
- &:hover {
- color: #222;
- @include background(#ddd linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.3) 100%));
- border: 1px solid #888;
- border: {
- top: 1px solid #aaa;
- left: 1px solid #aaa;
- };
- }
- &:active {
- border: 1px solid #666;
- @include background(#ccc linear-gradient(top, rgba(255,255,255,0.35) 0%,rgba(10,10,10,0.4) 100%));
- }
- &.full-width {
- width: 100%;
- padding-left: 0 !important;
- padding-right: 0 !important;
- text-align: center;
- }
- &.smaller {
- font-size: $fontSize - 2;
- padding: 4px 5px;
- }
- &.larger {
- font-size: $fontSize + 2;
- padding: 10px 18px;
- }
-}
-
-/* Fix for odd Mozilla border & padding issues */
-button,
-input {
- &::-moz-focus-inner {
- border: 0;
- padding: 0;
- }
-}
-
-/* #Forms
-================================================== */
-form { margin-bottom: 20px; }
-fieldset { margin-bottom: 20px; }
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="search"],
-input[type="url"],
-input[type="tel"],
-textarea,
-select {
- background: #fff;
- border: 1px solid #ccc;
- padding: 6px 4px;
- outline: none;
- @include border-radius(2px);
- font: {
- size: $fontSize + 1;
- family: $fontFamily;
- };
- color: #777;
- margin: 0 0 20px;
- width: 210px;
- max-width: 100%;
- display: block;
- &:hover, &:focus {
- border: 1px solid #aaa;
- color: #444;
- @include box-shadow(0 0 3px rgba(0,0,0,0.2));
- }
- &:active {
- border: 1px solid darken(#aaa, 10%);
- @include box-shadow(0 0 3px rgba(0,0,0,0.3));
- }
-}
-select { padding: 0; }
-textarea { min-height: 60px; }
-label,
-legend {
- display: block;
- font: {
- size: $fontSize + 1;
- weight: bold;
- };
-}
-select { width: 220px; }
-input[type="checkbox"] { display: inline; }
-label span,
-legend span {
- font: {
- size: $fontSize + 1;
- weight: normal;
- };
- color: #444;
-}
-
-/* #Misc
-================================================== */
-.remove-bottom { margin-bottom: 0 !important; }
-.half-bottom { margin-bottom: 10px !important; }
-.add-bottom { margin-bottom: 20px !important; }
-.subtract-bottom { margin-bottom: -20px !important; }
+// SASS Transcription of Skeleton Framework
+// @license MIT <http://www.opensource.org/licenses/mit-license.php>
+// @author Dennis Thompson <http://www.atomicpages.net/>
+// @copyright Copyright 2013, Dennis Thompson
+
+/*
+* Skeleton V1.2
+* Copyright 2011, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 6/20/2012
+*/
+
+// IMPORTS
+@import "compass/css3";
+@import "vars"; // import _vars
+@import "mixins"; // import _mixins
+
+/* Table of Contents
+==================================================
+ # Reset & Basics
+ # Basic Styles
+ # Site Styles
+ # Typography
+ # Links
+ # Lists
+ # Images
+ # Buttons
+ # Forms
+ # Misc */
+
+
+/* # Reset & Basics (Inspired by E. Meyers)
+================================================== */
+// Because it differs from compass reset
+html, body, div, span, applet, object, iframe, h1, h2,
+h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
+address, big, cite, code, del, dfn, em, img, ins, kbd,
+q, s, samp, small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,
+form, label, legend, table, caption, tbody, tfoot,
+thead, tr, th, td, article, aside, canvas, details,
+embed, figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary, time,
+mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu,
+nav, section { display: block; }
+body { line-height: 1; }
+ol, ul { list-style: none; }
+blockquote, q {
+ quotes: none;
+ &:before,
+ &:after {
+ content: '';
+ content: none;
+ }
+}
+table {
+ border: {
+ collapse: collapse;
+ spacing: 0;
+ }
+}
+
+/* #Basic Styles
+================================================== */
+body {
+ background: $backgroundColor;
+ font: {
+ size: $fontSize;
+ family: $fontFamily;
+ weight: normal;
+ style: normal;
+ }
+ line-height: $fontSize * 1.5;
+ color: $fontColor;
+ -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
+ -webkit-text-size-adjust: 100%;
+}
+
+/* #Typography
+================================================== */
+h1, h2, h3, h4, h5, h6 {
+ color: $headingColor;
+ font: {
+ family: $headingFamily;
+ weight: normal;
+ }
+}
+h1, h2, h3,
+h4, h5, h6 {
+ a { font-weight: inherit; }
+}
+h1 {
+ font-size: round($fontSize * 3.8333);
+ line-height: round($fontSize * 4.1666);
+ margin-bottom: round($fontSize * 1.1666);
+}
+h2 {
+ font-size: round($fontSize * 2.9166);
+ line-height: round($fontSize * 3.333);
+ margin-bottom: round($fontSize * 0.833);
+}
+h3 {
+ font-size: round($fontSize * 2.333);
+ line-height: round($fontSize * 2.833);
+ margin-bottom: round($fontSize * 0.666);
+}
+h4 {
+ font-size: round($fontSize * 1.75);
+ line-height: round($fontSize * 2.5);
+ margin-bottom: round($fontSize * 0.333);
+}
+h5 {
+ font-size: round($fontSize * 1.4166);
+ line-height: $fontSize * 2;
+}
+h6 {
+ font-size: round($fontSize * 1.1666);
+ line-height: round($fontSize * 1.75);
+}
+.subheader { color: #777; }
+p {
+ margin: 0 0 20px 0;
+ img { margin: 0; }
+ &.lead {
+ font-size: round($fontSize * 1.75);
+ line-height: round($fontSize * 2.25);
+ color: #777;
+ }
+}
+em, i { font-style: italic; }
+strong, b {
+ font-weight: bold;
+ color: #333;
+}
+u { text-decoration: underline; }
+small { font-size: 80%; }
+/* Blockquotes */
+blockquote, blockquote p {
+ font-size: round($fontSize * 1.4166);
+ line-height: $fontSize * 2;
+ color: #777;
+ font-style: italic;
+}
+blockquote {
+ margin: 0 0 20px;
+ padding: 9px 20px 0 19px;
+ border-left: 1px solid #ddd;
+}
+blockquote cite {
+ display: block;
+ font-size: $fontSize;
+ color: #555;
+ &:before { content: "\2014 \0020"; }
+ a, a:visited { color: #555; }
+}
+hr {
+ border: {
+ style: solid;
+ color: #ddd;
+ width: 1px 0 0;
+ };
+ clear: both;
+ margin: 10px 0 30px;
+ height: 0;
+}
+
+/* #Links
+================================================== */
+a, a:visited {
+ color: $linkColor;
+ text-decoration: $linkDecoration;
+ outline: 0;
+}
+a:hover, a:focus, a:active { color: $linkHoverColor; }
+p a, p a:visited { line-height: inherit; }
+
+/* #Lists
+================================================== */
+ul,
+ol { margin-bottom: 20px; }
+ul { list-style: none outside; }
+ol { list-style: decimal; }
+ol,
+ul.square,
+ul.circle,
+ul.disc { margin-left: 30px; }
+ul.square { list-style: square outside; }
+ul.circle { list-style: circle outside; }
+ul.disc { list-style: disc outside; }
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+ margin: {
+ top: 4px;
+ right: 0;
+ bottom: 5px;
+ left: 30px;
+ }
+ font-size: 90%;
+}
+ul ul li,
+ul ol li,
+ol ol li,
+ol ul li { margin-bottom: 6px; }
+li {
+ line-height: 18px;
+ margin-bottom: 12px;
+}
+ul.large li { line-height: 21px; }
+li p { line-height: 21px; }
+
+/* #Images
+================================================== */
+img.scale-with-grid {
+ max-width: 100%;
+ height: auto;
+}
+
+/* #Buttons
+================================================== */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ @include background(#eee linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.2) 100%));
+ border: 1px solid #aaa;
+ border: {
+ top: 1px solid #ccc;
+ left: 1px solid #ccc;
+ };
+ @include border-radius(3px);
+ color: #444;
+ display: inline-block;
+ font: {
+ size: $fontSize - 1;
+ weight: bold;
+ family: $formFont;
+ };
+ text-decoration: none;
+ @include text-shadow(0 1px rgba(255, 255, 255, 0.75));
+ cursor: pointer;
+ line-height: normal;
+ padding: 8px 10px;
+ &:hover {
+ color: #222;
+ @include background(#ddd linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.3) 100%));
+ border: 1px solid #888;
+ border: {
+ top: 1px solid #aaa;
+ left: 1px solid #aaa;
+ };
+ }
+ &:active {
+ border: 1px solid #666;
+ @include background(#ccc linear-gradient(top, rgba(255,255,255,0.35) 0%,rgba(10,10,10,0.4) 100%));
+ }
+ &.full-width {
+ width: 100%;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ text-align: center;
+ }
+ &.smaller {
+ font-size: $fontSize - 2;
+ padding: 4px 5px;
+ }
+ &.larger {
+ font-size: $fontSize + 2;
+ padding: 10px 18px;
+ }
+}
+
+/* Fix for odd Mozilla border & padding issues */
+button,
+input {
+ &::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
+}
+
+/* #Forms
+================================================== */
+form { margin-bottom: 20px; }
+fieldset { margin-bottom: 20px; }
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="search"],
+input[type="url"],
+input[type="tel"],
+textarea,
+select {
+ background: #fff;
+ border: 1px solid #ccc;
+ padding: 6px 4px;
+ outline: none;
+ @include border-radius(2px);
+ font: {
+ size: $fontSize + 1;
+ family: $formFont;
+ };
+ color: #777;
+ margin: 0 0 20px;
+ width: 210px;
+ max-width: 100%;
+ display: block;
+ &:hover, &:focus {
+ border: 1px solid #aaa;
+ color: #444;
+ @include box-shadow(0 0 3px rgba(0,0,0,0.2));
+ }
+ &:active {
+ border: 1px solid darken(#aaa, 10%);
+ @include box-shadow(0 0 3px rgba(0,0,0,0.3));
+ }
+}
+select { padding: 0; }
+textarea { min-height: 60px; }
+label,
+legend {
+ display: block;
+ font: {
+ size: $fontSize + 1;
+ weight: bold;
+ };
+}
+select { width: 220px; }
+input[type="checkbox"] { display: inline; }
+label span,
+legend span {
+ font: {
+ size: $fontSize + 1;
+ weight: normal;
+ };
+ color: #444;
+}
+
+/* #Misc
+================================================== */
+.subtract-bottom { margin-bottom: -20px !important; }
+.remove-bottom { margin-bottom: 0 !important; }
+.half-bottom { margin-bottom: 10px !important; }
+.add-bottom { margin-bottom: 20px !important; }
View
119 compass/scss/layout.scss
@@ -1,57 +1,64 @@
-/*
-* Skeleton V1.2
-* Copyright 2012, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-*/
-
-/* Table of Content
-==================================================
- #Site Styles
- #Page Styles
- #SAMPLE CONTENT STYLES
- #Media Queries
- #Font-Face */
-
-// IMPORTS
-@import "functions"; // import _functions.scss
-@import "vars"; // import _global_variables.scss
-@import "mixins"; // import _mixins.scss
-
-/* #Site Styles
-================================================== */
-
-/* #Page Styles
-================================================== */
-
-/* #Media Queries
-================================================== */
-@media only screen and (min-width: $width) and (max-width: 1280px) {
-
-}
-
-/* Smaller than standard #{$width} (devices and browsers) */
-@media only screen and (max-width: $width - 1) {
-
-}
-
-/* Tablet Portrait size to standard #{$width} (devices and browsers) */
-@media only screen and (min-width: $tabletWidth) and (max-width: $width - 1) {
-
-}
-
-/* All Mobile Sizes (devices and browser) */
-@media only screen and (max-width: $tabletWidth - 1) {
-
-}
-
-/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
-@media only screen and (min-width: 480px) and (max-width: $tabletWidth - 1) {
-
-}
-
-/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
-@media only screen and (max-width: 479px) {
-
+// SASS Transcription of Skeleton Framework
+// @license MIT <http://www.opensource.org/licenses/mit-license.php>
+// @author Dennis Thompson <http://www.atomicpages.net/>
+// @copyright Copyright 2013, Dennis Thompson
+
+/*
+* Skeleton V1.2
+* Copyright 2012, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+*/
+
+/* Table of Content
+==================================================
+ #Site Styles
+ #Page Styles
+ #SAMPLE CONTENT STYLES
+ #Media Queries
+ #Font-Face */
+
+// IMPORTS
+@import "vars"; // import _global_variables.scss
+@import "mixins"; // import _mixins.scss
+
+/* #Site Styles
+================================================== */
+/* Add site styles here such as a { color: $linkColor; } */
+
+/* #Page Styles
+================================================== */
+/* Add page styles here such as .home { background: $homeBg; } */
+
+/* #Media Queries
+================================================== */
+/* Otherwise known as custom responsive code! Write it here! */
+@media only screen and (min-width: $width) and (max-width: 1280px) {
+ /* add code here */
+}
+
+/* Smaller than standard #{strip-units($width)} (devices and browsers) */
+@media only screen and (max-width: $width - 1) {
+ /* add code here */
+}
+
+/* Tablet Portrait size to standard #{strip-units($width)} (devices and browsers) */
+@media only screen and (min-width: $tabletWidth) and (max-width: $width - 1) {
+ /* add code here */
+}
+
+/* All Mobile Sizes (devices and browser) */
+@media only screen and (max-width: $tabletWidth - 1) {
+/* add code here */
+}
+
+/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
+@media only screen and (min-width: 480px) and (max-width: $tabletWidth - 1) {
+ /* add code here */
+}
+
+/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
+@media only screen and (max-width: 479px) {
+ /* add code here */
}
View
398 compass/scss/skeleton.scss
@@ -1,210 +1,190 @@
-/*
-* Skeleton V1.2
-* Copyright 2011, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 6/20/2012
-*/
-
-/* Table of Contents
-==================================================
- #Base 960 Grid
- #Tablet (Portrait)
- #Mobile (Portrait)
- #Mobile (Landscape)
- #Clearing */
-
-// SASS Transcription of Skeleton Framework
-// @license MIT <http://www.opensource.org/licenses/mit-license.php>
-// @author Dennis Thompson <http://www.atomicpages.net/>
-// @copyright Copyright 2013, Dennis Thompson
-
-// IMPORTS
-@import "functions"; // import _functions.scss
-
-// TODO: Allow for fluid grids
-@mixin makeGrid($width: 960px, $column_width: 40px, $gutter_width: 20px, $columns: 16, $fixed: false) {
- @for $i from 1 through $columns {
- @if $i == 1 {
- .container .one.column,
- .container .one.columns { width: $column_width; }
- } @else {
- // a_n = 40 + (60 (n - 1))
- .container .#{getWordFromNum($i)}.columns { width: $column_width + (($column_width + $gutter_width) * ($i - 1)); }
- }
- }
- .container .one-third.column { width: round($width * (1/3)) - $gutter_width ; }
- .container .two-thirds.column { width: round($width * (2/3)) - $gutter_width; }
- /* Offsets */
- @for $i from 1 through $columns {
- @if $i < $columns {
- .container .offset-by-#{getWordFromNum($i)} { width: ($column_width + $gutter_width) * $i; }
- }
- }
-}
-
-/* #Base #{$width} Grid
-================================================== */
-.container {
- position: relative;
- width: $width;
- margin: 0 auto;
- padding: 0;
- .column,
- .columns {
- float: left;
- display: inline;
- margin: {
- left: 10px;
- right:0px;
- };
- /* Nested Column Classes */
- &.alpha { margin-left: 0; }
- &.omega { margin-right: 0; }
- }
-}
-.row { margin-bottom: 20px; }
-/* Base Grid */
-@include makeGrid($width);
-
-/* #Tablet (Portrait)
-================================================== */
-/* Note: Design for a width of #{unitless($tabletWidth)} */
-@media only screen and (min-width: $tabletWidth) and (max-width: ($width - 1)) {
- .container {
- width: $tabletWidth;
- .column, .columns {
- margin: {
- left: 10px;
- right: 10px;
- };
- &.alpha {
- margin: {
- left: 0;
- right: 10px;
- };
- }
- &.omega {
- margin: {
- right: 0;
- left: 10px;
- };
- }
- }
- }
- .alpha.omega {
- margin: {
- left: 0;
- right: 0;
- };
- }
- @include makeGrid($tabletWidth, 28px);
-}
-
-/* #Mobile (Portrait)
-================================================== */
-/* Note: Design for a width of #{unitless($mobilePortraitWidth)} */
-@media only screen and (max-width: ($tabletWidth - 1)) {
- .container { width: $mobilePortraitWidth; }
- .container .columns,
- .container .column { margin: 0; }
- .container .one.column,
- .container .one.columns,
- .container .two.columns,
- .container .three.columns,
- .container .four.columns,
- .container .five.columns,
- .container .six.columns,
- .container .seven.columns,
- .container .eight.columns,
- .container .nine.columns,
- .container .ten.columns,
- .container .eleven.columns,
- .container .twelve.columns,
- .container .thirteen.columns,
- .container .fourteen.columns,
- .container .fifteen.columns,
- .container .sixteen.columns,
- .container .one-third.column,
- .container .two-thirds.column { width: $mobilePortraitWidth; }
- /* Offsets */
- .container .offset-by-one,
- .container .offset-by-two,
- .container .offset-by-three,
- .container .offset-by-four,
- .container .offset-by-five,
- .container .offset-by-six,
- .container .offset-by-seven,
- .container .offset-by-eight,
- .container .offset-by-nine,
- .container .offset-by-ten,
- .container .offset-by-eleven,
- .container .offset-by-twelve,
- .container .offset-by-thirteen,
- .container .offset-by-fourteen,
- .container .offset-by-fifteen { padding-left: 0; }
-}
-
-/* #Mobile (Landscape)
-================================================== */
-/* Note: Design for a width of #{unitless($mobileLandscapeWidth)} */
-@media only screen and (min-width: 480px) and (max-width: ($tabletWidth - 1)) {
- .container { width: $mobileLandscapeWidth; }
- .container .columns,
- .container .column { margin: 0; }
- .container .one.column,
- .container .one.columns,
- .container .two.columns,
- .container .three.columns,
- .container .four.columns,
- .container .five.columns,
- .container .six.columns,
- .container .seven.columns,
- .container .eight.columns,
- .container .nine.columns,
- .container .ten.columns,
- .container .eleven.columns,
- .container .twelve.columns,
- .container .thirteen.columns,
- .container .fourteen.columns,
- .container .fifteen.columns,
- .container .sixteen.columns,
- .container .one-third.column,
- .container .two-thirds.column { width: $mobileLandscapeWidth; }
-}
-
-/* #Clearing
-================================================== */
-/* Self Clearing Goodness */
-.container:after {
- content: "\0020";
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
-}
-/* Use clearfix class on parent to clear nested columns,
- or wrap each row of columns in a <div class="row"> */
-.row,
-.clearfix {
- zoom: 1;
- &:after, &:before {
- content: '\0020';
- display: block;
- overflow: hidden;
- visibility: hidden;
- width: 0;
- height: 0;
- }
- &:after { clear: both; }
-}
-/* You can also use a <br class="clear" /> to clear columns */
-.clear {
- clear: both;
- display: block;
- overflow: hidden;
- visibility: hidden;
- width: 0;
- height: 0;
+// SASS Transcription of Skeleton Framework
+// @license MIT <http://www.opensource.org/licenses/mit-license.php>
+// @author Dennis Thompson <http://www.atomicpages.net/>
+// @copyright Copyright 2013, Dennis Thompson
+
+/*
+* Skeleton V1.2
+* Copyright 2011, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 6/20/2012
+*/
+
+// IMPORTS
+@import "vars"; // import _vars
+@import "mixins"; // import _mixins
+
+/* Table of Contents
+==================================================
+ #Base #{strip-units($width)} Grid
+ #Tablet (Portrait)
+ #Mobile (Portrait)
+ #Mobile (Landscape)
+ #Clearing */
+
+/* #Base #{strip-units($width)} Grid
+================================================== */
+.container {
+ position: relative;
+ width: $width;
+ margin: 0 auto;
+ padding: 0;
+ .column,
+ .columns {
+ float: left;
+ display: inline;
+ margin: {
+ left: 10px;
+ right:0px;
+ };
+ /* Nested Column Classes */
+ &.alpha { margin-left: 0; }
+ &.omega { margin-right: 0; }
+ }
+}
+.row { margin-bottom: 20px; }
+/* Base Grid */
+@include makeGrid($width);
+
+/* #Tablet (Portrait)
+================================================== */
+/* Note: Design for a width of #{strip-units($tabletWidth)} */
+@media only screen and (min-width: $tabletWidth) and (max-width: ($width - 1)) {
+ .container {
+ width: $tabletWidth;
+ .column, .columns {
+ margin: {
+ left: 10px;
+ right: 10px;
+ };
+ &.alpha {
+ margin: {
+ left: 0;
+ right: 10px;
+ };
+ }
+ &.omega {
+ margin: {
+ right: 0;
+ left: 10px;
+ };
+ }
+ }
+ }
+ .alpha.omega {
+ margin: {
+ left: 0;
+ right: 0;
+ };
+ }
+ @include makeGrid($tabletWidth, 28px);
+}
+
+/* #Mobile (Portrait)
+================================================== */
+/* Note: Design for a width of #{strip-units($mobilePortraitWidth)} */
+@media only screen and (max-width: ($tabletWidth - 1)) {
+ .container { width: $mobilePortraitWidth; }
+ .container .columns,
+ .container .column { margin: 0; }
+ .container .one.column,
+ .container .one.columns,
+ .container .two.columns,
+ .container .three.columns,
+ .container .four.columns,
+ .container .five.columns,
+ .container .six.columns,
+ .container .seven.columns,
+ .container .eight.columns,
+ .container .nine.columns,
+ .container .ten.columns,
+ .container .eleven.columns,
+ .container .twelve.columns,
+ .container .thirteen.columns,
+ .container .fourteen.columns,
+ .container .fifteen.columns,
+ .container .sixteen.columns,
+ .container .one-third.column,
+ .container .two-thirds.column { width: $mobilePortraitWidth; }
+ /* Offsets */
+ .container .offset-by-one,
+ .container .offset-by-two,
+ .container .offset-by-three,
+ .container .offset-by-four,
+ .container .offset-by-five,
+ .container .offset-by-six,
+ .container .offset-by-seven,
+ .container .offset-by-eight,
+ .container .offset-by-nine,
+ .container .offset-by-ten,
+ .container .offset-by-eleven,
+ .container .offset-by-twelve,
+ .container .offset-by-thirteen,
+ .container .offset-by-fourteen,
+ .container .offset-by-fifteen { padding-left: 0; }
+}
+
+/* #Mobile (Landscape)
+================================================== */
+/* Note: Design for a width of #{strip-units($mobileLandscapeWidth)} */
+@media only screen and (min-width: 480px) and (max-width: ($tabletWidth - 1)) {
+ .container { width: $mobileLandscapeWidth; }
+ .container .columns,
+ .container .column { margin: 0; }
+ .container .one.column,
+ .container .one.columns,
+ .container .two.columns,
+ .container .three.columns,
+ .container .four.columns,
+ .container .five.columns,
+ .container .six.columns,
+ .container .seven.columns,
+ .container .eight.columns,
+ .container .nine.columns,
+ .container .ten.columns,
+ .container .eleven.columns,
+ .container .twelve.columns,
+ .container .thirteen.columns,
+ .container .fourteen.columns,
+ .container .fifteen.columns,
+ .container .sixteen.columns,
+ .container .one-third.column,
+ .container .two-thirds.column { width: $mobileLandscapeWidth; }
+}
+
+/* #Clearing
+================================================== */
+/* Self Clearing Goodness */
+.container:after {
+ content: "\0020";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+/* Use clearfix class on parent to clear nested columns,
+ or wrap each row of columns in a <div class="row"> */
+.row,
+.clearfix {
+ zoom: 1;
+ &:after, &:before {
+ content: "\0020";
+ display: block;
+ overflow: hidden;
+ visibility: hidden;
+ width: 0;
+ height: 0;
+ }
+ &:after { clear: both; }
+}
+/* You can also use a <br class="clear" /> to clear columns */
+.clear {
+ clear: both;
+ display: block;
+ overflow: hidden;
+ visibility: hidden;
+ width: 0;
+ height: 0;
}
View
111 css/base.css
@@ -20,7 +20,6 @@
# Misc */
/* # Reset & Basics (Inspired by E. Meyers)
================================================== */
-/* line 40, ../../sass/sass/base.scss */
html, body, div, span, applet, object, iframe, h1, h2,
h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, img, ins, kbd,
@@ -39,34 +38,28 @@ mark, audio, video {
vertical-align: baseline;
}
-/* line 50, ../../sass/sass/base.scss */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu,
nav, section {
display: block;
}
-/* line 51, ../../sass/sass/base.scss */
body {
line-height: 1;
}
-/* line 52, ../../sass/sass/base.scss */
ol, ul {
list-style: none;
}
-/* line 53, ../../sass/sass/base.scss */
blockquote, q {
quotes: none;
}
-/* line 56, ../../sass/sass/base.scss */
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
-/* line 61, ../../sass/sass/base.scss */
table {
border-collapse: collapse;
border-spacing: 0;
@@ -74,12 +67,14 @@ table {
/* #Basic Styles
================================================== */
-/* line 70, ../../sass/sass/base.scss */
body {
background: white;
- font: 14px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: normal;
+ font-style: normal;
line-height: 21px;
- color: #444;
+ color: #444444;
-webkit-font-smoothing: antialiased;
/* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
@@ -87,102 +82,85 @@ body {
/* #Typography
================================================== */
-/* line 81, ../../sass/sass/base.scss */
h1, h2, h3, h4, h5, h6 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
}
-/* line 88, ../../sass/sass/base.scss */
h1 a, h2 a, h3 a,
h4 a, h5 a, h6 a {
font-weight: inherit;
}
-/* line 90, ../../sass/sass/base.scss */
h1 {
font-size: 54px;
line-height: 58px;
margin-bottom: 16px;
}
-/* line 95, ../../sass/sass/base.scss */
h2 {
font-size: 41px;
line-height: 47px;
margin-bottom: 12px;
}
-/* line 100, ../../sass/sass/base.scss */
h3 {
font-size: 33px;
line-height: 40px;
margin-bottom: 9px;
}
-/* line 105, ../../sass/sass/base.scss */
h4 {
font-size: 25px;
line-height: 35px;
margin-bottom: 5px;
}
-/* line 110, ../../sass/sass/base.scss */
h5 {
font-size: 20px;
line-height: 28px;
}
-/* line 114, ../../sass/sass/base.scss */
h6 {
font-size: 16px;
line-height: 25px;
}
-/* line 118, ../../sass/sass/base.scss */
.subheader {
color: #777;
}
-/* line 119, ../../sass/sass/base.scss */
p {
margin: 0 0 20px 0;
}
-/* line 121, ../../sass/sass/base.scss */
p img {
margin: 0;
}
-/* line 122, ../../sass/sass/base.scss */
p.lead {
font-size: 25px;
line-height: 32px;
color: #777;
}
-/* line 128, ../../sass/sass/base.scss */
em, i {
font-style: italic;
}
-/* line 129, ../../sass/sass/base.scss */
strong, b {
font-weight: bold;
color: #333;
}
-/* line 133, ../../sass/sass/base.scss */
u {
text-decoration: underline;
}
-/* line 134, ../../sass/sass/base.scss */
small {
font-size: 80%;
}
/* Blockquotes */
-/* line 136, ../../sass/sass/base.scss */
blockquote, blockquote p {
font-size: 20px;
line-height: 28px;
@@ -190,29 +168,24 @@ blockquote, blockquote p {
font-style: italic;
}
-/* line 142, ../../sass/sass/base.scss */
blockquote {
margin: 0 0 20px;
padding: 9px 20px 0 19px;
border-left: 1px solid #ddd;
}
-/* line 147, ../../sass/sass/base.scss */
blockquote cite {
display: block;
font-size: 14px;
color: #555;
}
-/* line 151, ../../sass/sass/base.scss */
blockquote cite:before {
content: "\2014 \0020";
}
-/* line 152, ../../sass/sass/base.scss */
blockquote cite a, blockquote cite a:visited {
color: #555;
}
-/* line 154, ../../sass/sass/base.scss */
hr {
border-style: solid;
border-color: #ddd;
@@ -224,91 +197,87 @@ hr {
/* #Links
================================================== */
-/* line 167, ../../sass/sass/base.scss */
a, a:visited {
- color: #333;
+ color: #333333;
text-decoration: underline;
outline: 0;
}
-/* line 172, ../../sass/sass/base.scss */
a:hover, a:focus, a:active {
- color: #000;
+ color: black;
}
-/* line 173, ../../sass/sass/base.scss */
p a, p a:visited {
line-height: inherit;
}
/* #Lists
================================================== */
-/* line 177, ../../sass/sass/base.scss */
-ul, ol {
+ul,
+ol {
margin-bottom: 20px;
}
-/* line 178, ../../sass/sass/base.scss */
ul {
list-style: none outside;
}
-/* line 179, ../../sass/sass/base.scss */
ol {
list-style: decimal;
}
-/* line 180, ../../sass/sass/base.scss */
-ol, ul.square, ul.circle, ul.disc {
+ol,
+ul.square,
+ul.circle,
+ul.disc {
margin-left: 30px;
}
-/* line 181, ../../sass/sass/base.scss */
ul.square {
list-style: square outside;
}
-/* line 182, ../../sass/sass/base.scss */
ul.circle {
list-style: circle outside;
}
-/* line 183, ../../sass/sass/base.scss */
ul.disc {
list-style: disc outside;
}
-/* line 184, ../../sass/sass/base.scss */
-ul ul, ul ol, ol ol, ol ul {
- margin: 4px 0 5px 30px;
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+ margin-top: 4px;
+ margin-right: 0;
+ margin-bottom: 5px;
+ margin-left: 30px;
font-size: 90%;
}
-/* line 189, ../../sass/sass/base.scss */
-ul ul li, ul ol li,
-ol ol li, ol ul li {
+ul ul li,
+ul ol li,
+ol ol li,
+ol ul li {
margin-bottom: 6px;
}
-/* line 190, ../../sass/sass/base.scss */
li {
line-height: 18px;
margin-bottom: 12px;
}
-/* line 194, ../../sass/sass/base.scss */
ul.large li {
line-height: 21px;
}
-/* line 195, ../../sass/sass/base.scss */
li p {
line-height: 21px;
}
/* #Images
================================================== */
-/* line 199, ../../sass/sass/base.scss */
img.scale-with-grid {
max-width: 100%;
height: auto;
@@ -316,7 +285,6 @@ img.scale-with-grid {
/* #Buttons
================================================== */
-/* line 210, ../../sass/sass/base.scss */
.button,
button,
input[type="submit"],
@@ -346,7 +314,6 @@ input[type="button"] {
line-height: normal;
padding: 8px 10px;
}
-/* line 234, ../../sass/sass/base.scss */
.button:hover,
button:hover,
input[type="submit"]:hover,
@@ -362,7 +329,6 @@ input[type="button"]:hover {
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
}
-/* line 247, ../../sass/sass/base.scss */
.button:active,
button:active,
input[type="submit"]:active,
@@ -375,7 +341,6 @@ input[type="button"]:active {
background: #cccccc -o-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
background: #cccccc linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
}
-/* line 255, ../../sass/sass/base.scss */
.button.full-width,
button.full-width,
input[type="submit"].full-width,
@@ -386,7 +351,6 @@ input[type="button"].full-width {
padding-right: 0 !important;
text-align: center;
}
-/* line 261, ../../sass/sass/base.scss */
.button.smaller,
button.smaller,
input[type="submit"].smaller,
@@ -395,7 +359,6 @@ input[type="button"].smaller {
font-size: 12px;
padding: 4px 5px;
}
-/* line 265, ../../sass/sass/base.scss */
.button.larger,
button.larger,
input[type="submit"].larger,
@@ -406,7 +369,6 @@ input[type="button"].larger {
}
/* Fix for odd Mozilla border & padding issues */
-/* line 274, ../../sass/sass/base.scss */
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
@@ -415,17 +377,14 @@ input::-moz-focus-inner {
/* #Forms
================================================== */
-/* line 282, ../../sass/sass/base.scss */
form {
margin-bottom: 20px;
}