website/static/style/fitgrid.css

324 lines
3.8 KiB
CSS
Raw Permalink Normal View History

2017-02-12 23:04:58 +01:00
/*
.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;
}
}