From bb12a3509e76ca33a1de3e5d6501182013fb3fd7 Mon Sep 17 00:00:00 2001 From: Joaquin GT Date: Mon, 21 Oct 2013 08:53:21 +0100 Subject: [PATCH] sass'ing skeleton --- sass/base.scss | 586 +++++++++++++++++++++++++++++++++++++++++++++ sass/layout.scss | 55 +++++ sass/skeleton.scss | 398 ++++++++++++++++++++++++++++++ 3 files changed, 1039 insertions(+) create mode 100644 sass/base.scss create mode 100644 sass/layout.scss create mode 100644 sass/skeleton.scss diff --git a/sass/base.scss b/sass/base.scss new file mode 100644 index 0000000..bb022b0 --- /dev/null +++ b/sass/base.scss @@ -0,0 +1,586 @@ +/* +* 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 Content +================================================== + #Reset & Basics + #Basic Styles + #Site Styles + #Typography + #Links + #Lists + #Images + #Buttons + #Forms + #Misc */ + +/* #Reset & Basics (Inspired by E. Meyers) +================================================== */ + +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; +} + +blockquote { + &:before, &:after { + content: ''; + content: none; + } +} + +q { + &:before, &:after { + content: ''; + content: none; + } +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* #Basic Styles +================================================== */ + +body { + background: #fff; + font: 14px / 21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; + /* Fix for webkit rendering */ + -webkit-text-size-adjust: 100%; +} + +/* #Typography +================================================== */ + +h1, h2, h3, h4, h5, h6 { + color: #181818; + font-family: "Georgia", "Times New Roman", serif; + font-weight: normal; +} + +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + font-weight: inherit; +} + +h1 { + font-size: 46px; + line-height: 50px; + margin-bottom: 14px; +} + +h2 { + font-size: 35px; + line-height: 40px; + margin-bottom: 10px; +} + +h3 { + font-size: 28px; + line-height: 34px; + margin-bottom: 8px; +} + +h4 { + font-size: 21px; + line-height: 30px; + margin-bottom: 4px; +} + +h5 { + font-size: 17px; + line-height: 24px; +} + +h6 { + font-size: 14px; + line-height: 21px; +} + +.subheader { + color: #777; +} + +p { + margin: 0 0 20px 0; + img { + margin: 0; + } + &.lead { + font-size: 21px; + line-height: 27px; + color: #777; + } +} + +em { + font-style: italic; +} + +strong { + font-weight: bold; + color: #333; +} + +small { + font-size: 80%; +} + +/* Blockquotes */ + +blockquote { + font-size: 17px; + line-height: 24px; + color: #777; + font-style: italic; + p { + font-size: 17px; + line-height: 24px; + color: #777; + font-style: italic; + } + margin: 0 0 20px; + padding: 9px 20px 0 19px; + border-left: 1px solid #ddd; + cite { + display: block; + font-size: 12px; + color: #555; + &:before { + content: "\2014 \0020"; + } + a { + color: #555; + &:visited { + color: #555; + } + } + } +} + +hr { + border: solid #ddd; + border-width: 1px 0 0; + clear: both; + margin: 10px 0 30px; + height: 0; +} + +/* #Links +================================================== */ + +a { + color: #333; + text-decoration: underline; + outline: 0; + &:visited { + color: #333; + text-decoration: underline; + outline: 0; + } + &:hover, &:focus { + color: #000; + } +} + +p a { + line-height: inherit; + &:visited { + line-height: inherit; + } +} + +/* #Lists +================================================== */ + +ul, ol { + margin-bottom: 20px; +} + +ul { + list-style: none outside; +} + +ol { + list-style: decimal; + margin-left: 30px; +} + +ul { + &.square, &.circle, &.disc { + margin-left: 30px; + } + &.square { + list-style: square outside; + } + &.circle { + list-style: circle outside; + } + &.disc { + list-style: disc outside; + } + ul, ol { + margin: 4px 0 5px 30px; + font-size: 90%; + } +} + +ol { + ol, ul { + margin: 4px 0 5px 30px; + font-size: 90%; + } +} + +ul { + ul li, ol li { + margin-bottom: 6px; + } +} + +ol { + ol li, ul li { + margin-bottom: 6px; + } +} + +li { + line-height: 18px; + margin-bottom: 12px; +} + +ul.large li, li p { + line-height: 21px; +} + +/* #Images +================================================== */ + +img.scale-with-grid { + max-width: 100%; + height: auto; +} + +/* #Buttons +================================================== */ + +.button, button { + background: #eee; + /* Old browsers */ + background: #eeeeee -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); + /* FF3.6+ */ + background: #eeeeee -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2))); + /* Chrome,Safari4+ */ + background: #eeeeee -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); + /* Chrome10+,Safari5.1+ */ + background: #eeeeee -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); + /* Opera11.10+ */ + background: #eeeeee -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); + /* IE10+ */ + background: #eeeeee linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); + /* W3C */ + border: 1px solid #aaa; + border-top: 1px solid #ccc; + border-left: 1px solid #ccc; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + color: #444; + display: inline-block; + font-size: 11px; + font-weight: bold; + text-decoration: none; + text-shadow: 0 1px rgba(255, 255, 255, 0.75); + cursor: pointer; + margin-bottom: 20px; + line-height: normal; + padding: 8px 10px; + font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +input { + &[type="submit"], &[type="reset"], &[type="button"] { + background: #eee; + /* Old browsers */ + background: #eeeeee -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); + /* FF3.6+ */ + background: #eeeeee -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2))); + /* Chrome,Safari4+ */ + background: #eeeeee -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); + /* Chrome10+,Safari5.1+ */ + background: #eeeeee -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); + /* Opera11.10+ */ + background: #eeeeee -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); + /* IE10+ */ + background: #eeeeee linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); + /* W3C */ + border: 1px solid #aaa; + border-top: 1px solid #ccc; + border-left: 1px solid #ccc; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + color: #444; + display: inline-block; + font-size: 11px; + font-weight: bold; + text-decoration: none; + text-shadow: 0 1px rgba(255, 255, 255, 0.75); + cursor: pointer; + margin-bottom: 20px; + line-height: normal; + padding: 8px 10px; + font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + } +} + +.button:hover, button:hover { + color: #222; + background: #ddd; + /* Old browsers */ + background: #dddddd -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); + /* FF3.6+ */ + background: #dddddd -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3))); + /* Chrome,Safari4+ */ + background: #dddddd -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); + /* Chrome10+,Safari5.1+ */ + background: #dddddd -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); + /* Opera11.10+ */ + background: #dddddd -ms-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); + /* IE10+ */ + background: #dddddd linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); + /* W3C */ + border: 1px solid #888; + border-top: 1px solid #aaa; + border-left: 1px solid #aaa; +} + +input { + &[type="submit"]:hover, &[type="reset"]:hover, &[type="button"]:hover { + color: #222; + background: #ddd; + /* Old browsers */ + background: #dddddd -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); + /* FF3.6+ */ + background: #dddddd -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3))); + /* Chrome,Safari4+ */ + background: #dddddd -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); + /* Chrome10+,Safari5.1+ */ + background: #dddddd -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); + /* Opera11.10+ */ + background: #dddddd -ms-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); + /* IE10+ */ + background: #dddddd linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); + /* W3C */ + border: 1px solid #888; + border-top: 1px solid #aaa; + border-left: 1px solid #aaa; + } +} + +.button:active, button:active { + border: 1px solid #666; + background: #ccc; + /* Old browsers */ + background: #cccccc -moz-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); + /* FF3.6+ */ + background: #cccccc -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.35)), color-stop(100%, rgba(10, 10, 10, 0.4))); + /* Chrome,Safari4+ */ + background: #cccccc -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); + /* Chrome10+,Safari5.1+ */ + background: #cccccc -o-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); + /* Opera11.10+ */ + background: #cccccc -ms-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); + /* IE10+ */ + background: #cccccc linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); + /* W3C */ +} + +input { + &[type="submit"]:active, &[type="reset"]:active, &[type="button"]:active { + border: 1px solid #666; + background: #ccc; + /* Old browsers */ + background: #cccccc -moz-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); + /* FF3.6+ */ + background: #cccccc -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.35)), color-stop(100%, rgba(10, 10, 10, 0.4))); + /* Chrome,Safari4+ */ + background: #cccccc -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); + /* Chrome10+,Safari5.1+ */ + background: #cccccc -o-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); + /* Opera11.10+ */ + background: #cccccc -ms-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); + /* IE10+ */ + background: #cccccc linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); + /* W3C */ + } +} + +.button.full-width, button.full-width { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + text-align: center; +} + +input { + &[type="submit"].full-width, &[type="reset"].full-width, &[type="button"].full-width { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + text-align: center; + } +} + +/* Fix for odd Mozilla border & padding issues */ + +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* #Forms +================================================== */ + +form, fieldset { + margin-bottom: 20px; +} + +input { + &[type="text"], &[type="password"], &[type="email"] { + border: 1px solid #ccc; + padding: 6px 4px; + outline: none; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #777; + margin: 0; + width: 210px; + max-width: 100%; + display: block; + margin-bottom: 20px; + background: #fff; + } +} + +textarea { + border: 1px solid #ccc; + padding: 6px 4px; + outline: none; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #777; + margin: 0; + width: 210px; + max-width: 100%; + display: block; + margin-bottom: 20px; + background: #fff; +} + +select { + border: 1px solid #ccc; + padding: 6px 4px; + outline: none; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #777; + margin: 0; + width: 210px; + max-width: 100%; + display: block; + margin-bottom: 20px; + background: #fff; + padding: 0; +} + +input { + &[type="text"]:focus, &[type="password"]:focus, &[type="email"]:focus { + border: 1px solid #aaa; + color: #444; + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + } +} + +textarea { + &:focus { + border: 1px solid #aaa; + color: #444; + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); + } + min-height: 60px; +} + +label, legend { + display: block; + font-weight: bold; + font-size: 13px; +} + +select { + width: 220px; +} + +input[type="checkbox"] { + display: inline; +} + +label span, legend span { + font-weight: normal; + font-size: 13px; + color: #444; +} + +/* #Misc +================================================== */ + +.remove-bottom { + margin-bottom: 0 !important; +} + +.half-bottom { + margin-bottom: 10px !important; +} + +.add-bottom { + margin-bottom: 20px !important; +} \ No newline at end of file diff --git a/sass/layout.scss b/sass/layout.scss new file mode 100644 index 0000000..c2974a7 --- /dev/null +++ b/sass/layout.scss @@ -0,0 +1,55 @@ +/* + ** 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 Content + *================================================== + * #Site Styles + * #Page Styles + * #Media Queries + * #Font-Face + +/* #Site Styles + *================================================== + +/* #Page Styles + *================================================== + +/* #Media Queries + *================================================== + +/* Smaller than standard 960 (devices and browsers) +@media only screen and (max-width: 959px) + +/* Tablet Portrait size to standard 960 (devices and browsers) +@media only screen and (min-width: 768px) and (max-width: 959px) + +/* All Mobile Sizes (devices and browser) +@media only screen and (max-width: 767px) + +/* Mobile Landscape Size to Tablet Portrait (devices and browsers) +@media only screen and (min-width: 480px) and (max-width: 767px) + +/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) +@media only screen and (max-width: 479px) + +/* #Font-Face + *================================================== +/* This is the proper syntax for an @font-face file + * Just create a "fonts" folder at the root, + * copy your FontName into code below and remove + * comment brackets + +/* @font-face { + * font-family: 'FontName'; + * src: url('../fonts/FontName.eot'); + * src: url('../fonts/FontName.eot?iefix') format('eot'), + * url('../fonts/FontName.woff') format('woff'), + * url('../fonts/FontName.ttf') format('truetype'), + * url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); + * font-weight: normal; + * font-style: normal; } \ No newline at end of file diff --git a/sass/skeleton.scss b/sass/skeleton.scss new file mode 100644 index 0000000..038e25d --- /dev/null +++ b/sass/skeleton.scss @@ -0,0 +1,398 @@ +/* +* 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 960 Grid +================================================== */ + +.container { + position: relative; + width: 960px; + margin: 0 auto; + padding: 0; + .column, .columns { + float: left; + display: inline; + margin-left: 10px; + margin-right: 10px; + } +} + +.row { + margin-bottom: 20px; +} + +/* Nested Column Classes */ + +.column.alpha, .columns.alpha { + margin-left: 0; +} + +.column.omega, .columns.omega { + margin-right: 0; +} + +/* Base Grid */ + +.container { + .one { + &.column, &.columns { + width: 40px; + } + } + .two.columns { + width: 100px; + } + .three.columns { + width: 160px; + } + .four.columns { + width: 220px; + } + .five.columns { + width: 280px; + } + .six.columns { + width: 340px; + } + .seven.columns { + width: 400px; + } + .eight.columns { + width: 460px; + } + .nine.columns { + width: 520px; + } + .ten.columns { + width: 580px; + } + .eleven.columns { + width: 640px; + } + .twelve.columns { + width: 700px; + } + .thirteen.columns { + width: 760px; + } + .fourteen.columns { + width: 820px; + } + .fifteen.columns { + width: 880px; + } + .sixteen.columns { + width: 940px; + } + .one-third.column { + width: 300px; + } + .two-thirds.column { + width: 620px; + } + .offset-by-one { + padding-left: 60px; + } + .offset-by-two { + padding-left: 120px; + } + .offset-by-three { + padding-left: 180px; + } + .offset-by-four { + padding-left: 240px; + } + .offset-by-five { + padding-left: 300px; + } + .offset-by-six { + padding-left: 360px; + } + .offset-by-seven { + padding-left: 420px; + } + .offset-by-eight { + padding-left: 480px; + } + .offset-by-nine { + padding-left: 540px; + } + .offset-by-ten { + padding-left: 600px; + } + .offset-by-eleven { + padding-left: 660px; + } + .offset-by-twelve { + padding-left: 720px; + } + .offset-by-thirteen { + padding-left: 780px; + } + .offset-by-fourteen { + padding-left: 840px; + } + .offset-by-fifteen { + padding-left: 900px; + } + &:after { + content: "\0020"; + display: block; + height: 0; + clear: both; + visibility: hidden; + } +} + +/* Offsets */ + +/* #Tablet (Portrait) +================================================== */ + +/* Note: Design for a width of 768px */ + +@media only screen and (min-width: 768px) and (max-width: 959px) { + .container { + width: 768px; + .column, .columns { + margin-left: 10px; + margin-right: 10px; + } + } + .column.alpha, .columns.alpha { + margin-left: 0; + margin-right: 10px; + } + .column.omega, .columns.omega { + margin-right: 0; + margin-left: 10px; + } + .alpha.omega { + margin-left: 0; + margin-right: 0; + } + .container { + .one { + &.column, &.columns { + width: 28px; + } + } + .two.columns { + width: 76px; + } + .three.columns { + width: 124px; + } + .four.columns { + width: 172px; + } + .five.columns { + width: 220px; + } + .six.columns { + width: 268px; + } + .seven.columns { + width: 316px; + } + .eight.columns { + width: 364px; + } + .nine.columns { + width: 412px; + } + .ten.columns { + width: 460px; + } + .eleven.columns { + width: 508px; + } + .twelve.columns { + width: 556px; + } + .thirteen.columns { + width: 604px; + } + .fourteen.columns { + width: 652px; + } + .fifteen.columns { + width: 700px; + } + .sixteen.columns { + width: 748px; + } + .one-third.column { + width: 236px; + } + .two-thirds.column { + width: 492px; + } + .offset-by-one { + padding-left: 48px; + } + .offset-by-two { + padding-left: 96px; + } + .offset-by-three { + padding-left: 144px; + } + .offset-by-four { + padding-left: 192px; + } + .offset-by-five { + padding-left: 240px; + } + .offset-by-six { + padding-left: 288px; + } + .offset-by-seven { + padding-left: 336px; + } + .offset-by-eight { + padding-left: 384px; + } + .offset-by-nine { + padding-left: 432px; + } + .offset-by-ten { + padding-left: 480px; + } + .offset-by-eleven { + padding-left: 528px; + } + .offset-by-twelve { + padding-left: 576px; + } + .offset-by-thirteen { + padding-left: 624px; + } + .offset-by-fourteen { + padding-left: 672px; + } + .offset-by-fifteen { + padding-left: 720px; + } + } + /* Offsets */ +} + +/* #Mobile (Portrait) +================================================== */ + +/* Note: Design for a width of 320px */ + +@media only screen and (max-width: 767px) { + .container { + width: 300px; + .columns, .column { + margin: 0; + } + .one { + &.column, &.columns { + width: 300px; + } + } + .two.columns, .three.columns, .four.columns, .five.columns, .six.columns, .seven.columns, .eight.columns, .nine.columns, .ten.columns, .eleven.columns, .twelve.columns, .thirteen.columns, .fourteen.columns, .fifteen.columns, .sixteen.columns, .one-third.column, .two-thirds.column { + width: 300px; + } + .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .offset-by-twelve, .offset-by-thirteen, .offset-by-fourteen, .offset-by-fifteen { + padding-left: 0; + } + } + /* Offsets */ +} + +/* #Mobile (Landscape) +================================================== */ + +/* Note: Design for a width of 480px */ + +@media only screen and (min-width: 480px) and (max-width: 767px) { + .container { + width: 420px; + .columns, .column { + margin: 0; + } + .one { + &.column, &.columns { + width: 420px; + } + } + .two.columns, .three.columns, .four.columns, .five.columns, .six.columns, .seven.columns, .eight.columns, .nine.columns, .ten.columns, .eleven.columns, .twelve.columns, .thirteen.columns, .fourteen.columns, .fifteen.columns, .sixteen.columns, .one-third.column, .two-thirds.column { + width: 420px; + } + } +} + +/* #Clearing +================================================== */ + +/* Self Clearing Goodness */ + +/* Use clearfix class on parent to clear nested columns, +or wrap each row of columns in a
*/ + +.clearfix { + &:before, &:after { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; + } +} + +.row { + &:before { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; + } + &:after { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; + clear: both; + } +} + +.clearfix:after { + clear: both; +} + +.row, .clearfix { + zoom: 1; +} + +/* You can also use a
to clear columns */ + +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} \ No newline at end of file