Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
  • 2 commits
  • 30 files changed
  • 0 commit comments
  • 1 contributor
67 compass/sass/_functions.sass
View
@@ -0,0 +1,67 @@
+// 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
6 compass/sass/_mixins.sass
View
@@ -0,0 +1,6 @@
+// ---- MIXINS ----
+=linkStyle($color, $decoration: underline)
+ color: $color
+ text-decoration: $decoration
+ &:hover
+ text-decoration: none
13 compass/sass/_vars.sass
View
@@ -0,0 +1,13 @@
+// ---- VARIABLES ----
+
+// backgrounds
+$backgroundColor: white
+
+// font styles
+$fontSize: 14px
+$fontFamily: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
+$formFontFamily: $fontFamily
+
+// heading styles
+$headingFamily: "Georgia", "Times New Roman", serif
+$headingColor: #181818
372 compass/sass/base.sass
View
@@ -0,0 +1,372 @@
+/*
+ ** 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"]
+ +background(#eeeeee 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
+ +border-radius(3px)
+ color: #444
+ display: inline-block
+ font:
+ size: $fontSize - 1
+ weight: bold
+ family: $fontFamily
+ text-decoration: none
+ +text-shadow(0 1px rgba(255, 255, 255, 0.75))
+ cursor: pointer
+ line-height: normal
+ padding: 8px 10px
+ &:hover
+ color: #222
+ +background(#dddddd 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
+ +background(#cccccc 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
+ +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
+ +box-shadow(0 0 3px rgba(0, 0, 0, 0.2))
+ &:active
+ border: 1px solid darken(#aaaaaa, 10%)
+ +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
50 compass/sass/layout.sass
View
@@ -0,0 +1,50 @@
+/*
+ ** 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)
208 compass/sass/skeleton.sass
View
@@ -0,0 +1,208 @@
+/*
+ ** 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
+=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
++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
+ +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
39 compass/scss/_functions.scss
View
@@ -0,0 +1,39 @@
+// 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;
+}
6 compass/scss/_mixins.scss
View
@@ -0,0 +1,6 @@
+// ---- MIXINS ----
+@mixin linkStyle($color, $decoration: underline) {
+ color: $color;
+ text-decoration: $decoration;
+ &:hover { text-decoration: none; }
+}
13 compass/scss/_vars.scss
View
@@ -0,0 +1,13 @@
+// ---- VARIABLES ----
+
+// backgrounds
+$backgroundColor: #fff;
+
+// font styles
+$fontSize: 14px;
+$fontFamily: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$formFontFamily: $fontFamily;
+
+// heading styles
+$headingFamily: "Georgia", "Times New Roman", serif;
+$headingColor: #181818;
334 compass/scss/base.scss
View
@@ -0,0 +1,334 @@
+/*
+* 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; }
57 compass/scss/layout.scss
View
@@ -0,0 +1,57 @@
+/*
+* 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) {
+
+}
210 compass/scss/skeleton.scss
View
@@ -0,0 +1,210 @@
+/*
+* 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;
+}
547 css/base.css
View
@@ -0,0 +1,547 @@
+/*
+* 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
+==================================================
+ # Reset & Basics
+ # Basic Styles
+ # Site Styles
+ # Typography
+ # Links
+ # Lists
+ # Images
+ # Buttons
+ # Forms
+ # 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,
+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;
+}
+
+/* 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;
+}
+
+/* #Basic Styles
+================================================== */
+/* line 70, ../../sass/sass/base.scss */
+body {
+ background: white;
+ font: 14px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ line-height: 21px;
+ color: #444;
+ -webkit-font-smoothing: antialiased;
+ /* Fix for webkit rendering */
+ -webkit-text-size-adjust: 100%;
+}
+
+/* #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;
+ color: #777;
+ 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;
+ border-width: 1px 0 0;
+ clear: both;
+ margin: 10px 0 30px;
+ height: 0;
+}
+
+/* #Links
+================================================== */
+/* line 167, ../../sass/sass/base.scss */
+a, a:visited {
+ color: #333;
+ text-decoration: underline;
+ outline: 0;
+}
+
+/* line 172, ../../sass/sass/base.scss */
+a:hover, a:focus, a:active {
+ color: #000;
+}
+
+/* line 173, ../../sass/sass/base.scss */
+p a, p a:visited {
+ line-height: inherit;
+}
+
+/* #Lists
+================================================== */
+/* line 177, ../../sass/sass/base.scss */
+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 {
+ 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;
+ font-size: 90%;
+}
+
+/* line 189, ../../sass/sass/base.scss */
+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;
+}
+
+/* #Buttons
+================================================== */
+/* line 210, ../../sass/sass/base.scss */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ background: #eeeeee -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2)));
+ background: #eeeeee -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+ background: #eeeeee -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+ background: #eeeeee -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+ background: #eeeeee 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;
+ border-left: 1px solid #ccc;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -ms-border-radius: 3px;
+ -o-border-radius: 3px;
+ border-radius: 3px;
+ color: #444;
+ display: inline-block;
+ font-size: 13px;
+ font-weight: bold;
+ font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ text-decoration: none;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.75);
+ cursor: pointer;
+ line-height: normal;
+ padding: 8px 10px;
+}
+/* line 234, ../../sass/sass/base.scss */
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover {
+ color: #222;
+ background: #dddddd -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3)));
+ background: #dddddd -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
+ background: #dddddd -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
+ background: #dddddd -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
+ background: #dddddd 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;
+ border-left: 1px solid #aaa;
+}
+/* line 247, ../../sass/sass/base.scss */
+.button:active,
+button:active,
+input[type="submit"]:active,
+input[type="reset"]:active,
+input[type="button"]:active {
+ border: 1px solid #666;
+ background: #cccccc -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.35)), color-stop(100%, rgba(10, 10, 10, 0.4)));
+ background: #cccccc -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
+ background: #cccccc -moz-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
+ 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,
+input[type="reset"].full-width,
+input[type="button"].full-width {
+ width: 100%;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ text-align: center;
+}
+/* line 261, ../../sass/sass/base.scss */
+.button.smaller,
+button.smaller,
+input[type="submit"].smaller,
+input[type="reset"].smaller,
+input[type="button"].smaller {
+ font-size: 12px;
+ padding: 4px 5px;
+}
+/* line 265, ../../sass/sass/base.scss */
+.button.larger,
+button.larger,
+input[type="submit"].larger,
+input[type="reset"].larger,
+input[type="button"].larger {
+ font-size: 16px;
+ padding: 10px 18px;
+}
+
+/* Fix for odd Mozilla border & padding issues */
+/* line 274, ../../sass/sass/base.scss */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/* #Forms
+================================================== */
+/* line 282, ../../sass/sass/base.scss */
+form {
+ margin-bottom: 20px;
+}
+
+/* line 283, ../../sass/sass/base.scss */
+fieldset {
+ margin-bottom: 20px;
+}
+
+/* line 291, ../../sass/sass/base.scss */
+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;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ -ms-border-radius: 2px;
+ -o-border-radius: 2px;
+ border-radius: 2px;
+ font-size: 15px;
+ font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ color: #777;
+ margin: 0 0 20px;
+ width: 210px;
+ max-width: 100%;
+ display: block;
+}
+/* line 306, ../../sass/sass/base.scss */
+input[type="text"]:hover, input[type="text"]:focus,
+input[type="password"]:hover,
+input[type="password"]:focus,
+input[type="email"]:hover,
+input[type="email"]:focus,
+input[type="search"]:hover,
+input[type="search"]:focus,
+input[type="url"]:hover,
+input[type="url"]:focus,
+input[type="tel"]:hover,
+input[type="tel"]:focus,
+textarea:hover,
+textarea:focus,
+select:hover,
+select:focus {
+ border: 1px solid #aaa;
+ color: #444;
+ -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+}
+/* line 311, ../../sass/sass/base.scss */
+input[type="text"]:active,
+input[type="password"]:active,
+input[type="email"]:active,
+input[type="search"]:active,
+input[type="url"]:active,
+input[type="tel"]:active,
+textarea:active,
+select:active {
+ border: 1px solid #909090;
+ -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+ -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+}
+
+/* line 316, ../../sass/sass/base.scss */
+select {
+ padding: 0;
+}
+
+/* line 317, ../../sass/sass/base.scss */
+textarea {
+ min-height: 60px;
+}
+
+/* line 319, ../../sass/sass/base.scss */
+label,
+legend {
+ display: block;
+ font-size: 15px;
+ font-weight: bold;
+}
+
+/* line 326, ../../sass/sass/base.scss */
+select {
+ width: 220px;
+}
+
+/* line 327, ../../sass/sass/base.scss */
+input[type="checkbox"] {
+ display: inline;
+}
+
+/* line 329, ../../sass/sass/base.scss */
+label span,
+legend span {
+ font-size: 15px;
+ font-weight: normal;
+ color: #444;
+}
+
+/* #Misc
+================================================== */
+/* line 339, ../../sass/sass/base.scss */
+.remove-bottom {
+ margin-bottom: 0 !important;
+}
+
+/* line 340, ../../sass/sass/base.scss */
+.half-bottom {
+ margin-bottom: 10px !important;
+}
+
+/* line 341, ../../sass/sass/base.scss */
+.add-bottom {
+ margin-bottom: 20px !important;
+}
+
+/* line 342, ../../sass/sass/base.scss */
+.subtract-bottom {
+ margin-bottom: -20px !important;
+}
25 css/layout.css
View
@@ -0,0 +1,25 @@
+/*
+* 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 */
+/* #Site Styles
+================================================== */
+/* #Page Styles
+================================================== */
+/* #Media Queries
+================================================== */
+/* Smaller than standard 960px (devices and browsers) */
+/* Tablet Portrait size to standard 960px (devices and browsers) */
+/* All Mobile Sizes (devices and browser) */
+/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
+/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
556 css/skeleton.css
View
@@ -0,0 +1,556 @@
+/*
+* 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 */
+/* #Base 960px Grid
+================================================== */
+/* line 49, ../../sass/sass/skeleton.scss */
+.container {
+ position: relative;
+ width: 960px;
+ margin: 0 auto;
+ padding: 0;
+}
+/* line 55, ../../sass/sass/skeleton.scss */
+.container .column,
+.container .columns {
+ float: left;
+ display: inline;
+ margin-left: 10px;
+ margin-right: 0px;
+ /* Nested Column Classes */
+}
+/* line 63, ../../sass/sass/skeleton.scss */
+.container .column.alpha,
+.container .columns.alpha {
+ margin-left: 0;
+}
+/* line 64, ../../sass/sass/skeleton.scss */
+.container .column.omega,
+.container .columns.omega {
+ margin-right: 0;
+}
+
+/* line 67, ../../sass/sass/skeleton.scss */
+.row {
+ margin-bottom: 20px;
+}
+
+/* Base Grid */
+/* line 31, ../../sass/sass/skeleton.scss */
+.container .one.column,
+.container .one.columns {
+ width: 40px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .two.columns {
+ width: 100px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .three.columns {
+ width: 160px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .four.columns {
+ width: 220px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .five.columns {
+ width: 280px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .six.columns {
+ width: 340px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .seven.columns {
+ width: 400px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .eight.columns {
+ width: 460px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .nine.columns {
+ width: 520px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .ten.columns {
+ width: 580px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .eleven.columns {
+ width: 640px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .twelve.columns {
+ width: 700px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .thirteen.columns {
+ width: 760px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .fourteen.columns {
+ width: 820px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .fifteen.columns {
+ width: 880px;
+}
+
+/* line 34, ../../sass/sass/skeleton.scss */
+.container .sixteen.columns {
+ width: 940px;
+}
+
+/* line 37, ../../sass/sass/skeleton.scss */
+.container .one-third.column {
+ width: 300px;
+}
+
+/* line 38, ../../sass/sass/skeleton.scss */
+.container .two-thirds.column {
+ width: 620px;
+}
+
+/* Offsets */
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-one {
+ width: 60px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-two {
+ width: 120px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-three {
+ width: 180px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-four {
+ width: 240px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-five {
+ width: 300px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-six {
+ width: 360px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-seven {
+ width: 420px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-eight {
+ width: 480px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-nine {
+ width: 540px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-ten {
+ width: 600px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-eleven {
+ width: 660px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-twelve {
+ width: 720px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-thirteen {
+ width: 780px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-fourteen {
+ width: 840px;
+}
+
+/* line 42, ../../sass/sass/skeleton.scss */
+.container .offset-by-fifteen {
+ width: 900px;
+}
+
+/* #Tablet (Portrait)
+================================================== */
+/* Note: Design for a width of false */
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+ /* line 75, ../../sass/sass/skeleton.scss */
+ .container {
+ width: 768px;
+ }
+ /* line 77, ../../sass/sass/skeleton.scss */
+ .container .column, .container .columns {
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+ /* line 82, ../../sass/sass/skeleton.scss */
+ .container .column.alpha, .container .columns.alpha {
+ margin-left: 0;
+ margin-right: 10px;
+ }
+ /* line 88, ../../sass/sass/skeleton.scss */
+ .container .column.omega, .container .columns.omega {
+ margin-right: 0;
+ margin-left: 10px;
+ }
+
+ /* line 96, ../../sass/sass/skeleton.scss */
+ .alpha.omega {
+ margin-left: 0;
+ margin-right: 0;
+ }
+
+ /* line 31, ../../sass/sass/skeleton.scss */
+ .container .one.column,
+ .container .one.columns {
+ width: 28px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .two.columns {
+ width: 76px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .three.columns {
+ width: 124px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .four.columns {
+ width: 172px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .five.columns {
+ width: 220px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .six.columns {
+ width: 268px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .seven.columns {
+ width: 316px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .eight.columns {
+ width: 364px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .nine.columns {
+ width: 412px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .ten.columns {
+ width: 460px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .eleven.columns {
+ width: 508px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .twelve.columns {
+ width: 556px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .thirteen.columns {
+ width: 604px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .fourteen.columns {
+ width: 652px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .fifteen.columns {
+ width: 700px;
+ }
+
+ /* line 34, ../../sass/sass/skeleton.scss */
+ .container .sixteen.columns {
+ width: 748px;
+ }
+
+ /* line 37, ../../sass/sass/skeleton.scss */
+ .container .one-third.column {
+ width: 236px;
+ }
+
+ /* line 38, ../../sass/sass/skeleton.scss */
+ .container .two-thirds.column {
+ width: 492px;
+ }
+
+ /* Offsets */
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-one {
+ width: 48px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-two {
+ width: 96px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-three {
+ width: 144px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-four {
+ width: 192px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-five {
+ width: 240px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-six {
+ width: 288px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-seven {
+ width: 336px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-eight {
+ width: 384px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-nine {
+ width: 432px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-ten {
+ width: 480px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-eleven {
+ width: 528px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-twelve {
+ width: 576px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-thirteen {
+ width: 624px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-fourteen {
+ width: 672px;
+ }
+
+ /* line 42, ../../sass/sass/skeleton.scss */
+ .container .offset-by-fifteen {
+ width: 720px;
+ }
+}
+/* #Mobile (Portrait)
+================================================== */
+/* Note: Design for a width of false */
+@media only screen and (max-width: 767px) {
+ /* line 109, ../../sass/sass/skeleton.scss */
+ .container {
+ width: 300px;
+ }
+
+ /* line 111, ../../sass/sass/skeleton.scss */
+ .container .columns,
+ .container .column {
+ margin: 0;
+ }
+
+ /* line 130, ../../sass/sass/skeleton.scss */
+ .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: 300px;
+ }
+
+ /* Offsets */
+ /* line 146, ../../sass/sass/skeleton.scss */
+ .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 false */
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+ /* line 153, ../../sass/sass/skeleton.scss */
+ .container {
+ width: 420px;
+ }
+
+ /* line 155, ../../sass/sass/skeleton.scss */
+ .container .columns,
+ .container .column {
+ margin: 0;
+ }
+
+ /* line 174, ../../sass/sass/skeleton.scss */
+ .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: 420px;
+ }
+}
+/* #Clearing
+================================================== */
+/* Self Clearing Goodness */
+/* line 180, ../../sass/sass/skeleton.scss */
+.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"> */
+/* line 190, ../../sass/sass/skeleton.scss */
+.row,
+.clearfix {
+ zoom: 1;
+}
+/* line 192, ../../sass/sass/skeleton.scss */
+.row:after, .row:before,
+.clearfix:after,
+.clearfix:before {
+ content: '\0020';
+ display: block;
+ overflow: hidden;
+ visibility: hidden;
+ width: 0;
+ height: 0;
+}
+/* line 200, ../../sass/sass/skeleton.scss */
+.row:after,
+.clearfix:after {
+ clear: both;
+}
+
+/* You can also use a <br class="clear" /> to clear columns */
+/* line 203, ../../sass/sass/skeleton.scss */
+.clear {
+ clear: both;
+ display: block;
+ overflow: hidden;
+ visibility: hidden;
+ width: 0;
+ height: 0;
+}
306 index.html
View
@@ -0,0 +1,306 @@
+
+<!--
+ Demo showcasing the usage of skeleton css framework
+ and showing other aspects of the framework such as
+ default styles and width manipulation.
+ @author Dennis Thompson - AtomicPages LLC
+ @copyright Copyright (c) Dennis Thompson 2012.
+ @license GPL 2.0
+
+ Skeleton CSS is copyright of Dave Gamache which is
+ released under the MIT License. Edits to Skeleton
+ base.css file by Dennis Thompson.
+-->
+
+<!DOCTYPE html>
+<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
+<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
+<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
+<!--[if IE 9 ]><html class="ie ie9" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<meta name="description" content="HTML 5 Skeleton Responsive Demo">
+<meta name="author" content="Dennis Thompson">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>Responsive Demo</title>
+
+<!-- favicons -->
+<link rel="shortcut icon" href="https://raw.github.com/dhgamache/Skeleton/master/images/favicon.ico">
+<link rel="apple-touch-icon" href="https://raw.github.com/dhgamache/Skeleton/master/images/apple-touch-icon.png">
+<link rel="apple-touch-icon" sizes="72x72" href="https://raw.github.com/dhgamache/Skeleton/master/images/apple-touch-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="114x114" href="https://raw.github.com/dhgamache/Skeleton/master/images/apple-touch-icon-114x114.png">