324 lines
3.8 KiB
CSS
324 lines
3.8 KiB
CSS
|
/*
|
||
|
.fitgrd - responsive grid system
|
||
|
open http://www.fitgrd.com for more information
|
||
|
download at https://github.com/jayalai/fitgrd
|
||
|
Licensed under GPL and MIT.
|
||
|
*/
|
||
|
|
||
|
|
||
|
* {
|
||
|
-moz-box-sizing: border-box;
|
||
|
-webkit-box-sizing: border-box;
|
||
|
box-sizing: border-box;
|
||
|
/* remember: box-sizing is not supported by IE7 :( */
|
||
|
outline: none;
|
||
|
vertical-align: top;
|
||
|
}
|
||
|
|
||
|
.center {
|
||
|
max-width: 65em;
|
||
|
margin: 0 auto;
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.row {
|
||
|
margin: 0 .5em;
|
||
|
padding: 0.5% 1em 0;
|
||
|
overflow: hidden;
|
||
|
height: 1%;
|
||
|
*zoom: 1;
|
||
|
min-height: 1%;
|
||
|
}
|
||
|
|
||
|
.clearfix {
|
||
|
height:0;
|
||
|
clear:both;
|
||
|
display:block;
|
||
|
overflow:hidden;
|
||
|
visibility:hidden;
|
||
|
width:0;
|
||
|
height:0;
|
||
|
}
|
||
|
|
||
|
/* =======================================
|
||
|
columns w/ margin
|
||
|
======================================= */
|
||
|
.fg1,.fg2,.fg3,.fg4,.fg5,.fg6,.fg7,.fg8,.fg9,.fg10,.fg11,.fg12 {
|
||
|
margin:0 2% 0;
|
||
|
padding:0;
|
||
|
/* in case of IE7 it's better not to use a padding because of the box-model issue */
|
||
|
float:left;
|
||
|
position:relative;
|
||
|
}
|
||
|
|
||
|
.fg12 {
|
||
|
width:96%;
|
||
|
}
|
||
|
|
||
|
.fg11 {
|
||
|
width:87.66%;
|
||
|
}
|
||
|
|
||
|
.fg10 {
|
||
|
width:79.33%;
|
||
|
}
|
||
|
|
||
|
.fg9 {
|
||
|
width:71%;
|
||
|
}
|
||
|
|
||
|
.fg8 {
|
||
|
width:62.66%;
|
||
|
}
|
||
|
|
||
|
.fg7 {
|
||
|
width:54.33%;
|
||
|
}
|
||
|
|
||
|
.fg6 {
|
||
|
width:46%;
|
||
|
}
|
||
|
|
||
|
.fg5 {
|
||
|
width:37.66%;
|
||
|
}
|
||
|
|
||
|
.fg4 {
|
||
|
width:29.33%;
|
||
|
}
|
||
|
|
||
|
.fg3 {
|
||
|
width:21%;
|
||
|
}
|
||
|
|
||
|
.fg2 {
|
||
|
width:12.66%;
|
||
|
}
|
||
|
|
||
|
.fg1 {
|
||
|
width:4.33%;
|
||
|
}
|
||
|
|
||
|
/* =======================================
|
||
|
push w/ columns
|
||
|
======================================= */
|
||
|
|
||
|
.push12 {
|
||
|
margin-left:100%;
|
||
|
}
|
||
|
|
||
|
.push11 {
|
||
|
margin-left:93.66%;
|
||
|
}
|
||
|
|
||
|
.push10 {
|
||
|
margin-left:85.33%;
|
||
|
}
|
||
|
|
||
|
.push9 {
|
||
|
margin-left:77%;
|
||
|
}
|
||
|
|
||
|
.push8 {
|
||
|
margin-left:68.66%;
|
||
|
}
|
||
|
|
||
|
.push7 {
|
||
|
margin-left:60.33%;
|
||
|
}
|
||
|
|
||
|
.push6 {
|
||
|
margin-left:52%;
|
||
|
}
|
||
|
|
||
|
.push5 {
|
||
|
margin-left:43.66%;
|
||
|
}
|
||
|
|
||
|
.push4 {
|
||
|
margin-left:35.33%;
|
||
|
}
|
||
|
|
||
|
.push3 {
|
||
|
margin-left:27%;
|
||
|
}
|
||
|
|
||
|
.push2 {
|
||
|
margin-left:18.66%;
|
||
|
}
|
||
|
|
||
|
.push1 {
|
||
|
margin-left:10.33%;
|
||
|
}
|
||
|
|
||
|
/* =======================================
|
||
|
columns w/o margin
|
||
|
======================================= */
|
||
|
|
||
|
.fg-no-gutter{
|
||
|
padding: 0 3.5%;
|
||
|
margin-top: 0;
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter > [class*="fg"] {
|
||
|
margin:0;
|
||
|
padding:0;
|
||
|
float:left;
|
||
|
position:relative;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter img{
|
||
|
max-width: 100%;
|
||
|
max-height: 100%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .fg12 {
|
||
|
width:100%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .fg11 {
|
||
|
width:91.66%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .fg10 {
|
||
|
width:83.33%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .fg9 {
|
||
|
width:75%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .fg8 {
|
||
|
width:66.66%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .fg7 {
|
||
|
width:58.33%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .fg6 {
|
||
|
width:50%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .fg5 {
|
||
|
width:41.66%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .fg4 {
|
||
|
width:33.33%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .fg3 {
|
||
|
width:25%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .fg2 {
|
||
|
width:16.66%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .fg1 {
|
||
|
width:8.33%;
|
||
|
}
|
||
|
|
||
|
/* =======================================
|
||
|
push columns w/o margin
|
||
|
======================================= */
|
||
|
|
||
|
.fg-no-gutter .push12 {
|
||
|
margin-left:100%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .push11 {
|
||
|
margin-left:91.66%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .push10 {
|
||
|
margin-left:83.33%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .push9 {
|
||
|
margin-left:75%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .push8 {
|
||
|
margin-left:66.66%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .push7 {
|
||
|
margin-left:58.33%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .push6 {
|
||
|
margin-left:50%;
|
||
|
}
|
||
|
|
||
|
.fg12 .push5 {
|
||
|
margin-left:41.66%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .push4 {
|
||
|
margin-left:33.33%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .push3 {
|
||
|
margin-left:25%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .push2 {
|
||
|
margin-left:16.66%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter .push1 {
|
||
|
margin-left:8.33%;
|
||
|
}
|
||
|
|
||
|
.fg-no-mobile{
|
||
|
display: block !important;
|
||
|
}
|
||
|
|
||
|
.fg-no-desktop{
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
/* =======================================
|
||
|
media queries
|
||
|
======================================= */
|
||
|
|
||
|
/* tablet size */
|
||
|
@media screen and (max-width: 48em ) {
|
||
|
|
||
|
|
||
|
|
||
|
.row{
|
||
|
padding: 0 1em;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
.fg1,.fg2{
|
||
|
width: 46%;
|
||
|
margin-bottom: 1em;
|
||
|
}
|
||
|
|
||
|
.fg3,.fg4,.fg5,.fg6,.fg7,.fg8,.fg9,.fg10,.fg11,.fg12 {
|
||
|
margin:0 2% 1em;
|
||
|
padding:0;
|
||
|
width:96%;
|
||
|
}
|
||
|
|
||
|
.fg-no-gutter > [class*="fg"] {
|
||
|
width: 50%;
|
||
|
}
|
||
|
|
||
|
.fg-no-mobile{
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
.fg-no-desktop{
|
||
|
display: block !important;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
|