mistergraphx
10/31/2015 - 7:08 AM
Neat UnSemantic grid helpers
Neat UnSemantic grid helpers
> 1%
last 2 versions <main container>
<div row>
<p column>Full-width is default</p>
<p column="2 +3">2 +3</p>
</div>
<div row>
<section column>
<p>8</p>
<p column="1 of 8 +5">1 of 8 + 1</p>
</section>
</div>
<div row>
<section column="2">
<h2>2</h2>
<p column="1 of 2">1 of 2</p>
<p column="1 of 2">1 of 2</p>
</section>
<section column="4 +2">
<h2>4 + 2</h2>
<p column="1 of 4">1 of 4</p>
<p column="2 of 4 +1">2 of 4 +1</p>
</section>
</div>
</main>/*
@url - https://www.sassmeister.com/gist/ccc5b07e65e2531517d7
@version - 1.0.0
*/
html {
box-sizing: border-box;
}
*, *::after, *::before {
box-sizing: inherit;
}
body:before {
background-image: -webkit-linear-gradient(left, transparent 0, #E6F6FF 0, #E6F6FF 11.04167%, transparent 11.04167%, transparent 12.70833%, #E6F6FF 12.70833%, #E6F6FF 23.75%, transparent 23.75%, transparent 25.41667%, #E6F6FF 25.41667%, #E6F6FF 36.45833%, transparent 36.45833%, transparent 38.125%, #E6F6FF 38.125%, #E6F6FF 49.16667%, transparent 49.16667%, transparent 50.83333%, #E6F6FF 50.83333%, #E6F6FF 61.875%, transparent 61.875%, transparent 63.54167%, #E6F6FF 63.54167%, #E6F6FF 74.58333%, transparent 74.58333%, transparent 76.25%, #E6F6FF 76.25%, #E6F6FF 87.29167%, transparent 87.29167%, transparent 88.95833%, #E6F6FF 88.95833%, #E6F6FF 100%, transparent 100%);
background-image: -webkit-linear-gradient(right, transparent 0, #E6F6FF 0, #E6F6FF 11.04167%, transparent 11.04167%, transparent 12.70833%, #E6F6FF 12.70833%, #E6F6FF 23.75%, transparent 23.75%, transparent 25.41667%, #E6F6FF 25.41667%, #E6F6FF 36.45833%, transparent 36.45833%, transparent 38.125%, #E6F6FF 38.125%, #E6F6FF 49.16667%, transparent 49.16667%, transparent 50.83333%, #E6F6FF 50.83333%, #E6F6FF 61.875%, transparent 61.875%, transparent 63.54167%, #E6F6FF 63.54167%, #E6F6FF 74.58333%, transparent 74.58333%, transparent 76.25%, #E6F6FF 76.25%, #E6F6FF 87.29167%, transparent 87.29167%, transparent 88.95833%, #E6F6FF 88.95833%, #E6F6FF 100%, transparent 100%);
background-image: linear-gradient(to left, transparent 0, #E6F6FF 0, #E6F6FF 11.04167%, transparent 11.04167%, transparent 12.70833%, #E6F6FF 12.70833%, #E6F6FF 23.75%, transparent 23.75%, transparent 25.41667%, #E6F6FF 25.41667%, #E6F6FF 36.45833%, transparent 36.45833%, transparent 38.125%, #E6F6FF 38.125%, #E6F6FF 49.16667%, transparent 49.16667%, transparent 50.83333%, #E6F6FF 50.83333%, #E6F6FF 61.875%, transparent 61.875%, transparent 63.54167%, #E6F6FF 63.54167%, #E6F6FF 74.58333%, transparent 74.58333%, transparent 76.25%, #E6F6FF 76.25%, #E6F6FF 87.29167%, transparent 87.29167%, transparent 88.95833%, #E6F6FF 88.95833%, #E6F6FF 100%, transparent 100%);
content: "";
display: inline-block;
height: 100%;
left: 0;
margin: 0 auto;
max-width: 960px;
opacity: 0.6;
pointer-events: none;
position: fixed;
right: 0;
width: 100%;
z-index: -1;
}
/* # @function vertical-rythme()
@global $em-base - Bourbon/neat global
@global $base-line-height - Bourbon/neat global
@param $multiplier - number of time to repeat the base line height define by $em-base
@param $offset (0 !default) - Optional A scope to add
@param $em-base (16 !default)
@return - value in em
Styleguide libs.functions.vertical-rythm
*/
/** #Neat Unsemantic Grid System
Unsemantig grids helpers using Neat, inpirated by atGrid.
Markup:
<main container>
<div row>
<p column="8">Column with a width of 8 columns</p>
<p column="1 +3">Column with a width of 1 columns offset 3</p>
</div>
<div row>
<section column="2">
<p>Column with a width of 2 columns</p>
</section>
<section column="4 +2">
<p>Column with a width of 4 columns
and an offset of 2 columns</p>
</section>
</div>
<div row>
<section column="2">
<h2 row>Nesting</h2>
<p column="1 of 2">Column with a width of 1 of 2 columns</p>
<p column="1 of 2">Column with a width of 1 of 2 columns</p>
</section>
<section column="4 +2">
<p column="1 of 4">Column with 1 of 4 columns</p>
<p column="2 of 4 +1">Column with 2 of 4 columns and an offset of +1 columns</p>
</section>
</div>
</main>
$prefix {string} (false !default) - A prefix for the atribute column ex: `data-` for `data-column`
@see - [ConciseCss - atGrid](https://github.com/ConciseCSS/concise.css/blob/master/src/core/utils/_atgrid.scss)
@see - [CSS Attributes - W3school](http://www.w3schools.com/css/css_attribute_selectors.asp)
@see - [CSS Attributes - CSStriks](https://css-tricks.com/attribute-selectors/)
Styleguide helpers.neatUnSemanticGrid
*/
[container] {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
[container]::after {
clear: both;
content: "";
display: table;
}
[row] {
display: block;
}
[row]::after {
clear: both;
content: "";
display: table;
}
[column] {
float: left;
display: block;
margin-right: 1.66667%;
width: 100%;
padding: 5px;
background-color: rgba(192, 192, 192, 0.5);
}
[column]:last-child {
margin-right: 0;
}
@media screen and (min-width: 30em) {
/* Create columns */
[column~="1"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 11.04167%;
}
[column~="1"]:last-child {
margin-right: 0;
}
[column~="2"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 23.75%;
}
[column~="2"]:last-child {
margin-right: 0;
}
[column~="3"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 36.45833%;
}
[column~="3"]:last-child {
margin-right: 0;
}
[column~="4"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 49.16667%;
}
[column~="4"]:last-child {
margin-right: 0;
}
[column~="5"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 61.875%;
}
[column~="5"]:last-child {
margin-right: 0;
}
[column~="6"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 74.58333%;
}
[column~="6"]:last-child {
margin-right: 0;
}
[column~="7"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 87.29167%;
}
[column~="7"]:last-child {
margin-right: 0;
}
[column~="8"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 100%;
}
[column~="8"]:last-child {
margin-right: 0;
}
/* Offset for columns */
[column*="+1"] {
margin-left: 12.70833%;
}
[column*="-1"] {
margin-left: -12.70833%;
}
[column*="+2"] {
margin-left: 25.41667%;
}
[column*="-2"] {
margin-left: -25.41667%;
}
[column*="+3"] {
margin-left: 38.125%;
}
[column*="-3"] {
margin-left: -38.125%;
}
[column*="+4"] {
margin-left: 50.83333%;
}
[column*="-4"] {
margin-left: -50.83333%;
}
[column*="+5"] {
margin-left: 63.54167%;
}
[column*="-5"] {
margin-left: -63.54167%;
}
[column*="+6"] {
margin-left: 76.25%;
}
[column*="-6"] {
margin-left: -76.25%;
}
[column*="+7"] {
margin-left: 88.95833%;
}
[column*="-7"] {
margin-left: -88.95833%;
}
[column*="+8"] {
margin-left: 101.66667%;
}
[column*="-8"] {
margin-left: -101.66667%;
}
/* Nesting x of y & shifting + */
[column^="1 of 8"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 11.04167%;
}
[column^="1 of 8"]:last-child {
margin-right: 0;
}
[column^="1 of 8"][column*="+1"] {
margin-left: 12.70833%;
}
[column^="1 of 8"][column*="+2"] {
margin-left: 25.41667%;
}
[column^="1 of 8"][column*="+3"] {
margin-left: 38.125%;
}
[column^="1 of 8"][column*="+4"] {
margin-left: 50.83333%;
}
[column^="1 of 8"][column*="+5"] {
margin-left: 63.54167%;
}
[column^="1 of 8"][column*="+6"] {
margin-left: 76.25%;
}
[column^="1 of 8"][column*="+7"] {
margin-left: 88.95833%;
}
[column^="1 of 1"] {
float: left;
display: block;
margin-right: 15.09434%;
width: 100%;
}
[column^="1 of 1"]:last-child {
margin-right: 0;
}
[column^="1 of 1"][column*="+1"] {
margin-left: 115.09434%;
}
[column^="1 of 1"][column*="+2"] {
margin-left: 230.18868%;
}
[column^="1 of 1"][column*="+3"] {
margin-left: 345.28302%;
}
[column^="1 of 1"][column*="+4"] {
margin-left: 460.37736%;
}
[column^="1 of 1"][column*="+5"] {
margin-left: 575.4717%;
}
[column^="1 of 1"][column*="+6"] {
margin-left: 690.56604%;
}
[column^="1 of 1"][column*="+7"] {
margin-left: 805.66038%;
}
[column^="1 of 2"] {
float: left;
display: block;
margin-right: 7.01754%;
width: 46.49123%;
}
[column^="1 of 2"]:last-child {
margin-right: 0;
}
[column^="1 of 2"][column*="+1"] {
margin-left: 53.50877%;
}
[column^="1 of 2"][column*="+2"] {
margin-left: 107.01754%;
}
[column^="1 of 2"][column*="+3"] {
margin-left: 160.52632%;
}
[column^="1 of 2"][column*="+4"] {
margin-left: 214.03509%;
}
[column^="1 of 2"][column*="+5"] {
margin-left: 267.54386%;
}
[column^="1 of 2"][column*="+6"] {
margin-left: 321.05263%;
}
[column^="1 of 2"][column*="+7"] {
margin-left: 374.5614%;
}
[column^="1 of 3"] {
float: left;
display: block;
margin-right: 4.57143%;
width: 30.28571%;
}
[column^="1 of 3"]:last-child {
margin-right: 0;
}
[column^="1 of 3"][column*="+1"] {
margin-left: 34.85714%;
}
[column^="1 of 3"][column*="+2"] {
margin-left: 69.71429%;
}
[column^="1 of 3"][column*="+3"] {
margin-left: 104.57143%;
}
[column^="1 of 3"][column*="+4"] {
margin-left: 139.42857%;
}
[column^="1 of 3"][column*="+5"] {
margin-left: 174.28571%;
}
[column^="1 of 3"][column*="+6"] {
margin-left: 209.14286%;
}
[column^="1 of 3"][column*="+7"] {
margin-left: 244%;
}
[column^="1 of 4"] {
float: left;
display: block;
margin-right: 3.38983%;
width: 22.45763%;
}
[column^="1 of 4"]:last-child {
margin-right: 0;
}
[column^="1 of 4"][column*="+1"] {
margin-left: 25.84746%;
}
[column^="1 of 4"][column*="+2"] {
margin-left: 51.69492%;
}
[column^="1 of 4"][column*="+3"] {
margin-left: 77.54237%;
}
[column^="1 of 4"][column*="+4"] {
margin-left: 103.38983%;
}
[column^="1 of 4"][column*="+5"] {
margin-left: 129.23729%;
}
[column^="1 of 4"][column*="+6"] {
margin-left: 155.08475%;
}
[column^="1 of 4"][column*="+7"] {
margin-left: 180.9322%;
}
[column^="1 of 5"] {
float: left;
display: block;
margin-right: 2.6936%;
width: 17.84512%;
}
[column^="1 of 5"]:last-child {
margin-right: 0;
}
[column^="1 of 5"][column*="+1"] {
margin-left: 20.53872%;
}
[column^="1 of 5"][column*="+2"] {
margin-left: 41.07744%;
}
[column^="1 of 5"][column*="+3"] {
margin-left: 61.61616%;
}
[column^="1 of 5"][column*="+4"] {
margin-left: 82.15488%;
}
[column^="1 of 5"][column*="+5"] {
margin-left: 102.6936%;
}
[column^="1 of 5"][column*="+6"] {
margin-left: 123.23232%;
}
[column^="1 of 5"][column*="+7"] {
margin-left: 143.77104%;
}
[column^="1 of 6"] {
float: left;
display: block;
margin-right: 2.23464%;
width: 14.80447%;
}
[column^="1 of 6"]:last-child {
margin-right: 0;
}
[column^="1 of 6"][column*="+1"] {
margin-left: 17.03911%;
}
[column^="1 of 6"][column*="+2"] {
margin-left: 34.07821%;
}
[column^="1 of 6"][column*="+3"] {
margin-left: 51.11732%;
}
[column^="1 of 6"][column*="+4"] {
margin-left: 68.15642%;
}
[column^="1 of 6"][column*="+5"] {
margin-left: 85.19553%;
}
[column^="1 of 6"][column*="+6"] {
margin-left: 102.23464%;
}
[column^="1 of 6"][column*="+7"] {
margin-left: 119.27374%;
}
[column^="1 of 7"] {
float: left;
display: block;
margin-right: 1.90931%;
width: 12.64916%;
}
[column^="1 of 7"]:last-child {
margin-right: 0;
}
[column^="1 of 7"][column*="+1"] {
margin-left: 14.55847%;
}
[column^="1 of 7"][column*="+2"] {
margin-left: 29.11695%;
}
[column^="1 of 7"][column*="+3"] {
margin-left: 43.67542%;
}
[column^="1 of 7"][column*="+4"] {
margin-left: 58.23389%;
}
[column^="1 of 7"][column*="+5"] {
margin-left: 72.79236%;
}
[column^="1 of 7"][column*="+6"] {
margin-left: 87.35084%;
}
[column^="1 of 7"][column*="+7"] {
margin-left: 101.90931%;
}
[column^="2 of 8"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 23.75%;
}
[column^="2 of 8"]:last-child {
margin-right: 0;
}
[column^="2 of 8"][column*="+1"] {
margin-left: 12.70833%;
}
[column^="2 of 8"][column*="+2"] {
margin-left: 25.41667%;
}
[column^="2 of 8"][column*="+3"] {
margin-left: 38.125%;
}
[column^="2 of 8"][column*="+4"] {
margin-left: 50.83333%;
}
[column^="2 of 8"][column*="+5"] {
margin-left: 63.54167%;
}
[column^="2 of 8"][column*="+6"] {
margin-left: 76.25%;
}
[column^="2 of 8"][column*="+7"] {
margin-left: 88.95833%;
}
[column^="2 of 1"] {
float: left;
display: block;
margin-right: 15.09434%;
width: 215.09434%;
}
[column^="2 of 1"]:last-child {
margin-right: 0;
}
[column^="2 of 1"][column*="+1"] {
margin-left: 115.09434%;
}
[column^="2 of 1"][column*="+2"] {
margin-left: 230.18868%;
}
[column^="2 of 1"][column*="+3"] {
margin-left: 345.28302%;
}
[column^="2 of 1"][column*="+4"] {
margin-left: 460.37736%;
}
[column^="2 of 1"][column*="+5"] {
margin-left: 575.4717%;
}
[column^="2 of 1"][column*="+6"] {
margin-left: 690.56604%;
}
[column^="2 of 1"][column*="+7"] {
margin-left: 805.66038%;
}
[column^="2 of 2"] {
float: left;
display: block;
margin-right: 7.01754%;
width: 100%;
}
[column^="2 of 2"]:last-child {
margin-right: 0;
}
[column^="2 of 2"][column*="+1"] {
margin-left: 53.50877%;
}
[column^="2 of 2"][column*="+2"] {
margin-left: 107.01754%;
}
[column^="2 of 2"][column*="+3"] {
margin-left: 160.52632%;
}
[column^="2 of 2"][column*="+4"] {
margin-left: 214.03509%;
}
[column^="2 of 2"][column*="+5"] {
margin-left: 267.54386%;
}
[column^="2 of 2"][column*="+6"] {
margin-left: 321.05263%;
}
[column^="2 of 2"][column*="+7"] {
margin-left: 374.5614%;
}
[column^="2 of 3"] {
float: left;
display: block;
margin-right: 4.57143%;
width: 65.14286%;
}
[column^="2 of 3"]:last-child {
margin-right: 0;
}
[column^="2 of 3"][column*="+1"] {
margin-left: 34.85714%;
}
[column^="2 of 3"][column*="+2"] {
margin-left: 69.71429%;
}
[column^="2 of 3"][column*="+3"] {
margin-left: 104.57143%;
}
[column^="2 of 3"][column*="+4"] {
margin-left: 139.42857%;
}
[column^="2 of 3"][column*="+5"] {
margin-left: 174.28571%;
}
[column^="2 of 3"][column*="+6"] {
margin-left: 209.14286%;
}
[column^="2 of 3"][column*="+7"] {
margin-left: 244%;
}
[column^="2 of 4"] {
float: left;
display: block;
margin-right: 3.38983%;
width: 48.30508%;
}
[column^="2 of 4"]:last-child {
margin-right: 0;
}
[column^="2 of 4"][column*="+1"] {
margin-left: 25.84746%;
}
[column^="2 of 4"][column*="+2"] {
margin-left: 51.69492%;
}
[column^="2 of 4"][column*="+3"] {
margin-left: 77.54237%;
}
[column^="2 of 4"][column*="+4"] {
margin-left: 103.38983%;
}
[column^="2 of 4"][column*="+5"] {
margin-left: 129.23729%;
}
[column^="2 of 4"][column*="+6"] {
margin-left: 155.08475%;
}
[column^="2 of 4"][column*="+7"] {
margin-left: 180.9322%;
}
[column^="2 of 5"] {
float: left;
display: block;
margin-right: 2.6936%;
width: 38.38384%;
}
[column^="2 of 5"]:last-child {
margin-right: 0;
}
[column^="2 of 5"][column*="+1"] {
margin-left: 20.53872%;
}
[column^="2 of 5"][column*="+2"] {
margin-left: 41.07744%;
}
[column^="2 of 5"][column*="+3"] {
margin-left: 61.61616%;
}
[column^="2 of 5"][column*="+4"] {
margin-left: 82.15488%;
}
[column^="2 of 5"][column*="+5"] {
margin-left: 102.6936%;
}
[column^="2 of 5"][column*="+6"] {
margin-left: 123.23232%;
}
[column^="2 of 5"][column*="+7"] {
margin-left: 143.77104%;
}
[column^="2 of 6"] {
float: left;
display: block;
margin-right: 2.23464%;
width: 31.84358%;
}
[column^="2 of 6"]:last-child {
margin-right: 0;
}
[column^="2 of 6"][column*="+1"] {
margin-left: 17.03911%;
}
[column^="2 of 6"][column*="+2"] {
margin-left: 34.07821%;
}
[column^="2 of 6"][column*="+3"] {
margin-left: 51.11732%;
}
[column^="2 of 6"][column*="+4"] {
margin-left: 68.15642%;
}
[column^="2 of 6"][column*="+5"] {
margin-left: 85.19553%;
}
[column^="2 of 6"][column*="+6"] {
margin-left: 102.23464%;
}
[column^="2 of 6"][column*="+7"] {
margin-left: 119.27374%;
}
[column^="2 of 7"] {
float: left;
display: block;
margin-right: 1.90931%;
width: 27.20764%;
}
[column^="2 of 7"]:last-child {
margin-right: 0;
}
[column^="2 of 7"][column*="+1"] {
margin-left: 14.55847%;
}
[column^="2 of 7"][column*="+2"] {
margin-left: 29.11695%;
}
[column^="2 of 7"][column*="+3"] {
margin-left: 43.67542%;
}
[column^="2 of 7"][column*="+4"] {
margin-left: 58.23389%;
}
[column^="2 of 7"][column*="+5"] {
margin-left: 72.79236%;
}
[column^="2 of 7"][column*="+6"] {
margin-left: 87.35084%;
}
[column^="2 of 7"][column*="+7"] {
margin-left: 101.90931%;
}
[column^="3 of 8"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 36.45833%;
}
[column^="3 of 8"]:last-child {
margin-right: 0;
}
[column^="3 of 8"][column*="+1"] {
margin-left: 12.70833%;
}
[column^="3 of 8"][column*="+2"] {
margin-left: 25.41667%;
}
[column^="3 of 8"][column*="+3"] {
margin-left: 38.125%;
}
[column^="3 of 8"][column*="+4"] {
margin-left: 50.83333%;
}
[column^="3 of 8"][column*="+5"] {
margin-left: 63.54167%;
}
[column^="3 of 8"][column*="+6"] {
margin-left: 76.25%;
}
[column^="3 of 8"][column*="+7"] {
margin-left: 88.95833%;
}
[column^="3 of 1"] {
float: left;
display: block;
margin-right: 15.09434%;
width: 330.18868%;
}
[column^="3 of 1"]:last-child {
margin-right: 0;
}
[column^="3 of 1"][column*="+1"] {
margin-left: 115.09434%;
}
[column^="3 of 1"][column*="+2"] {
margin-left: 230.18868%;
}
[column^="3 of 1"][column*="+3"] {
margin-left: 345.28302%;
}
[column^="3 of 1"][column*="+4"] {
margin-left: 460.37736%;
}
[column^="3 of 1"][column*="+5"] {
margin-left: 575.4717%;
}
[column^="3 of 1"][column*="+6"] {
margin-left: 690.56604%;
}
[column^="3 of 1"][column*="+7"] {
margin-left: 805.66038%;
}
[column^="3 of 2"] {
float: left;
display: block;
margin-right: 7.01754%;
width: 153.50877%;
}
[column^="3 of 2"]:last-child {
margin-right: 0;
}
[column^="3 of 2"][column*="+1"] {
margin-left: 53.50877%;
}
[column^="3 of 2"][column*="+2"] {
margin-left: 107.01754%;
}
[column^="3 of 2"][column*="+3"] {
margin-left: 160.52632%;
}
[column^="3 of 2"][column*="+4"] {
margin-left: 214.03509%;
}
[column^="3 of 2"][column*="+5"] {
margin-left: 267.54386%;
}
[column^="3 of 2"][column*="+6"] {
margin-left: 321.05263%;
}
[column^="3 of 2"][column*="+7"] {
margin-left: 374.5614%;
}
[column^="3 of 3"] {
float: left;
display: block;
margin-right: 4.57143%;
width: 100%;
}
[column^="3 of 3"]:last-child {
margin-right: 0;
}
[column^="3 of 3"][column*="+1"] {
margin-left: 34.85714%;
}
[column^="3 of 3"][column*="+2"] {
margin-left: 69.71429%;
}
[column^="3 of 3"][column*="+3"] {
margin-left: 104.57143%;
}
[column^="3 of 3"][column*="+4"] {
margin-left: 139.42857%;
}
[column^="3 of 3"][column*="+5"] {
margin-left: 174.28571%;
}
[column^="3 of 3"][column*="+6"] {
margin-left: 209.14286%;
}
[column^="3 of 3"][column*="+7"] {
margin-left: 244%;
}
[column^="3 of 4"] {
float: left;
display: block;
margin-right: 3.38983%;
width: 74.15254%;
}
[column^="3 of 4"]:last-child {
margin-right: 0;
}
[column^="3 of 4"][column*="+1"] {
margin-left: 25.84746%;
}
[column^="3 of 4"][column*="+2"] {
margin-left: 51.69492%;
}
[column^="3 of 4"][column*="+3"] {
margin-left: 77.54237%;
}
[column^="3 of 4"][column*="+4"] {
margin-left: 103.38983%;
}
[column^="3 of 4"][column*="+5"] {
margin-left: 129.23729%;
}
[column^="3 of 4"][column*="+6"] {
margin-left: 155.08475%;
}
[column^="3 of 4"][column*="+7"] {
margin-left: 180.9322%;
}
[column^="3 of 5"] {
float: left;
display: block;
margin-right: 2.6936%;
width: 58.92256%;
}
[column^="3 of 5"]:last-child {
margin-right: 0;
}
[column^="3 of 5"][column*="+1"] {
margin-left: 20.53872%;
}
[column^="3 of 5"][column*="+2"] {
margin-left: 41.07744%;
}
[column^="3 of 5"][column*="+3"] {
margin-left: 61.61616%;
}
[column^="3 of 5"][column*="+4"] {
margin-left: 82.15488%;
}
[column^="3 of 5"][column*="+5"] {
margin-left: 102.6936%;
}
[column^="3 of 5"][column*="+6"] {
margin-left: 123.23232%;
}
[column^="3 of 5"][column*="+7"] {
margin-left: 143.77104%;
}
[column^="3 of 6"] {
float: left;
display: block;
margin-right: 2.23464%;
width: 48.88268%;
}
[column^="3 of 6"]:last-child {
margin-right: 0;
}
[column^="3 of 6"][column*="+1"] {
margin-left: 17.03911%;
}
[column^="3 of 6"][column*="+2"] {
margin-left: 34.07821%;
}
[column^="3 of 6"][column*="+3"] {
margin-left: 51.11732%;
}
[column^="3 of 6"][column*="+4"] {
margin-left: 68.15642%;
}
[column^="3 of 6"][column*="+5"] {
margin-left: 85.19553%;
}
[column^="3 of 6"][column*="+6"] {
margin-left: 102.23464%;
}
[column^="3 of 6"][column*="+7"] {
margin-left: 119.27374%;
}
[column^="3 of 7"] {
float: left;
display: block;
margin-right: 1.90931%;
width: 41.76611%;
}
[column^="3 of 7"]:last-child {
margin-right: 0;
}
[column^="3 of 7"][column*="+1"] {
margin-left: 14.55847%;
}
[column^="3 of 7"][column*="+2"] {
margin-left: 29.11695%;
}
[column^="3 of 7"][column*="+3"] {
margin-left: 43.67542%;
}
[column^="3 of 7"][column*="+4"] {
margin-left: 58.23389%;
}
[column^="3 of 7"][column*="+5"] {
margin-left: 72.79236%;
}
[column^="3 of 7"][column*="+6"] {
margin-left: 87.35084%;
}
[column^="3 of 7"][column*="+7"] {
margin-left: 101.90931%;
}
[column^="4 of 8"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 49.16667%;
}
[column^="4 of 8"]:last-child {
margin-right: 0;
}
[column^="4 of 8"][column*="+1"] {
margin-left: 12.70833%;
}
[column^="4 of 8"][column*="+2"] {
margin-left: 25.41667%;
}
[column^="4 of 8"][column*="+3"] {
margin-left: 38.125%;
}
[column^="4 of 8"][column*="+4"] {
margin-left: 50.83333%;
}
[column^="4 of 8"][column*="+5"] {
margin-left: 63.54167%;
}
[column^="4 of 8"][column*="+6"] {
margin-left: 76.25%;
}
[column^="4 of 8"][column*="+7"] {
margin-left: 88.95833%;
}
[column^="4 of 1"] {
float: left;
display: block;
margin-right: 15.09434%;
width: 445.28302%;
}
[column^="4 of 1"]:last-child {
margin-right: 0;
}
[column^="4 of 1"][column*="+1"] {
margin-left: 115.09434%;
}
[column^="4 of 1"][column*="+2"] {
margin-left: 230.18868%;
}
[column^="4 of 1"][column*="+3"] {
margin-left: 345.28302%;
}
[column^="4 of 1"][column*="+4"] {
margin-left: 460.37736%;
}
[column^="4 of 1"][column*="+5"] {
margin-left: 575.4717%;
}
[column^="4 of 1"][column*="+6"] {
margin-left: 690.56604%;
}
[column^="4 of 1"][column*="+7"] {
margin-left: 805.66038%;
}
[column^="4 of 2"] {
float: left;
display: block;
margin-right: 7.01754%;
width: 207.01754%;
}
[column^="4 of 2"]:last-child {
margin-right: 0;
}
[column^="4 of 2"][column*="+1"] {
margin-left: 53.50877%;
}
[column^="4 of 2"][column*="+2"] {
margin-left: 107.01754%;
}
[column^="4 of 2"][column*="+3"] {
margin-left: 160.52632%;
}
[column^="4 of 2"][column*="+4"] {
margin-left: 214.03509%;
}
[column^="4 of 2"][column*="+5"] {
margin-left: 267.54386%;
}
[column^="4 of 2"][column*="+6"] {
margin-left: 321.05263%;
}
[column^="4 of 2"][column*="+7"] {
margin-left: 374.5614%;
}
[column^="4 of 3"] {
float: left;
display: block;
margin-right: 4.57143%;
width: 134.85714%;
}
[column^="4 of 3"]:last-child {
margin-right: 0;
}
[column^="4 of 3"][column*="+1"] {
margin-left: 34.85714%;
}
[column^="4 of 3"][column*="+2"] {
margin-left: 69.71429%;
}
[column^="4 of 3"][column*="+3"] {
margin-left: 104.57143%;
}
[column^="4 of 3"][column*="+4"] {
margin-left: 139.42857%;
}
[column^="4 of 3"][column*="+5"] {
margin-left: 174.28571%;
}
[column^="4 of 3"][column*="+6"] {
margin-left: 209.14286%;
}
[column^="4 of 3"][column*="+7"] {
margin-left: 244%;
}
[column^="4 of 4"] {
float: left;
display: block;
margin-right: 3.38983%;
width: 100%;
}
[column^="4 of 4"]:last-child {
margin-right: 0;
}
[column^="4 of 4"][column*="+1"] {
margin-left: 25.84746%;
}
[column^="4 of 4"][column*="+2"] {
margin-left: 51.69492%;
}
[column^="4 of 4"][column*="+3"] {
margin-left: 77.54237%;
}
[column^="4 of 4"][column*="+4"] {
margin-left: 103.38983%;
}
[column^="4 of 4"][column*="+5"] {
margin-left: 129.23729%;
}
[column^="4 of 4"][column*="+6"] {
margin-left: 155.08475%;
}
[column^="4 of 4"][column*="+7"] {
margin-left: 180.9322%;
}
[column^="4 of 5"] {
float: left;
display: block;
margin-right: 2.6936%;
width: 79.46128%;
}
[column^="4 of 5"]:last-child {
margin-right: 0;
}
[column^="4 of 5"][column*="+1"] {
margin-left: 20.53872%;
}
[column^="4 of 5"][column*="+2"] {
margin-left: 41.07744%;
}
[column^="4 of 5"][column*="+3"] {
margin-left: 61.61616%;
}
[column^="4 of 5"][column*="+4"] {
margin-left: 82.15488%;
}
[column^="4 of 5"][column*="+5"] {
margin-left: 102.6936%;
}
[column^="4 of 5"][column*="+6"] {
margin-left: 123.23232%;
}
[column^="4 of 5"][column*="+7"] {
margin-left: 143.77104%;
}
[column^="4 of 6"] {
float: left;
display: block;
margin-right: 2.23464%;
width: 65.92179%;
}
[column^="4 of 6"]:last-child {
margin-right: 0;
}
[column^="4 of 6"][column*="+1"] {
margin-left: 17.03911%;
}
[column^="4 of 6"][column*="+2"] {
margin-left: 34.07821%;
}
[column^="4 of 6"][column*="+3"] {
margin-left: 51.11732%;
}
[column^="4 of 6"][column*="+4"] {
margin-left: 68.15642%;
}
[column^="4 of 6"][column*="+5"] {
margin-left: 85.19553%;
}
[column^="4 of 6"][column*="+6"] {
margin-left: 102.23464%;
}
[column^="4 of 6"][column*="+7"] {
margin-left: 119.27374%;
}
[column^="4 of 7"] {
float: left;
display: block;
margin-right: 1.90931%;
width: 56.32458%;
}
[column^="4 of 7"]:last-child {
margin-right: 0;
}
[column^="4 of 7"][column*="+1"] {
margin-left: 14.55847%;
}
[column^="4 of 7"][column*="+2"] {
margin-left: 29.11695%;
}
[column^="4 of 7"][column*="+3"] {
margin-left: 43.67542%;
}
[column^="4 of 7"][column*="+4"] {
margin-left: 58.23389%;
}
[column^="4 of 7"][column*="+5"] {
margin-left: 72.79236%;
}
[column^="4 of 7"][column*="+6"] {
margin-left: 87.35084%;
}
[column^="4 of 7"][column*="+7"] {
margin-left: 101.90931%;
}
[column^="5 of 8"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 61.875%;
}
[column^="5 of 8"]:last-child {
margin-right: 0;
}
[column^="5 of 8"][column*="+1"] {
margin-left: 12.70833%;
}
[column^="5 of 8"][column*="+2"] {
margin-left: 25.41667%;
}
[column^="5 of 8"][column*="+3"] {
margin-left: 38.125%;
}
[column^="5 of 8"][column*="+4"] {
margin-left: 50.83333%;
}
[column^="5 of 8"][column*="+5"] {
margin-left: 63.54167%;
}
[column^="5 of 8"][column*="+6"] {
margin-left: 76.25%;
}
[column^="5 of 8"][column*="+7"] {
margin-left: 88.95833%;
}
[column^="5 of 1"] {
float: left;
display: block;
margin-right: 15.09434%;
width: 560.37736%;
}
[column^="5 of 1"]:last-child {
margin-right: 0;
}
[column^="5 of 1"][column*="+1"] {
margin-left: 115.09434%;
}
[column^="5 of 1"][column*="+2"] {
margin-left: 230.18868%;
}
[column^="5 of 1"][column*="+3"] {
margin-left: 345.28302%;
}
[column^="5 of 1"][column*="+4"] {
margin-left: 460.37736%;
}
[column^="5 of 1"][column*="+5"] {
margin-left: 575.4717%;
}
[column^="5 of 1"][column*="+6"] {
margin-left: 690.56604%;
}
[column^="5 of 1"][column*="+7"] {
margin-left: 805.66038%;
}
[column^="5 of 2"] {
float: left;
display: block;
margin-right: 7.01754%;
width: 260.52632%;
}
[column^="5 of 2"]:last-child {
margin-right: 0;
}
[column^="5 of 2"][column*="+1"] {
margin-left: 53.50877%;
}
[column^="5 of 2"][column*="+2"] {
margin-left: 107.01754%;
}
[column^="5 of 2"][column*="+3"] {
margin-left: 160.52632%;
}
[column^="5 of 2"][column*="+4"] {
margin-left: 214.03509%;
}
[column^="5 of 2"][column*="+5"] {
margin-left: 267.54386%;
}
[column^="5 of 2"][column*="+6"] {
margin-left: 321.05263%;
}
[column^="5 of 2"][column*="+7"] {
margin-left: 374.5614%;
}
[column^="5 of 3"] {
float: left;
display: block;
margin-right: 4.57143%;
width: 169.71429%;
}
[column^="5 of 3"]:last-child {
margin-right: 0;
}
[column^="5 of 3"][column*="+1"] {
margin-left: 34.85714%;
}
[column^="5 of 3"][column*="+2"] {
margin-left: 69.71429%;
}
[column^="5 of 3"][column*="+3"] {
margin-left: 104.57143%;
}
[column^="5 of 3"][column*="+4"] {
margin-left: 139.42857%;
}
[column^="5 of 3"][column*="+5"] {
margin-left: 174.28571%;
}
[column^="5 of 3"][column*="+6"] {
margin-left: 209.14286%;
}
[column^="5 of 3"][column*="+7"] {
margin-left: 244%;
}
[column^="5 of 4"] {
float: left;
display: block;
margin-right: 3.38983%;
width: 125.84746%;
}
[column^="5 of 4"]:last-child {
margin-right: 0;
}
[column^="5 of 4"][column*="+1"] {
margin-left: 25.84746%;
}
[column^="5 of 4"][column*="+2"] {
margin-left: 51.69492%;
}
[column^="5 of 4"][column*="+3"] {
margin-left: 77.54237%;
}
[column^="5 of 4"][column*="+4"] {
margin-left: 103.38983%;
}
[column^="5 of 4"][column*="+5"] {
margin-left: 129.23729%;
}
[column^="5 of 4"][column*="+6"] {
margin-left: 155.08475%;
}
[column^="5 of 4"][column*="+7"] {
margin-left: 180.9322%;
}
[column^="5 of 5"] {
float: left;
display: block;
margin-right: 2.6936%;
width: 100%;
}
[column^="5 of 5"]:last-child {
margin-right: 0;
}
[column^="5 of 5"][column*="+1"] {
margin-left: 20.53872%;
}
[column^="5 of 5"][column*="+2"] {
margin-left: 41.07744%;
}
[column^="5 of 5"][column*="+3"] {
margin-left: 61.61616%;
}
[column^="5 of 5"][column*="+4"] {
margin-left: 82.15488%;
}
[column^="5 of 5"][column*="+5"] {
margin-left: 102.6936%;
}
[column^="5 of 5"][column*="+6"] {
margin-left: 123.23232%;
}
[column^="5 of 5"][column*="+7"] {
margin-left: 143.77104%;
}
[column^="5 of 6"] {
float: left;
display: block;
margin-right: 2.23464%;
width: 82.96089%;
}
[column^="5 of 6"]:last-child {
margin-right: 0;
}
[column^="5 of 6"][column*="+1"] {
margin-left: 17.03911%;
}
[column^="5 of 6"][column*="+2"] {
margin-left: 34.07821%;
}
[column^="5 of 6"][column*="+3"] {
margin-left: 51.11732%;
}
[column^="5 of 6"][column*="+4"] {
margin-left: 68.15642%;
}
[column^="5 of 6"][column*="+5"] {
margin-left: 85.19553%;
}
[column^="5 of 6"][column*="+6"] {
margin-left: 102.23464%;
}
[column^="5 of 6"][column*="+7"] {
margin-left: 119.27374%;
}
[column^="5 of 7"] {
float: left;
display: block;
margin-right: 1.90931%;
width: 70.88305%;
}
[column^="5 of 7"]:last-child {
margin-right: 0;
}
[column^="5 of 7"][column*="+1"] {
margin-left: 14.55847%;
}
[column^="5 of 7"][column*="+2"] {
margin-left: 29.11695%;
}
[column^="5 of 7"][column*="+3"] {
margin-left: 43.67542%;
}
[column^="5 of 7"][column*="+4"] {
margin-left: 58.23389%;
}
[column^="5 of 7"][column*="+5"] {
margin-left: 72.79236%;
}
[column^="5 of 7"][column*="+6"] {
margin-left: 87.35084%;
}
[column^="5 of 7"][column*="+7"] {
margin-left: 101.90931%;
}
[column^="6 of 8"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 74.58333%;
}
[column^="6 of 8"]:last-child {
margin-right: 0;
}
[column^="6 of 8"][column*="+1"] {
margin-left: 12.70833%;
}
[column^="6 of 8"][column*="+2"] {
margin-left: 25.41667%;
}
[column^="6 of 8"][column*="+3"] {
margin-left: 38.125%;
}
[column^="6 of 8"][column*="+4"] {
margin-left: 50.83333%;
}
[column^="6 of 8"][column*="+5"] {
margin-left: 63.54167%;
}
[column^="6 of 8"][column*="+6"] {
margin-left: 76.25%;
}
[column^="6 of 8"][column*="+7"] {
margin-left: 88.95833%;
}
[column^="6 of 1"] {
float: left;
display: block;
margin-right: 15.09434%;
width: 675.4717%;
}
[column^="6 of 1"]:last-child {
margin-right: 0;
}
[column^="6 of 1"][column*="+1"] {
margin-left: 115.09434%;
}
[column^="6 of 1"][column*="+2"] {
margin-left: 230.18868%;
}
[column^="6 of 1"][column*="+3"] {
margin-left: 345.28302%;
}
[column^="6 of 1"][column*="+4"] {
margin-left: 460.37736%;
}
[column^="6 of 1"][column*="+5"] {
margin-left: 575.4717%;
}
[column^="6 of 1"][column*="+6"] {
margin-left: 690.56604%;
}
[column^="6 of 1"][column*="+7"] {
margin-left: 805.66038%;
}
[column^="6 of 2"] {
float: left;
display: block;
margin-right: 7.01754%;
width: 314.03509%;
}
[column^="6 of 2"]:last-child {
margin-right: 0;
}
[column^="6 of 2"][column*="+1"] {
margin-left: 53.50877%;
}
[column^="6 of 2"][column*="+2"] {
margin-left: 107.01754%;
}
[column^="6 of 2"][column*="+3"] {
margin-left: 160.52632%;
}
[column^="6 of 2"][column*="+4"] {
margin-left: 214.03509%;
}
[column^="6 of 2"][column*="+5"] {
margin-left: 267.54386%;
}
[column^="6 of 2"][column*="+6"] {
margin-left: 321.05263%;
}
[column^="6 of 2"][column*="+7"] {
margin-left: 374.5614%;
}
[column^="6 of 3"] {
float: left;
display: block;
margin-right: 4.57143%;
width: 204.57143%;
}
[column^="6 of 3"]:last-child {
margin-right: 0;
}
[column^="6 of 3"][column*="+1"] {
margin-left: 34.85714%;
}
[column^="6 of 3"][column*="+2"] {
margin-left: 69.71429%;
}
[column^="6 of 3"][column*="+3"] {
margin-left: 104.57143%;
}
[column^="6 of 3"][column*="+4"] {
margin-left: 139.42857%;
}
[column^="6 of 3"][column*="+5"] {
margin-left: 174.28571%;
}
[column^="6 of 3"][column*="+6"] {
margin-left: 209.14286%;
}
[column^="6 of 3"][column*="+7"] {
margin-left: 244%;
}
[column^="6 of 4"] {
float: left;
display: block;
margin-right: 3.38983%;
width: 151.69492%;
}
[column^="6 of 4"]:last-child {
margin-right: 0;
}
[column^="6 of 4"][column*="+1"] {
margin-left: 25.84746%;
}
[column^="6 of 4"][column*="+2"] {
margin-left: 51.69492%;
}
[column^="6 of 4"][column*="+3"] {
margin-left: 77.54237%;
}
[column^="6 of 4"][column*="+4"] {
margin-left: 103.38983%;
}
[column^="6 of 4"][column*="+5"] {
margin-left: 129.23729%;
}
[column^="6 of 4"][column*="+6"] {
margin-left: 155.08475%;
}
[column^="6 of 4"][column*="+7"] {
margin-left: 180.9322%;
}
[column^="6 of 5"] {
float: left;
display: block;
margin-right: 2.6936%;
width: 120.53872%;
}
[column^="6 of 5"]:last-child {
margin-right: 0;
}
[column^="6 of 5"][column*="+1"] {
margin-left: 20.53872%;
}
[column^="6 of 5"][column*="+2"] {
margin-left: 41.07744%;
}
[column^="6 of 5"][column*="+3"] {
margin-left: 61.61616%;
}
[column^="6 of 5"][column*="+4"] {
margin-left: 82.15488%;
}
[column^="6 of 5"][column*="+5"] {
margin-left: 102.6936%;
}
[column^="6 of 5"][column*="+6"] {
margin-left: 123.23232%;
}
[column^="6 of 5"][column*="+7"] {
margin-left: 143.77104%;
}
[column^="6 of 6"] {
float: left;
display: block;
margin-right: 2.23464%;
width: 100%;
}
[column^="6 of 6"]:last-child {
margin-right: 0;
}
[column^="6 of 6"][column*="+1"] {
margin-left: 17.03911%;
}
[column^="6 of 6"][column*="+2"] {
margin-left: 34.07821%;
}
[column^="6 of 6"][column*="+3"] {
margin-left: 51.11732%;
}
[column^="6 of 6"][column*="+4"] {
margin-left: 68.15642%;
}
[column^="6 of 6"][column*="+5"] {
margin-left: 85.19553%;
}
[column^="6 of 6"][column*="+6"] {
margin-left: 102.23464%;
}
[column^="6 of 6"][column*="+7"] {
margin-left: 119.27374%;
}
[column^="6 of 7"] {
float: left;
display: block;
margin-right: 1.90931%;
width: 85.44153%;
}
[column^="6 of 7"]:last-child {
margin-right: 0;
}
[column^="6 of 7"][column*="+1"] {
margin-left: 14.55847%;
}
[column^="6 of 7"][column*="+2"] {
margin-left: 29.11695%;
}
[column^="6 of 7"][column*="+3"] {
margin-left: 43.67542%;
}
[column^="6 of 7"][column*="+4"] {
margin-left: 58.23389%;
}
[column^="6 of 7"][column*="+5"] {
margin-left: 72.79236%;
}
[column^="6 of 7"][column*="+6"] {
margin-left: 87.35084%;
}
[column^="6 of 7"][column*="+7"] {
margin-left: 101.90931%;
}
[column^="7 of 8"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 87.29167%;
}
[column^="7 of 8"]:last-child {
margin-right: 0;
}
[column^="7 of 8"][column*="+1"] {
margin-left: 12.70833%;
}
[column^="7 of 8"][column*="+2"] {
margin-left: 25.41667%;
}
[column^="7 of 8"][column*="+3"] {
margin-left: 38.125%;
}
[column^="7 of 8"][column*="+4"] {
margin-left: 50.83333%;
}
[column^="7 of 8"][column*="+5"] {
margin-left: 63.54167%;
}
[column^="7 of 8"][column*="+6"] {
margin-left: 76.25%;
}
[column^="7 of 8"][column*="+7"] {
margin-left: 88.95833%;
}
[column^="7 of 1"] {
float: left;
display: block;
margin-right: 15.09434%;
width: 790.56604%;
}
[column^="7 of 1"]:last-child {
margin-right: 0;
}
[column^="7 of 1"][column*="+1"] {
margin-left: 115.09434%;
}
[column^="7 of 1"][column*="+2"] {
margin-left: 230.18868%;
}
[column^="7 of 1"][column*="+3"] {
margin-left: 345.28302%;
}
[column^="7 of 1"][column*="+4"] {
margin-left: 460.37736%;
}
[column^="7 of 1"][column*="+5"] {
margin-left: 575.4717%;
}
[column^="7 of 1"][column*="+6"] {
margin-left: 690.56604%;
}
[column^="7 of 1"][column*="+7"] {
margin-left: 805.66038%;
}
[column^="7 of 2"] {
float: left;
display: block;
margin-right: 7.01754%;
width: 367.54386%;
}
[column^="7 of 2"]:last-child {
margin-right: 0;
}
[column^="7 of 2"][column*="+1"] {
margin-left: 53.50877%;
}
[column^="7 of 2"][column*="+2"] {
margin-left: 107.01754%;
}
[column^="7 of 2"][column*="+3"] {
margin-left: 160.52632%;
}
[column^="7 of 2"][column*="+4"] {
margin-left: 214.03509%;
}
[column^="7 of 2"][column*="+5"] {
margin-left: 267.54386%;
}
[column^="7 of 2"][column*="+6"] {
margin-left: 321.05263%;
}
[column^="7 of 2"][column*="+7"] {
margin-left: 374.5614%;
}
[column^="7 of 3"] {
float: left;
display: block;
margin-right: 4.57143%;
width: 239.42857%;
}
[column^="7 of 3"]:last-child {
margin-right: 0;
}
[column^="7 of 3"][column*="+1"] {
margin-left: 34.85714%;
}
[column^="7 of 3"][column*="+2"] {
margin-left: 69.71429%;
}
[column^="7 of 3"][column*="+3"] {
margin-left: 104.57143%;
}
[column^="7 of 3"][column*="+4"] {
margin-left: 139.42857%;
}
[column^="7 of 3"][column*="+5"] {
margin-left: 174.28571%;
}
[column^="7 of 3"][column*="+6"] {
margin-left: 209.14286%;
}
[column^="7 of 3"][column*="+7"] {
margin-left: 244%;
}
[column^="7 of 4"] {
float: left;
display: block;
margin-right: 3.38983%;
width: 177.54237%;
}
[column^="7 of 4"]:last-child {
margin-right: 0;
}
[column^="7 of 4"][column*="+1"] {
margin-left: 25.84746%;
}
[column^="7 of 4"][column*="+2"] {
margin-left: 51.69492%;
}
[column^="7 of 4"][column*="+3"] {
margin-left: 77.54237%;
}
[column^="7 of 4"][column*="+4"] {
margin-left: 103.38983%;
}
[column^="7 of 4"][column*="+5"] {
margin-left: 129.23729%;
}
[column^="7 of 4"][column*="+6"] {
margin-left: 155.08475%;
}
[column^="7 of 4"][column*="+7"] {
margin-left: 180.9322%;
}
[column^="7 of 5"] {
float: left;
display: block;
margin-right: 2.6936%;
width: 141.07744%;
}
[column^="7 of 5"]:last-child {
margin-right: 0;
}
[column^="7 of 5"][column*="+1"] {
margin-left: 20.53872%;
}
[column^="7 of 5"][column*="+2"] {
margin-left: 41.07744%;
}
[column^="7 of 5"][column*="+3"] {
margin-left: 61.61616%;
}
[column^="7 of 5"][column*="+4"] {
margin-left: 82.15488%;
}
[column^="7 of 5"][column*="+5"] {
margin-left: 102.6936%;
}
[column^="7 of 5"][column*="+6"] {
margin-left: 123.23232%;
}
[column^="7 of 5"][column*="+7"] {
margin-left: 143.77104%;
}
[column^="7 of 6"] {
float: left;
display: block;
margin-right: 2.23464%;
width: 117.03911%;
}
[column^="7 of 6"]:last-child {
margin-right: 0;
}
[column^="7 of 6"][column*="+1"] {
margin-left: 17.03911%;
}
[column^="7 of 6"][column*="+2"] {
margin-left: 34.07821%;
}
[column^="7 of 6"][column*="+3"] {
margin-left: 51.11732%;
}
[column^="7 of 6"][column*="+4"] {
margin-left: 68.15642%;
}
[column^="7 of 6"][column*="+5"] {
margin-left: 85.19553%;
}
[column^="7 of 6"][column*="+6"] {
margin-left: 102.23464%;
}
[column^="7 of 6"][column*="+7"] {
margin-left: 119.27374%;
}
[column^="7 of 7"] {
float: left;
display: block;
margin-right: 1.90931%;
width: 100%;
}
[column^="7 of 7"]:last-child {
margin-right: 0;
}
[column^="7 of 7"][column*="+1"] {
margin-left: 14.55847%;
}
[column^="7 of 7"][column*="+2"] {
margin-left: 29.11695%;
}
[column^="7 of 7"][column*="+3"] {
margin-left: 43.67542%;
}
[column^="7 of 7"][column*="+4"] {
margin-left: 58.23389%;
}
[column^="7 of 7"][column*="+5"] {
margin-left: 72.79236%;
}
[column^="7 of 7"][column*="+6"] {
margin-left: 87.35084%;
}
[column^="7 of 7"][column*="+7"] {
margin-left: 101.90931%;
}
[column^="8 of 8"] {
float: left;
display: block;
margin-right: 1.66667%;
width: 100%;
}
[column^="8 of 8"]:last-child {
margin-right: 0;
}
[column^="8 of 8"][column*="+1"] {
margin-left: 12.70833%;
}
[column^="8 of 8"][column*="+2"] {
margin-left: 25.41667%;
}
[column^="8 of 8"][column*="+3"] {
margin-left: 38.125%;
}
[column^="8 of 8"][column*="+4"] {
margin-left: 50.83333%;
}
[column^="8 of 8"][column*="+5"] {
margin-left: 63.54167%;
}
[column^="8 of 8"][column*="+6"] {
margin-left: 76.25%;
}
[column^="8 of 8"][column*="+7"] {
margin-left: 88.95833%;
}
[column^="8 of 1"] {
float: left;
display: block;
margin-right: 15.09434%;
width: 905.66038%;
}
[column^="8 of 1"]:last-child {
margin-right: 0;
}
[column^="8 of 1"][column*="+1"] {
margin-left: 115.09434%;
}
[column^="8 of 1"][column*="+2"] {
margin-left: 230.18868%;
}
[column^="8 of 1"][column*="+3"] {
margin-left: 345.28302%;
}
[column^="8 of 1"][column*="+4"] {
margin-left: 460.37736%;
}
[column^="8 of 1"][column*="+5"] {
margin-left: 575.4717%;
}
[column^="8 of 1"][column*="+6"] {
margin-left: 690.56604%;
}
[column^="8 of 1"][column*="+7"] {
margin-left: 805.66038%;
}
[column^="8 of 2"] {
float: left;
display: block;
margin-right: 7.01754%;
width: 421.05263%;
}
[column^="8 of 2"]:last-child {
margin-right: 0;
}
[column^="8 of 2"][column*="+1"] {
margin-left: 53.50877%;
}
[column^="8 of 2"][column*="+2"] {
margin-left: 107.01754%;
}
[column^="8 of 2"][column*="+3"] {
margin-left: 160.52632%;
}
[column^="8 of 2"][column*="+4"] {
margin-left: 214.03509%;
}
[column^="8 of 2"][column*="+5"] {
margin-left: 267.54386%;
}
[column^="8 of 2"][column*="+6"] {
margin-left: 321.05263%;
}
[column^="8 of 2"][column*="+7"] {
margin-left: 374.5614%;
}
[column^="8 of 3"] {
float: left;
display: block;
margin-right: 4.57143%;
width: 274.28571%;
}
[column^="8 of 3"]:last-child {
margin-right: 0;
}
[column^="8 of 3"][column*="+1"] {
margin-left: 34.85714%;
}
[column^="8 of 3"][column*="+2"] {
margin-left: 69.71429%;
}
[column^="8 of 3"][column*="+3"] {
margin-left: 104.57143%;
}
[column^="8 of 3"][column*="+4"] {
margin-left: 139.42857%;
}
[column^="8 of 3"][column*="+5"] {
margin-left: 174.28571%;
}
[column^="8 of 3"][column*="+6"] {
margin-left: 209.14286%;
}
[column^="8 of 3"][column*="+7"] {
margin-left: 244%;
}
[column^="8 of 4"] {
float: left;
display: block;
margin-right: 3.38983%;
width: 203.38983%;
}
[column^="8 of 4"]:last-child {
margin-right: 0;
}
[column^="8 of 4"][column*="+1"] {
margin-left: 25.84746%;
}
[column^="8 of 4"][column*="+2"] {
margin-left: 51.69492%;
}
[column^="8 of 4"][column*="+3"] {
margin-left: 77.54237%;
}
[column^="8 of 4"][column*="+4"] {
margin-left: 103.38983%;
}
[column^="8 of 4"][column*="+5"] {
margin-left: 129.23729%;
}
[column^="8 of 4"][column*="+6"] {
margin-left: 155.08475%;
}
[column^="8 of 4"][column*="+7"] {
margin-left: 180.9322%;
}
[column^="8 of 5"] {
float: left;
display: block;
margin-right: 2.6936%;
width: 161.61616%;
}
[column^="8 of 5"]:last-child {
margin-right: 0;
}
[column^="8 of 5"][column*="+1"] {
margin-left: 20.53872%;
}
[column^="8 of 5"][column*="+2"] {
margin-left: 41.07744%;
}
[column^="8 of 5"][column*="+3"] {
margin-left: 61.61616%;
}
[column^="8 of 5"][column*="+4"] {
margin-left: 82.15488%;
}
[column^="8 of 5"][column*="+5"] {
margin-left: 102.6936%;
}
[column^="8 of 5"][column*="+6"] {
margin-left: 123.23232%;
}
[column^="8 of 5"][column*="+7"] {
margin-left: 143.77104%;
}
[column^="8 of 6"] {
float: left;
display: block;
margin-right: 2.23464%;
width: 134.07821%;
}
[column^="8 of 6"]:last-child {
margin-right: 0;
}
[column^="8 of 6"][column*="+1"] {
margin-left: 17.03911%;
}
[column^="8 of 6"][column*="+2"] {
margin-left: 34.07821%;
}
[column^="8 of 6"][column*="+3"] {
margin-left: 51.11732%;
}
[column^="8 of 6"][column*="+4"] {
margin-left: 68.15642%;
}
[column^="8 of 6"][column*="+5"] {
margin-left: 85.19553%;
}
[column^="8 of 6"][column*="+6"] {
margin-left: 102.23464%;
}
[column^="8 of 6"][column*="+7"] {
margin-left: 119.27374%;
}
[column^="8 of 7"] {
float: left;
display: block;
margin-right: 1.90931%;
width: 114.55847%;
}
[column^="8 of 7"]:last-child {
margin-right: 0;
}
[column^="8 of 7"][column*="+1"] {
margin-left: 14.55847%;
}
[column^="8 of 7"][column*="+2"] {
margin-left: 29.11695%;
}
[column^="8 of 7"][column*="+3"] {
margin-left: 43.67542%;
}
[column^="8 of 7"][column*="+4"] {
margin-left: 58.23389%;
}
[column^="8 of 7"][column*="+5"] {
margin-left: 72.79236%;
}
[column^="8 of 7"][column*="+6"] {
margin-left: 87.35084%;
}
[column^="8 of 7"][column*="+7"] {
margin-left: 101.90931%;
}
}
// ----
// libsass (v3.5.0.beta.2)
// ----
@import "bourbon/bourbon";
/*
@url - https://www.sassmeister.com/gist/ccc5b07e65e2531517d7
@version - 1.0.0
*/
// Globals
$em-base: 16 !default;
$base-line-height: 1.5 !default;
// Neat Grid Debug : visual grid
$visual-grid: true !default;
$visual-grid-color: #E6F6FF !default;
$visual-grid-opacity: 0.6 !default;
$visual-grid-index: back !default;
// Base-line height debug
$baseline-grid-show: false !default;
$baseline-grid-color : ff0000 !default;
// ------------------------------------------------*/
// Set the grid :
// http://gridulator.com/
// http://grid.guide/
// ------------------------------------------------*/
$max-width: 960px;
$column: em(106);
$gutter: em(16);
$grid-columns: 8;
// NEAT
@import "neat/neat";
// ------------------------------------------------*/
// MIXINS & FUNCTIONS
// ------------------------------------------------*/
/* # @function vertical-rythme()
@global $em-base - Bourbon/neat global
@global $base-line-height - Bourbon/neat global
@param $multiplier - number of time to repeat the base line height define by $em-base
@param $offset (0 !default) - Optional A scope to add
@param $em-base (16 !default)
@return - value in em
Styleguide libs.functions.vertical-rythm
*/
@function vertical-rythm($multiplier, $offset: 0, $em-base: 16, $base-line-height: 1.5){
$vertical-rythm: $base-line-height * em($em-base);
@return $vertical-rythm;
}
//-------------------------------------------*/
// Custom Settings
//-------------------------------------------*/
$em-base: 16;
$base-line-height: 1.5;
// ------------------------------------------------*/
// Sizes
// http://concisecss.com/documentation/core/breakpoints
// Media-queries Boilerplate : http://app.kodery.com/s/1075
// ------------------------------------------------*/
// xs
$extra-small: em(320);
// s
$small: em(480);
//$small: 480px;
// m
$medium: em(768);
// l
$large: em(960);
// xl
$extra-large: em(1140);
// ------------------------------------------------*/
// Breakpoints
// http://thoughtbot.github.io/neat-docs/latest/#new-breakpoint
// ------------------------------------------------*/
$xs: new-breakpoint(min-width $extra-small, 2);
$s: new-breakpoint(min-width $small, 4);
$m: new-breakpoint(min-width $medium , 8);
$l: new-breakpoint(min-width $large, 8);
$xl: new-breakpoint(min-width $extra-large, 8);
//-------------------------------------------*/
// USAGE
//-------------------------------------------*/
// Utility Debug
@if $baseline-grid-show == true {
html {
$size: strip-units(($base-line-height * $em-base));
background-image: url('http://basehold.it/i/#{$size}/#{$baseline-grid-color}');
}
}
// ------------------------------------------------*/
// Neat Unsemantic Grid System
// ------------------------------------------------*/
/** #Neat Unsemantic Grid System
Unsemantig grids helpers using Neat, inpirated by atGrid.
Markup:
<main container>
<div row>
<p column="8">Column with a width of 8 columns</p>
<p column="1 +3">Column with a width of 1 columns offset 3</p>
</div>
<div row>
<section column="2">
<p>Column with a width of 2 columns</p>
</section>
<section column="4 +2">
<p>Column with a width of 4 columns
and an offset of 2 columns</p>
</section>
</div>
<div row>
<section column="2">
<h2 row>Nesting</h2>
<p column="1 of 2">Column with a width of 1 of 2 columns</p>
<p column="1 of 2">Column with a width of 1 of 2 columns</p>
</section>
<section column="4 +2">
<p column="1 of 4">Column with 1 of 4 columns</p>
<p column="2 of 4 +1">Column with 2 of 4 columns and an offset of +1 columns</p>
</section>
</div>
</main>
$prefix {string} (false !default) - A prefix for the atribute column ex: `data-` for `data-column`
@see - [ConciseCss - atGrid](https://github.com/ConciseCSS/concise.css/blob/master/src/core/utils/_atgrid.scss)
@see - [CSS Attributes - W3school](http://www.w3schools.com/css/css_attribute_selectors.asp)
@see - [CSS Attributes - CSStriks](https://css-tricks.com/attribute-selectors/)
Styleguide helpers.neatUnSemanticGrid
*/
// ex: "data-" for data-column
$prefix: '' !default;
// ex: <selector container>
[container]{
@include outer-container();
}
// ex: <selector row>
[row]{
@include row();
}
// ex: <selector column>
[#{$prefix}column] {
@include span-columns($grid-columns);
padding:5px;
background-color: rgba(silver, .5);
}
//http://www.w3schools.com/css/css_attribute_selectors.asp
//https://css-tricks.com/attribute-selectors/
@include media($small) {
/* Create columns */
@for $i from 1 through $grid-columns {
[#{$prefix}column~="#{$i}"] {
@include span-columns($i);
}
}
/* Offset for columns */
@for $i from 1 through ($grid-columns) {
[#{$prefix}column*="+#{$i}"] {
@include shift($i);
}
[#{$prefix}column*="-#{$i}"] {
@include shift(-$i);
}
}
/* Nesting x of y & shifting + */
@for $i from 1 through ($grid-columns) {
[#{$prefix}column^="#{$i} of #{$grid-columns}"]{
@include span-columns($i of $grid-columns);
@for $z from 1 to ($grid-columns){
&[#{$prefix}column*="+#{$z}"] {
@include shift-in-context($z of $grid-columns);
}
}
}
@for $y from 1 to ($grid-columns){
[#{$prefix}column^="#{$i} of #{$y}"]{
@include span-columns($i of $y);
@for $z from 1 to ($grid-columns){
&[#{$prefix}column*="+#{$z}"] {
@include shift-in-context($z of $y);
}
}
}
}
}
}
<main container>
<div row>
<p column>Full-width is default</p>
<p column="2 +3">2 +3</p>
</div>
<div row>
<section column>
<p>8</p>
<p column="1 of 8 +5">1 of 8 + 1</p>
</section>
</div>
<div row>
<section column="2">
<h2>2</h2>
<p column="1 of 2">1 of 2</p>
<p column="1 of 2">1 of 2</p>
</section>
<section column="4 +2">
<h2>4 + 2</h2>
<p column="1 of 4">1 of 4</p>
<p column="2 of 4 +1">2 of 4 +1</p>
</section>
</div>
</main>