123 lines
2.2 KiB
CSS
123 lines
2.2 KiB
CSS
|
/* 12 COLUMN : RESPONSIVE GRID SYSTEM
|
||
|
|
DEVELOPER : DENIS LEBLANC
|
||
|
|
URL : http://responsive.gs
|
||
|
|
VERSION : 3.0
|
||
|
|
LICENSE : GPL & MIT */
|
||
|
|
/* SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
*behavior: url(/scripts/boxsizing.htc);
|
||
|
|
/* If you need support for IE7 and lower make
|
||
|
|
sure the boxsizing.htc file is linked properly.
|
||
|
|
More info here: https://github.com/Schepp/box-sizing-polyfill */ }
|
||
|
|
|
||
|
|
/* MAIN CONTAINER
|
||
|
|
Set the width to whatever you want the width of your site to be. */
|
||
|
|
.container {
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto; }
|
||
|
|
|
||
|
|
/* SELF CLEARING FLOATS - CLEARFIX METHOD */
|
||
|
|
.container:after,
|
||
|
|
.row:after,
|
||
|
|
.col:after,
|
||
|
|
.clr:after,
|
||
|
|
.group:after {
|
||
|
|
content: "";
|
||
|
|
display: table;
|
||
|
|
clear: both; }
|
||
|
|
|
||
|
|
/* DEFAULT ROW STYLES
|
||
|
|
Set bottom padding according to preference */
|
||
|
|
.row {
|
||
|
|
padding-bottom: 0em; }
|
||
|
|
|
||
|
|
/* DEFAULT COLUMN STYLES */
|
||
|
|
.col {
|
||
|
|
display: block;
|
||
|
|
float: left;
|
||
|
|
width: 100%; }
|
||
|
|
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
.gutters .col {
|
||
|
|
margin-left: 2%; }
|
||
|
|
|
||
|
|
.gutters .col:first-child {
|
||
|
|
margin-left: 0; } }
|
||
|
|
/* COLUMN WIDTH ON DISPLAYS +768px
|
||
|
|
You might need to play with media queries here to suite your design. */
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
.span_1 {
|
||
|
|
width: 8.33333333333%; }
|
||
|
|
|
||
|
|
.span_2 {
|
||
|
|
width: 16.6666666667%; }
|
||
|
|
|
||
|
|
.span_3 {
|
||
|
|
width: 25%; }
|
||
|
|
|
||
|
|
.span_4 {
|
||
|
|
width: 33.3333333333%; }
|
||
|
|
|
||
|
|
.span_5 {
|
||
|
|
width: 41.6666666667%; }
|
||
|
|
|
||
|
|
.span_6 {
|
||
|
|
width: 50%; }
|
||
|
|
|
||
|
|
.span_7 {
|
||
|
|
width: 58.3333333333%; }
|
||
|
|
|
||
|
|
.span_8 {
|
||
|
|
width: 66.6666666667%; }
|
||
|
|
|
||
|
|
.span_9 {
|
||
|
|
width: 75%; }
|
||
|
|
|
||
|
|
.span_10 {
|
||
|
|
width: 83.3333333333%; }
|
||
|
|
|
||
|
|
.span_11 {
|
||
|
|
width: 91.6666666667%; }
|
||
|
|
|
||
|
|
.span_12 {
|
||
|
|
width: 100%; }
|
||
|
|
|
||
|
|
.gutters .span_1 {
|
||
|
|
width: 6.5%; }
|
||
|
|
|
||
|
|
.gutters .span_2 {
|
||
|
|
width: 15.0%; }
|
||
|
|
|
||
|
|
.gutters .span_3 {
|
||
|
|
width: 23.5%; }
|
||
|
|
|
||
|
|
.gutters .span_4 {
|
||
|
|
width: 32.0%; }
|
||
|
|
|
||
|
|
.gutters .span_5 {
|
||
|
|
width: 40.5%; }
|
||
|
|
|
||
|
|
.gutters .span_6 {
|
||
|
|
width: 49.0%; }
|
||
|
|
|
||
|
|
.gutters .span_7 {
|
||
|
|
width: 57.5%; }
|
||
|
|
|
||
|
|
.gutters .span_8 {
|
||
|
|
width: 66.0%; }
|
||
|
|
|
||
|
|
.gutters .span_9 {
|
||
|
|
width: 74.5%; }
|
||
|
|
|
||
|
|
.gutters .span_10 {
|
||
|
|
width: 83.0%; }
|
||
|
|
|
||
|
|
.gutters .span_11 {
|
||
|
|
width: 91.5%; }
|
||
|
|
|
||
|
|
.gutters .span_12 {
|
||
|
|
width: 100%; } }
|