mirror of
https://github.com/zachacole/Simple-Grid.git
synced 2024-09-11 14:17:36 +03:00
Simple Grid initial commit
Simple css grid system.
This commit is contained in:
commit
b306a62cf4
148
grid.css
Normal file
148
grid.css
Normal 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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user