<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
<h1>Sexy Grid</h1>
<p>The Semantic grid system, psd stize uskoro. Eto cim prije</p>

<div class="row">
	<div class="colon1">1</div>
	<div class="colon1">1</div>
	<div class="colon1">1</div>
	<div class="colon1">1</div>
	<div class="colon1">1</div>
	<div class="colon1">1</div>
	<div class="colon1">1</div>
	<div class="colon1">1</div>
	<div class="colon1">1</div>
	<div class="colon1">1</div>
	<div class="colon1">1</div>
	<div class="colon1">1</div>

	<div class="colon2">2</div>
	<div class="colon2">2</div>
	<div class="colon2">2</div>
	<div class="colon2">2</div>
	<div class="colon2">2</div>
	<div class="colon2">2</div>

	<div class="colon3">3</div>
	<div class="colon3">3</div>
	<div class="colon3">3</div>
	<div class="colon3">3</div>

	<div class="colon4">4</div>
	<div class="colon4">4</div>
	<div class="colon4">4</div>

	<div class="colon6">6</div>
	<div class="colon6">6</div>

	<div class="colon7">7</div>
	<div class="colon5">5</div>

	<div class="colon8">8</div>
	<div class="colon4">4</div>

	<div class="colon9">9</div>
	<div class="colon3">3</div>

	<div class="colon10">10</div>
	<div class="colon2">2</div>

	<div class="colon11">11</div>
	<div class="colon1">1</div>

	<div class="colon12">12</div>
</div>
  ( . ) ( . )
$color: #ebeced
$gray: #dddddd

*
	box-sizing: border-box
	&:before, &:after
		box-sizing: border-box

=small
	@media only screen and (max-width: 766px)
		@content

=foo
	+small
		width: 100%

.row
	width: 100%
	max-width: 1020px
	margin: 0 auto
	clear:both
	overflow: hidden
	padding-top: 50px

	+small
		padding: 0 10px


%flok
	min-height: 10px
	margin: 1.0416666666666665%
	float: left
	overflow: hidden
	// background: $color
	border: 4px solid $gray

	+small
		margin-left: 0
		margin-right: 0


=col1 
	width: 6.25%
	@extend %flok
	+foo

=col2
	width: 14.583333333333334%
	@extend %flok
	+foo

=col3
	width: 22.916666666666664%
	@extend %flok
	+foo

=col4
	width: 31.25%
	@extend %flok
	+foo

=col5
	width: 39.58333333333333%
	@extend %flok
	+foo

=col6
	width: 47.91666666666667%
	@extend %flok
	+foo

=col7
	width: 56.25%
	@extend %flok
	+foo

=col8
	width: 64.58333333333334%
	@extend %flok
	+foo

=col9
	width: 72.91666666666666%
	@extend %flok
	+foo

=col10
	width: 81.25%
	@extend %flok
	+foo

=col11
	width: 89.58333333333334%
	@extend %flok
	+foo

=col12
	width: 97.91666666666666%
	@extend %flok
	+foo

// decorate
body
	text-align: center
	line-height: 2.5
	margin: 0
	padding: 0
	color: darken($gray, 10%)
	font-family: 'Open Sans', 'sans-serif'
	font-weight: 300

h1
	text-align: center
	font-size: 45px
	line-height: 1.2
	padding: 45px 0 0
	color: darken($gray, 20%)
	
.colon1
	+col1

.colon2
	+col2

.colon3
	+col3

.colon4
	+col4

.colon5
	+col5

.colon6
	+col6

.colon7
	+col7

.colon8
	+col8

.colon9
	+col9

.colon10
	+col10

.colon11
	+col11

.colon12
	+col12

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js