MOSNE

RESPONSIVE DESIGN GRIDS GENERATOR

for better and easier grid system, nestable and flexible:
fixed gutters, fluid columns, 4 breakpoints:

mobile
-480px

tablet
-768px

desktop
-1200px

big desktop
+1200px

beta version

calss A browsers and... ie8+

Based on:

Boon's Proportional grids

Twitter Bootstrap

Html5 Boilerplate

Modernizr + Respond

A

B

C

D

F

G

H

I

J

K

1/1

1/2

1/3

1/4

1/5

1/6

1/8

1/10

1/12

1/16

/*!
 * Bootstrap v2.2.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}
.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
a:hover,a:active{outline:0;}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
#map_canvas img,.google-maps img{max-width:none;}
button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle;}
button,input{*overflow:visible;line-height:normal;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;}
.hidden{display:none;visibility:hidden;}
.visible-phone{display:none !important;}
.visible-tablet{display:none !important;}
.hidden-desktop{display:none !important;}
.visible-desktop{display:inherit !important;}
@media (min-width:768px) and (max-width:979px){.hidden-desktop{display:inherit !important;} .visible-desktop{display:none !important ;} .visible-tablet{display:inherit !important;} .hidden-tablet{display:none !important;}}@media (max-width:767px){.hidden-desktop{display:inherit !important;} .visible-desktop{display:none !important;} .visible-phone{display:inherit !important;} .hidden-phone{display:none !important;}}
/* mosne reset*/

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; *behavior: url(js/boxsizing.htc); }
nav ul ,nav ul li{ list-style: none; margin: 0; padding: 0;}
body,html{ margin: 0;  padding: 0;}
a{outline:0; text-decoration: none;}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:none;}
p{margin: 0; margin-bottom: 1em;}
.hidden{display: none;}
body { margin: 0; font: 1em/1.5 sans-serif; }

/*
Author  : Boon
URL     : http://builtbyboon.com
Twitter	: http://twitter.com/mattberridge
---------------------------------------*/

/* -- Use this wrapper if you want to block-out a column with padding 
Taken from http://csswizardry.com/2011/10/the-island-object/) -- */

.row {
  margin-left: -1em; /* gutter */
  overflow: hidden;
  clear: both;
}

[class*="col-"]{
  float: left;
  padding-left: 1em; /* gutter */
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(js/boxsizing.htc); 
 }
 
 
/*!
 * MOSNE RESPONSIVE DESIGN GRIDS 
 * Author  : mosne
 * URL     : http://mosne.it
 * ---------------------------------------*/
 
.col-full{ width: 100%;} .col-1-16{ width: 6.25%;} .col-1-8{ width: 12.5%;} .col-3-16{ width: 18.75%;} .col-1-4{ width: 25%;} .col-5-16{ width: 31.25%;} .col-3-8{ width: 37.5%;} .col-7-16{ width: 43.75%;} .col-1-2{ width: 50%;} .col-9-16{ width: 56.25%;} .col-5-8{ width: 62.5%;} .col-11-16{ width: 68.75%;} .col-3-4{ width: 75%;} .col-13-16{ width: 81.25%;} .col-7-8{ width: 87.5%;} .col-15-16{ width: 93.75%;} .col-1-1{ width: 100%;} .col-1-12{ width: 8.3333333333333%;} .col-1-6{ width: 16.666666666667%;} .col-1-3{ width: 33.333333333333%;} .col-5-12{ width: 41.666666666667%;} .col-7-12{ width: 58.333333333333%;} .col-2-3{ width: 66.666666666667%;} .col-5-6{ width: 83.333333333333%;} .col-11-12{ width: 91.666666666667%;} .col-1-10{ width: 10%;} .col-1-5{ width: 20%;} .col-3-10{ width: 30%;} .col-2-5{ width: 40%;} .col-3-5{ width: 60%;} .col-7-10{ width: 70%;} .col-4-5{ width: 80%;} .col-9-10{ width: 90%;}

/* default responsive */
@media (max-width: 767px) { 
.col-1-16, .col-1-8, .col-3-16, .col-1-4, .col-5-16, .col-3-8, .col-7-16, .col-1-2, .col-9-16, .col-5-8, .col-11-16, .col-3-4, .col-13-16, .col-7-8, .col-15-16, .col-1-1, .col-1-12, .col-1-6, .col-1-3, .col-5-12, .col-7-12, .col-2-3, .col-5-6, .col-11-12, .col-1-10, .col-1-5, .col-3-10, .col-2-5, .col-3-5, .col-7-10, .col-4-5, .col-9-10, .col-full{ width: 100%;}
}

/* -- Breakpoint 4 (.b) BIG DESKTOP
------------------------------------------------------------- */
@media (min-width: 1200px)  {

.b-col-1-16{ width: 6.25%;} .b-col-1-8{ width: 12.5%;} .b-col-3-16{ width: 18.75%;} .b-col-1-4{ width: 25%;} .b-col-5-16{ width: 31.25%;} .b-col-3-8{ width: 37.5%;} .b-col-7-16{ width: 43.75%;} .b-col-1-2{ width: 50%;} .b-col-9-16{ width: 56.25%;} .b-col-5-8{ width: 62.5%;} .b-col-11-16{ width: 68.75%;} .b-col-3-4{ width: 75%;} .b-col-13-16{ width: 81.25%;} .b-col-7-8{ width: 87.5%;} .b-col-15-16{ width: 93.75%;} .b-col-1-1{ width: 100%;} .b-col-1-12{ width: 8.3333333333333%;} .b-col-1-6{ width: 16.666666666667%;} .b-col-1-3{ width: 33.333333333333%;} .b-col-5-12{ width: 41.666666666667%;} .b-col-7-12{ width: 58.333333333333%;} .b-col-2-3{ width: 66.666666666667%;} .b-col-5-6{ width: 83.333333333333%;} .b-col-11-12{ width: 91.666666666667%;} .b-col-1-10{ width: 10%;} .b-col-1-5{ width: 20%;} .b-col-3-10{ width: 30%;} .b-col-2-5{ width: 40%;} .b-col-3-5{ width: 60%;} .b-col-7-10{ width: 70%;} .b-col-4-5{ width: 80%;} .b-col-9-10{ width: 90%;} 
}

/* -- Breakpoint 3 (.d) DESKTOP
------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1199px)  {

.d-col-1-16{ width: 6.25%;} .d-col-1-8{ width: 12.5%;} .d-col-3-16{ width: 18.75%;} .d-col-1-4{ width: 25%;} .d-col-5-16{ width: 31.25%;} .d-col-3-8{ width: 37.5%;} .d-col-7-16{ width: 43.75%;} .d-col-1-2{ width: 50%;} .d-col-9-16{ width: 56.25%;} .d-col-5-8{ width: 62.5%;} .d-col-11-16{ width: 68.75%;} .d-col-3-4{ width: 75%;} .d-col-13-16{ width: 81.25%;} .d-col-7-8{ width: 87.5%;} .d-col-15-16{ width: 93.75%;} .d-col-1-1{ width: 100%;} .d-col-1-12{ width: 8.3333333333333%;} .d-col-1-6{ width: 16.666666666667%;} .d-col-1-3{ width: 33.333333333333%;} .d-col-5-12{ width: 41.666666666667%;} .d-col-7-12{ width: 58.333333333333%;} .d-col-2-3{ width: 66.666666666667%;} .d-col-5-6{ width: 83.333333333333%;} .d-col-11-12{ width: 91.666666666667%;} .d-col-1-10{ width: 10%;} .d-col-1-5{ width: 20%;} .d-col-3-10{ width: 30%;} .d-col-2-5{ width: 40%;} .d-col-3-5{ width: 60%;} .d-col-7-10{ width: 70%;} .d-col-4-5{ width: 80%;} .d-col-9-10{ width: 90%;} 
}

/* -- Breakpoint 2 (.t) TABLET
------------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {
.t-col-1-16{ width: 6.25%;} .t-col-1-8{ width: 12.5%;} .t-col-3-16{ width: 18.75%;} .t-col-1-4{ width: 25%;} .t-col-5-16{ width: 31.25%;} .t-col-3-8{ width: 37.5%;} .t-col-7-16{ width: 43.75%;} .t-col-1-2{ width: 50%;} .t-col-9-16{ width: 56.25%;} .t-col-5-8{ width: 62.5%;} .t-col-11-16{ width: 68.75%;} .t-col-3-4{ width: 75%;} .t-col-13-16{ width: 81.25%;} .t-col-7-8{ width: 87.5%;} .t-col-15-16{ width: 93.75%;} .t-col-1-1{ width: 100%;} .t-col-1-12{ width: 8.3333333333333%;} .t-col-1-6{ width: 16.666666666667%;} .t-col-1-3{ width: 33.333333333333%;} .t-col-5-12{ width: 41.666666666667%;} .t-col-7-12{ width: 58.333333333333%;} .t-col-2-3{ width: 66.666666666667%;} .t-col-5-6{ width: 83.333333333333%;} .t-col-11-12{ width: 91.666666666667%;} .t-col-1-10{ width: 10%;} .t-col-1-5{ width: 20%;} .t-col-3-10{ width: 30%;} .t-col-2-5{ width: 40%;} .t-col-3-5{ width: 60%;} .t-col-7-10{ width: 70%;} .t-col-4-5{ width: 80%;} .t-col-9-10{ width: 90%;} 
}

/* -- Breakpoint (.m) MOBILE
------------------------------------------------------------- */
@media (max-width: 480px) {

.m-col-1-16{ width: 6.25%;} .m-col-1-8{ width: 12.5%;} .m-col-3-16{ width: 18.75%;} .m-col-1-4{ width: 25%;} .m-col-5-16{ width: 31.25%;} .m-col-3-8{ width: 37.5%;} .m-col-7-16{ width: 43.75%;} .m-col-1-2{ width: 50%;} .m-col-9-16{ width: 56.25%;} .m-col-5-8{ width: 62.5%;} .m-col-11-16{ width: 68.75%;} .m-col-3-4{ width: 75%;} .m-col-13-16{ width: 81.25%;} .m-col-7-8{ width: 87.5%;} .m-col-15-16{ width: 93.75%;} .m-col-1-1{ width: 100%;} .m-col-1-12{ width: 8.3333333333333%;} .m-col-1-6{ width: 16.666666666667%;} .m-col-1-3{ width: 33.333333333333%;} .m-col-5-12{ width: 41.666666666667%;} .m-col-7-12{ width: 58.333333333333%;} .m-col-2-3{ width: 66.666666666667%;} .m-col-5-6{ width: 83.333333333333%;} .m-col-11-12{ width: 91.666666666667%;} .m-col-1-10{ width: 10%;} .m-col-1-5{ width: 20%;} .m-col-3-10{ width: 30%;} .m-col-2-5{ width: 40%;} .m-col-3-5{ width: 60%;} .m-col-7-10{ width: 70%;} .m-col-4-5{ width: 80%;} .m-col-9-10{ width: 90%;} 
}

MOSNE

RESPONSIVE DESIGN GRIDS GENERATOR

for better and easier grid system, nestable and flexible: fixed gutters, fluid columns, 4 breakpoints:

beta version

A

B

C

D

F

G

H

I

J

K

for better and easier grid system, nestable and flexible:
fixed gutters, fluid columns, 4 breakpoints: