Skip to content

Commit

Permalink
Bringing Sassy back (with SCSS).
Browse files Browse the repository at this point in the history
  • Loading branch information
trey committed Dec 19, 2011
1 parent 6283949 commit 1c76f15
Show file tree
Hide file tree
Showing 10 changed files with 189 additions and 24 deletions.
142 changes: 121 additions & 21 deletions 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'.
Expand All @@ -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; }
2 changes: 0 additions & 2 deletions css/img/README

This file was deleted.

2 changes: 2 additions & 0 deletions 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 `<img>` tags.
1 change: 1 addition & 0 deletions css/sass/README.md
@@ -0,0 +1 @@
From inside the base folder of this project, run `sass --watch css/sass:css`.
3 changes: 3 additions & 0 deletions 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 --- */
10 changes: 10 additions & 0 deletions css/sass/_mixins.scss
@@ -0,0 +1,10 @@
@mixin clearfix {
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
/* --- end of _mixins.scss --- */
3 changes: 3 additions & 0 deletions 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 --- */
48 changes: 48 additions & 0 deletions 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;
}
1 change: 0 additions & 1 deletion img/README

This file was deleted.

1 change: 1 addition & 0 deletions img/README.md
@@ -0,0 +1 @@
This folder is for foreground images only. Put all CSS-controlled background images in `css/img/`.

0 comments on commit 1c76f15

Please sign in to comment.