You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
3.5 KiB
167 lines
3.5 KiB
/* |
|
99Lime.com HTML KickStart by Joshua Gatcke |
|
kickstart-grids.css |
|
|
|
DO NOT EDIT THIS FILE unless you know what you are doing. |
|
*/ |
|
/*--------------------------------- |
|
GRID/COLUMNS |
|
----------------------------------- |
|
tinyfluidgrid.com |
|
& girlfriendnyc.com |
|
with changes by 99Lime |
|
-----------------------------------*/ |
|
/* |
|
& Columns : 12 |
|
& Gutter %: 20% |
|
& MaxWidth: 1280px |
|
*/ |
|
|
|
.grid{ |
|
max-width:1220px; |
|
margin:0 auto; |
|
padding:0 2em; |
|
} |
|
|
|
.grid.flex{ |
|
width:100%; |
|
max-width:100%; |
|
padding:0 2%; |
|
padding:2em; |
|
} |
|
|
|
.row{ |
|
display:block; |
|
overflow:hidden; |
|
clear:both; |
|
} |
|
|
|
*[class*="col_"].alpha{margin-left:0;} |
|
*[class*="col_"].omega{margin-right:0;} |
|
|
|
.col_1 { width: 6.6666666666667%; } |
|
.col_2 { width: 15%; } |
|
.col_3 { width: 23.333333333333%; } |
|
.col_4 { width: 31.666666666667%; } |
|
.col_5 { width: 40%; } |
|
.col_6 { width: 48.333333333333%; } |
|
.col_7 { width: 56.666666666667%; } |
|
.col_8 { width: 65%; } |
|
.col_9 { width: 73.333333333333%; } |
|
.col_10 { width: 81.666666666667%; } |
|
.col_11 { width: 90%; } |
|
.col_12 { width: 98.333333333333%; } |
|
|
|
*[class*="col_"]{ |
|
margin-left: 0.83333333333333%; |
|
margin-right: 0.83333333333333%; |
|
margin-top:0.5em; |
|
margin-bottom:0.5em; |
|
float: left; |
|
display: block; |
|
} |
|
|
|
.grid img{ |
|
max-width: 100%; |
|
height:auto; |
|
} |
|
|
|
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0} |
|
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} |
|
* html .clearfix, *:first-child+html .clearfix{zoom:1} |
|
|
|
/* Viewable Grids |
|
To view your grids, add the class .visible to any grid container. |
|
This will add a background color so you can see the layout of your grids. |
|
*/ |
|
*[class*="col_"].visible{ |
|
background:#eee; |
|
border:1px dotted #ccc; |
|
} |
|
|
|
|
|
/*--------------------------------- |
|
Responsive Grid Media Queries - 1280, 1024, 768, 480 |
|
1280-1024 - desktop (default grid) |
|
1024-768 - tablet landscape |
|
768-480 - tablet |
|
480-less - phone landscape & smaller |
|
-----------------------------------*/ |
|
@media all and (min-width: 1024px) and (max-width: 1280px) { |
|
|
|
.grid *[class*="col_"]{} |
|
.grid{max-width: 1024px;} |
|
.show-desktop {display:block;} |
|
.hide-desktop {display:none;} |
|
.show-tablet {display:none;} |
|
.hide-tablet {display:block;} |
|
.show-phone {display:none;} |
|
.hide-phone {display:block;} |
|
|
|
} |
|
|
|
@media all and (min-width: 768px) and (max-width: 1024px) { |
|
|
|
.grid *[class*="col_"]{} |
|
.grid{max-width: 768px;} |
|
.show-desktop {display:none;} |
|
.hide-desktop {display:block;} |
|
.show-tablet {display:block;} |
|
.hide-tablet {display:none;} |
|
.show-phone {display:none;} |
|
.hide-phone {display:block;} |
|
|
|
} |
|
|
|
|
|
@media all and (min-width: 480px) and (max-width: 768px) { |
|
|
|
.grid *[class*="col_"]{ |
|
float:none; |
|
width:auto; |
|
clear:both; |
|
display:block; |
|
} |
|
|
|
/* columns inside of columns */ |
|
.grid *[class*="col_"] [class*="col_"]{ |
|
margin-left:0; |
|
margin-right:0; |
|
width:100%; |
|
} |
|
|
|
.grid{max-width: 480px;} |
|
.show-desktop {display:none;} |
|
.hide-desktop {display:block;} |
|
.show-tablet {display:block;} |
|
.hide-tablet {display:none;} |
|
.show-phone {display:none;} |
|
.hide-phone {display:block;} |
|
|
|
} |
|
|
|
@media all and (max-width: 480px) { |
|
|
|
.grid *[class*="col_"]{ |
|
float:none; |
|
width:auto; |
|
clear:both; |
|
display:block; |
|
} |
|
|
|
/* columns inside of columns */ |
|
.grid *[class*="col_"] [class*="col_"]{ |
|
margin-left:0; |
|
margin-right:0; |
|
width:100%; |
|
} |
|
|
|
.grid{max-width: 100%;/*320*/} |
|
.show-desktop {display:none;} |
|
.hide-desktop {display:block;} |
|
.show-tablet {display:none;} |
|
.hide-tablet {display:block;} |
|
.show-phone {display:block;} |
|
.hide-phone {display:none;} |
|
|
|
}
|
|
|