Created
November 8, 2015 15:51
-
-
Save billpatrianakos/ad8038440b78e0588d68 to your computer and use it in GitHub Desktop.
Sample stylesheet for weekend workshop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Main Stylesheet | |
* | |
* Do not code any styles within this file. | |
* | |
* USAGE: | |
* Import all styles into this file. Start with | |
* baseline styles at the top, site styles in the | |
* middle, then mobile styles at the end. | |
*/ | |
::selection { | |
background: #D07025; | |
color: #f7f7f7; | |
} | |
::moz-selection { | |
background: #D07025; | |
color: #f7f7f7; | |
} | |
/** | |
* Site-wide color scheme | |
*/ | |
/** | |
* Global mixins | |
* | |
* A general set of mixins for use in | |
* various other places. More specific sets | |
* should be put in their own file. | |
*/ | |
/*:::: Border radius mixins ::::*/ | |
/*:::: Transitions, transforms, gradients, and animation ::::*/ | |
/** | |
* Grid System | |
* | |
* TheFractionless grid is the Clever grid which is taken from [Sndicate](https://github.com/Sndicate/sndicate) | |
* which itself is lifted from the [Semantic Grid System](http://semantic.gs) | |
*/ | |
.container { | |
padding: 0 20px; | |
} | |
.row, | |
.row-loose { | |
display: block; | |
width: 100%; | |
max-width: 1140px; | |
min-width: 755px; | |
margin: 0 auto; | |
padding: 0.5rem 0; | |
overflow: hidden; | |
*zoom: 1; | |
} | |
.row:before, | |
.row:after { | |
content: " "; | |
display: table; | |
} | |
.row:after { | |
clear: both; | |
} | |
.row.no-pad { | |
padding: 0; | |
} | |
.row-loose { | |
padding: 2.5rem 0; | |
} | |
.col-12 { | |
display: block; | |
position: relative; | |
float: left; | |
width: 100%; | |
margin-right: 3%; | |
} | |
.col-12:last-child { | |
margin-right: 0; | |
} | |
.push-12 { | |
left: 103%; | |
} | |
.pull-12 { | |
right: 103%; | |
} | |
.col-11 { | |
display: block; | |
position: relative; | |
float: left; | |
width: 91.41666667%; | |
margin-right: 3%; | |
} | |
.col-11:last-child { | |
margin-right: 0; | |
} | |
.push-11 { | |
left: 94.41666667%; | |
} | |
.pull-11 { | |
right: 94.41666667%; | |
} | |
.col-10 { | |
display: block; | |
position: relative; | |
float: left; | |
width: 82.83333333%; | |
margin-right: 3%; | |
} | |
.col-10:last-child { | |
margin-right: 0; | |
} | |
.push-10 { | |
left: 85.83333333%; | |
} | |
.pull-10 { | |
right: 85.83333333%; | |
} | |
.col-9 { | |
display: block; | |
position: relative; | |
float: left; | |
width: 74.25%; | |
margin-right: 3%; | |
} | |
.col-9:last-child { | |
margin-right: 0; | |
} | |
.push-9 { | |
left: 77.25%; | |
} | |
.pull-9 { | |
right: 77.25%; | |
} | |
.col-8 { | |
display: block; | |
position: relative; | |
float: left; | |
width: 65.66666667%; | |
margin-right: 3%; | |
} | |
.col-8:last-child { | |
margin-right: 0; | |
} | |
.push-8 { | |
left: 68.66666667%; | |
} | |
.pull-8 { | |
right: 68.66666667%; | |
} | |
.col-7 { | |
display: block; | |
position: relative; | |
float: left; | |
width: 57.08333333%; | |
margin-right: 3%; | |
} | |
.col-7:last-child { | |
margin-right: 0; | |
} | |
.push-7 { | |
left: 60.08333333%; | |
} | |
.pull-7 { | |
right: 60.08333333%; | |
} | |
.col-6 { | |
display: block; | |
position: relative; | |
float: left; | |
width: 48.5%; | |
margin-right: 3%; | |
} | |
.col-6:last-child { | |
margin-right: 0; | |
} | |
.push-6 { | |
left: 51.5%; | |
} | |
.pull-6 { | |
right: 51.5%; | |
} | |
.col-5 { | |
display: block; | |
position: relative; | |
float: left; | |
width: 39.91666667%; | |
margin-right: 3%; | |
} | |
.col-5:last-child { | |
margin-right: 0; | |
} | |
.push-5 { | |
left: 42.91666667%; | |
} | |
.pull-5 { | |
right: 42.91666667%; | |
} | |
.col-4 { | |
display: block; | |
position: relative; | |
float: left; | |
width: 31.33333333%; | |
margin-right: 3%; | |
} | |
.col-4:last-child { | |
margin-right: 0; | |
} | |
.push-4 { | |
left: 34.33333333%; | |
} | |
.pull-4 { | |
right: 34.33333333%; | |
} | |
.col-3 { | |
display: block; | |
position: relative; | |
float: left; | |
width: 22.75%; | |
margin-right: 3%; | |
} | |
.col-3:last-child { | |
margin-right: 0; | |
} | |
.push-3 { | |
left: 25.75%; | |
} | |
.pull-3 { | |
right: 25.75%; | |
} | |
.col-2 { | |
display: block; | |
position: relative; | |
float: left; | |
width: 14.16666667%; | |
margin-right: 3%; | |
} | |
.col-2:last-child { | |
margin-right: 0; | |
} | |
.push-2 { | |
left: 17.16666667%; | |
} | |
.pull-2 { | |
right: 17.16666667%; | |
} | |
.col-1 { | |
display: block; | |
position: relative; | |
float: left; | |
width: 5.58333333%; | |
margin-right: 3%; | |
} | |
.col-1:last-child { | |
margin-right: 0; | |
} | |
.push-1 { | |
left: 8.58333333%; | |
} | |
.pull-1 { | |
right: 8.58333333%; | |
} | |
img, | |
object, | |
embed { | |
max-width: 100%; | |
} | |
img { | |
height: auto; | |
} | |
/** | |
* Fractionless Type | |
* | |
* Base typography styles adapted | |
* from [Typebase](https://github.com/devinhunt/typebase.css/blob/master/src/typebase.less) | |
*/ | |
html { | |
font-family: 'Helvetica Neue', Helvetica, 'Lucida Grande', Verdana, Arial, sans-serif; | |
font-weight: 400; | |
font-size: 150; | |
-webkit-font-smoothing: antialiased; | |
} | |
p, | |
dl dt, | |
dl dd { | |
font-family: 'Helvetica Neue', Helvetica, 'Lucida Grande', Verdana, Arial, sans-serif; | |
font-weight: 400; | |
line-height: 1.5rem; | |
margin-top: 1.5rem; | |
margin-bottom: 0; | |
color: #505050; | |
} | |
p:first-child { | |
margin-top: 0; | |
} | |
ul, | |
ol { | |
margin-top: 1.5rem; | |
margin-bottom: 1.5rem; | |
font-size: 1rem; | |
} | |
ul li, | |
ol li { | |
line-height: 1.5rem; | |
color: #505050; | |
} | |
ul ul, | |
ol ul, | |
ul ol, | |
ol ol { | |
margin-top: 0; | |
margin-bottom: 0; | |
} | |
blockquote { | |
line-height: 1.5rem; | |
margin-top: 1.5rem; | |
margin-bottom: 1.5rem; | |
} | |
dl dt { | |
font-weight: 700; | |
} | |
dl.faq dt { | |
font-size: 1.414rem; | |
line-height: 1.999396rem; | |
font-family: Georgia, 'Times New Roman', serif !important; | |
} | |
dl.faq dd { | |
font-size: 1rem; | |
margin-left: 0; | |
} | |
/* Headings */ | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
/* Change heading typefaces here */ | |
font-family: Georgia, 'Times New Roman', serif; | |
font-weight: 700; | |
margin-top: 1.5rem; | |
margin-bottom: 0; | |
line-height: 1.5rem; | |
color: #272727; | |
} | |
h1:first-child, | |
h2:first-child, | |
h3:first-child, | |
h4:first-child, | |
h5:first-child, | |
h6:first-child { | |
margin-top: 0; | |
} | |
h1, | |
.h1 { | |
font-size: 4.242rem; | |
line-height: 4.5rem; | |
margin-top: 3rem; | |
} | |
h2, | |
.h2 { | |
font-size: 2.828rem; | |
line-height: 3rem; | |
margin-top: 3rem; | |
} | |
h3, | |
.h3 { | |
font-size: 1.414rem; | |
} | |
h4, | |
.h4 { | |
font-size: 0.94266667rem; | |
} | |
h5, | |
.h5 { | |
font-size: 0.5656rem; | |
} | |
h6, | |
.h6 { | |
font-size: 0.404rem; | |
} | |
/* Tables */ | |
table { | |
margin-top: 1.5rem; | |
border-spacing: 0; | |
border-collapse: collapse; | |
} | |
table td, | |
table th { | |
padding: 0; | |
line-height: 36px; | |
} | |
code { | |
vertical-align: bottom; | |
} | |
/* Leading paragraph text */ | |
.lead { | |
font-size: 1.414rem; | |
line-height: 1.5; | |
} | |
/* Hug a the block above you */ | |
.hug { | |
margin-top: 0; | |
} | |
.light { | |
font-weight: 300; | |
} | |
.slant { | |
font-style: italic; | |
} | |
strong { | |
font-weight: 700; | |
} | |
strong em { | |
font-style: italic; | |
} | |
.lg { | |
font-size: 1.2rem; | |
line-height: 1.6968rem; | |
} | |
.sans-serif { | |
font-family: 'Helvetica Neue', Helvetica, 'Lucida Grande', Verdana, Arial, sans-serif; | |
} | |
.serif { | |
font-family: Georgia, 'Times New Roman', serif; | |
} | |
.centered-text { | |
text-align: center; | |
} | |
a { | |
color: #D07025; | |
text-decoration: none; | |
} | |
a:visited { | |
color: #D07025; | |
} | |
a:hover { | |
color: #ba6421; | |
} | |
/*:::: Smaller screens ::::*/ | |
.mobile-show { | |
display: none; | |
} | |
/*:::: Mobile ::::*/ | |
@media handheld, only screen and (max-device-width: 450px) { | |
.mobile-show { | |
display: inline-block; | |
} | |
body, | |
.container, | |
.row, | |
.row-loose, | |
.row-loose { | |
font-size: 1.1rem; | |
width: 100%; | |
min-width: 0; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 0; | |
padding-right: 0; | |
} | |
.row .col-12, | |
.row-loose .col-12 { | |
width: auto; | |
float: none; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 20px; | |
padding-right: 20px; | |
*zoom: 1; | |
} | |
.row .col-12:before, | |
.row-loose .col-12:before, | |
.row .col-12:after, | |
.row-loose .col-12:after { | |
content: " "; | |
display: table; | |
} | |
.row .col-12:after, | |
.row-loose .col-12:after { | |
clear: both; | |
} | |
.row .push-12, | |
.row-loose .push-12 { | |
left: 0; | |
} | |
.row .pull-12, | |
.row-loose .pull-12 { | |
right: 0; | |
} | |
.row .col-11, | |
.row-loose .col-11 { | |
width: auto; | |
float: none; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 20px; | |
padding-right: 20px; | |
*zoom: 1; | |
} | |
.row .col-11:before, | |
.row-loose .col-11:before, | |
.row .col-11:after, | |
.row-loose .col-11:after { | |
content: " "; | |
display: table; | |
} | |
.row .col-11:after, | |
.row-loose .col-11:after { | |
clear: both; | |
} | |
.row .push-11, | |
.row-loose .push-11 { | |
left: 0; | |
} | |
.row .pull-11, | |
.row-loose .pull-11 { | |
right: 0; | |
} | |
.row .col-10, | |
.row-loose .col-10 { | |
width: auto; | |
float: none; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 20px; | |
padding-right: 20px; | |
*zoom: 1; | |
} | |
.row .col-10:before, | |
.row-loose .col-10:before, | |
.row .col-10:after, | |
.row-loose .col-10:after { | |
content: " "; | |
display: table; | |
} | |
.row .col-10:after, | |
.row-loose .col-10:after { | |
clear: both; | |
} | |
.row .push-10, | |
.row-loose .push-10 { | |
left: 0; | |
} | |
.row .pull-10, | |
.row-loose .pull-10 { | |
right: 0; | |
} | |
.row .col-9, | |
.row-loose .col-9 { | |
width: auto; | |
float: none; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 20px; | |
padding-right: 20px; | |
*zoom: 1; | |
} | |
.row .col-9:before, | |
.row-loose .col-9:before, | |
.row .col-9:after, | |
.row-loose .col-9:after { | |
content: " "; | |
display: table; | |
} | |
.row .col-9:after, | |
.row-loose .col-9:after { | |
clear: both; | |
} | |
.row .push-9, | |
.row-loose .push-9 { | |
left: 0; | |
} | |
.row .pull-9, | |
.row-loose .pull-9 { | |
right: 0; | |
} | |
.row .col-8, | |
.row-loose .col-8 { | |
width: auto; | |
float: none; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 20px; | |
padding-right: 20px; | |
*zoom: 1; | |
} | |
.row .col-8:before, | |
.row-loose .col-8:before, | |
.row .col-8:after, | |
.row-loose .col-8:after { | |
content: " "; | |
display: table; | |
} | |
.row .col-8:after, | |
.row-loose .col-8:after { | |
clear: both; | |
} | |
.row .push-8, | |
.row-loose .push-8 { | |
left: 0; | |
} | |
.row .pull-8, | |
.row-loose .pull-8 { | |
right: 0; | |
} | |
.row .col-7, | |
.row-loose .col-7 { | |
width: auto; | |
float: none; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 20px; | |
padding-right: 20px; | |
*zoom: 1; | |
} | |
.row .col-7:before, | |
.row-loose .col-7:before, | |
.row .col-7:after, | |
.row-loose .col-7:after { | |
content: " "; | |
display: table; | |
} | |
.row .col-7:after, | |
.row-loose .col-7:after { | |
clear: both; | |
} | |
.row .push-7, | |
.row-loose .push-7 { | |
left: 0; | |
} | |
.row .pull-7, | |
.row-loose .pull-7 { | |
right: 0; | |
} | |
.row .col-6, | |
.row-loose .col-6 { | |
width: auto; | |
float: none; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 20px; | |
padding-right: 20px; | |
*zoom: 1; | |
} | |
.row .col-6:before, | |
.row-loose .col-6:before, | |
.row .col-6:after, | |
.row-loose .col-6:after { | |
content: " "; | |
display: table; | |
} | |
.row .col-6:after, | |
.row-loose .col-6:after { | |
clear: both; | |
} | |
.row .push-6, | |
.row-loose .push-6 { | |
left: 0; | |
} | |
.row .pull-6, | |
.row-loose .pull-6 { | |
right: 0; | |
} | |
.row .col-5, | |
.row-loose .col-5 { | |
width: auto; | |
float: none; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 20px; | |
padding-right: 20px; | |
*zoom: 1; | |
} | |
.row .col-5:before, | |
.row-loose .col-5:before, | |
.row .col-5:after, | |
.row-loose .col-5:after { | |
content: " "; | |
display: table; | |
} | |
.row .col-5:after, | |
.row-loose .col-5:after { | |
clear: both; | |
} | |
.row .push-5, | |
.row-loose .push-5 { | |
left: 0; | |
} | |
.row .pull-5, | |
.row-loose .pull-5 { | |
right: 0; | |
} | |
.row .col-4, | |
.row-loose .col-4 { | |
width: auto; | |
float: none; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 20px; | |
padding-right: 20px; | |
*zoom: 1; | |
} | |
.row .col-4:before, | |
.row-loose .col-4:before, | |
.row .col-4:after, | |
.row-loose .col-4:after { | |
content: " "; | |
display: table; | |
} | |
.row .col-4:after, | |
.row-loose .col-4:after { | |
clear: both; | |
} | |
.row .push-4, | |
.row-loose .push-4 { | |
left: 0; | |
} | |
.row .pull-4, | |
.row-loose .pull-4 { | |
right: 0; | |
} | |
.row .col-3, | |
.row-loose .col-3 { | |
width: auto; | |
float: none; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 20px; | |
padding-right: 20px; | |
*zoom: 1; | |
} | |
.row .col-3:before, | |
.row-loose .col-3:before, | |
.row .col-3:after, | |
.row-loose .col-3:after { | |
content: " "; | |
display: table; | |
} | |
.row .col-3:after, | |
.row-loose .col-3:after { | |
clear: both; | |
} | |
.row .push-3, | |
.row-loose .push-3 { | |
left: 0; | |
} | |
.row .pull-3, | |
.row-loose .pull-3 { | |
right: 0; | |
} | |
.row .col-2, | |
.row-loose .col-2 { | |
width: auto; | |
float: none; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 20px; | |
padding-right: 20px; | |
*zoom: 1; | |
} | |
.row .col-2:before, | |
.row-loose .col-2:before, | |
.row .col-2:after, | |
.row-loose .col-2:after { | |
content: " "; | |
display: table; | |
} | |
.row .col-2:after, | |
.row-loose .col-2:after { | |
clear: both; | |
} | |
.row .push-2, | |
.row-loose .push-2 { | |
left: 0; | |
} | |
.row .pull-2, | |
.row-loose .pull-2 { | |
right: 0; | |
} | |
.row .col-1, | |
.row-loose .col-1 { | |
width: auto; | |
float: none; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 20px; | |
padding-right: 20px; | |
*zoom: 1; | |
} | |
.row .col-1:before, | |
.row-loose .col-1:before, | |
.row .col-1:after, | |
.row-loose .col-1:after { | |
content: " "; | |
display: table; | |
} | |
.row .col-1:after, | |
.row-loose .col-1:after { | |
clear: both; | |
} | |
.row .push-1, | |
.row-loose .push-1 { | |
left: 0; | |
} | |
.row .pull-1, | |
.row-loose .pull-1 { | |
right: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment