Simple Grid initial commit

Simple css grid system.
This commit is contained in:
Zach Cole 2016-04-09 15:52:27 -07:00
commit b306a62cf4

148
grid.css Normal file
View File

@ -0,0 +1,148 @@
/**
*** ZACH COLE
*** (C) 2016
**/
/* UNIVERSAL */
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
left: 0;
top: 0;
}
/* ROOT FONT STYLES */
* {
font-family: 'Open Sans', Helvetica, sans-serif;
color: #333447;
}
/* TYPOGRAPHY */
h1 {
font-size: 2.5rem;
line-height: 1.25;
}
h2 {
font-size: 1.8rem;
line-height: 1.2;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.1rem;
}
h5 {
font-size: 0.9rem;
}
h6 {
font-size: 0.7rem;
}
p {
font-size: 1.1rem;
font-weight: 400;
line-height: 1.8;
}
/* ==== GRID SYSTEM ==== */
.container {
width: 90%;
margin: 0 auto;
}
.row {
position: relative;
width: 100%;
}
.row [class^="col"] {
float: left;
margin: 8px 2%;
min-height: 2px;
}
[class^="col"] {
width: 96%;
}
.clear::after {
content: "";
display: table;
clear: both;
}
@media only screen and (min-width: 540px) {
.container {
width: 80%;
}
}
@media only screen and (min-width: 720px) {
.col-1-12 {
width: 4.33%;
}
.col-2-12 {
width: 12.66%;
}
.col-3-12 {
width: 21%;
}
.col-4-12 {
width: 29.33%;
}
.col-5-12 {
width: 37.66%;
}
.col-6-12 {
width: 46%;
}
.col-7-12 {
width: 54.33%;
}
.col-8-12 {
width: 62.66%;
}
.col-9-12 {
width: 71%;
}
.col-10-12 {
width: 79.33%;
}
.col-11-12 {
width: 87.66%;
}
.col-12-12 {
width: 96%;
}
}
@media only screen and (min-width: 960px) {
.container {
width: 75%;
max-width: 960px;
}
}