From 1c76f15792737272125fd8c8c0f2246ea12c6796 Mon Sep 17 00:00:00 2001 From: Trey Piepmeier Date: Mon, 19 Dec 2011 11:51:59 -0600 Subject: [PATCH] Bringing Sassy back (with SCSS). http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins Also renaming READMEs to be Markdown. --- css/base.css | 142 +++++++++++++++++++++++++++++++++++------- css/img/README | 2 - css/img/README.md | 2 + css/sass/README.md | 1 + css/sass/_ie.scss | 3 + css/sass/_mixins.scss | 10 +++ css/sass/_reset.scss | 3 + css/sass/base.scss | 48 ++++++++++++++ img/README | 1 - img/README.md | 1 + 10 files changed, 189 insertions(+), 24 deletions(-) delete mode 100644 css/img/README create mode 100644 css/img/README.md create mode 100644 css/sass/README.md create mode 100644 css/sass/_ie.scss create mode 100644 css/sass/_mixins.scss create mode 100644 css/sass/_reset.scss create mode 100644 css/sass/base.scss delete mode 100644 img/README create mode 100644 img/README.md diff --git a/css/base.css b/css/base.css index 642f764..77d2f1c 100644 --- a/css/base.css +++ b/css/base.css @@ -1,13 +1,81 @@ +/* Edit the SCSS */ /* http://html5doctor.com/html-5-reset-stylesheet/ */ -html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration: line-through;}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;} +html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; } -/* IE Fixes */ -.ie6 section, .ie7 section, .ie8 section, .ie6 .floatclear, .ie7 .floatclear, .ie8 .floatclear { zoom: 1; } -.ie6 .left, .ie6 .right { display: inline; } +body { + line-height: 1; } + +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote:before, blockquote:after, q:before, q:after { + content: ''; + content: none; } + +a { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; } + +ins { + background-color: #ff9; + color: #000; + text-decoration: none; } + +mark { + background-color: #ff9; + color: #000; + font-style: italic; + font-weight: bold; } + +del { + text-decoration: line-through; } + +abbr[title], dfn[title] { + border-bottom: 1px dotted; + cursor: help; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #cccccc; + margin: 1em 0; + padding: 0; } + +input, select { + vertical-align: middle; } +/* --- end of _reset.scss --- */ +/* --- end of _mixins.scss --- */ +.ie6 section, .ie7 section, .ie8 section, .ie6 .floatclear, .ie7 .floatclear, .ie8 .floatclear { + zoom: 1; } + +.ie6 .left, .ie6 .right { + display: inline; } + +/* --- end of _ie.scss --- */ body { - font: 14px "Helvetica Neue", Arial, sans-serif; -} + font: 14px "Helvetica Neue", Arial, sans-serif; } /* -------------------------------------------- Body copy style. Just add a class of 'copy'. @@ -17,32 +85,64 @@ body { .copy h3, .copy h4, .copy h5, -.copy h6 { margin: 0 0 10px; font-size: 20px; } -.copy p { line-height: 1.4em; } +.copy h6 { + margin: 0 0 10px; + font-size: 20px; } + +.copy p { + line-height: 1.4em; } + .copy p, .copy ul, -.copy ol { margin: 10px 0; } +.copy ol { + margin: 10px 0; } + .copy ul ul, .copy ol ol, .copy ol ul, -.copy ul ol { margin: 0; } -.copy li { margin-left: 20px; } -.copy ul li { list-style: disc; } -.copy ol li { list-style: decimal; } -.copy blockquote { padding-left: 15px; border-left: 2px solid #ccc; color: #666; } +.copy ul ol { + margin: 0; } + +.copy li { + margin-left: 20px; } + +.copy ul li { + list-style: disc; } + +.copy ol li { + list-style: decimal; } + +.copy blockquote { + padding-left: 15px; + border-left: 2px solid #ccc; + color: #666; } + /* http://simplebits.com/notebook/2008/08/14/ampersands.html */ -span.amp { font-family: Baskerville, Palatino, "Book Antiqua", serif; font-style: italic; } +span.amp { + font-family: Baskerville, Palatino, "Book Antiqua", serif; + font-style: italic; } /* ------------- Misc. Helpers ------------- */ -.center { text-align: center; } -.right { float: right; } -.left { float: left; } -.clear { clear: both; } +.center { + text-align: center; } + +.right { + float: right; } + +.left { + float: left; } + +.clear { + clear: both; } /* --------------- Clearing Floats --------------- */ -section:after, -.floatclear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } +section:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; } diff --git a/css/img/README b/css/img/README deleted file mode 100644 index 08297cc..0000000 --- a/css/img/README +++ /dev/null @@ -1,2 +0,0 @@ -Use this folder and its sub-folders for all CSS-controlled background images. -The base site.tld/img/ folder should only be used for images that are inside tags. diff --git a/css/img/README.md b/css/img/README.md new file mode 100644 index 0000000..32ea10e --- /dev/null +++ b/css/img/README.md @@ -0,0 +1,2 @@ +Use this folder and its sub-folders for all CSS-controlled background images. +The base `site.tld/img/` folder should only be used for images that are inside `` tags. diff --git a/css/sass/README.md b/css/sass/README.md new file mode 100644 index 0000000..d37a797 --- /dev/null +++ b/css/sass/README.md @@ -0,0 +1 @@ +From inside the base folder of this project, run `sass --watch css/sass:css`. diff --git a/css/sass/_ie.scss b/css/sass/_ie.scss new file mode 100644 index 0000000..a4d5a76 --- /dev/null +++ b/css/sass/_ie.scss @@ -0,0 +1,3 @@ +.ie6 section, .ie7 section, .ie8 section, .ie6 .floatclear, .ie7 .floatclear, .ie8 .floatclear { zoom: 1; } +.ie6 .left, .ie6 .right { display: inline; } +/* --- end of _ie.scss --- */ diff --git a/css/sass/_mixins.scss b/css/sass/_mixins.scss new file mode 100644 index 0000000..29a8c0b --- /dev/null +++ b/css/sass/_mixins.scss @@ -0,0 +1,10 @@ +@mixin clearfix { + &:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; + } +} +/* --- end of _mixins.scss --- */ diff --git a/css/sass/_reset.scss b/css/sass/_reset.scss new file mode 100644 index 0000000..5d36a16 --- /dev/null +++ b/css/sass/_reset.scss @@ -0,0 +1,3 @@ +/* http://html5doctor.com/html-5-reset-stylesheet/ */ +html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration: line-through;}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;} +/* --- end of _reset.scss --- */ diff --git a/css/sass/base.scss b/css/sass/base.scss new file mode 100644 index 0000000..0dcacfc --- /dev/null +++ b/css/sass/base.scss @@ -0,0 +1,48 @@ +/* Edit the SCSS */ + +@import "reset"; +@import "mixins"; +@import "ie"; + +body { + font: 14px "Helvetica Neue", Arial, sans-serif; +} + +/* -------------------------------------------- + Body copy style. Just add a class of 'copy'. + -------------------------------------------- */ +.copy h1, +.copy h2, +.copy h3, +.copy h4, +.copy h5, +.copy h6 { margin: 0 0 10px; font-size: 20px; } +.copy p { line-height: 1.4em; } +.copy p, +.copy ul, +.copy ol { margin: 10px 0; } +.copy ul ul, +.copy ol ol, +.copy ol ul, +.copy ul ol { margin: 0; } +.copy li { margin-left: 20px; } +.copy ul li { list-style: disc; } +.copy ol li { list-style: decimal; } +.copy blockquote { padding-left: 15px; border-left: 2px solid #ccc; color: #666; } +/* http://simplebits.com/notebook/2008/08/14/ampersands.html */ +span.amp { font-family: Baskerville, Palatino, "Book Antiqua", serif; font-style: italic; } + +/* ------------- + Misc. Helpers + ------------- */ +.center { text-align: center; } +.right { float: right; } +.left { float: left; } +.clear { clear: both; } + +/* --------------- + Clearing Floats + --------------- */ +section { + @include clearfix; +} diff --git a/img/README b/img/README deleted file mode 100644 index 995d35d..0000000 --- a/img/README +++ /dev/null @@ -1 +0,0 @@ -This folder is for foreground images only. Put all CSS-controlled background images in css/img/. diff --git a/img/README.md b/img/README.md new file mode 100644 index 0000000..049c39f --- /dev/null +++ b/img/README.md @@ -0,0 +1 @@ +This folder is for foreground images only. Put all CSS-controlled background images in `css/img/`.