Ajax Loader
HTML 
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
1
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
2
<h1>Sexy Grid</h1>
3
<p>The Semantic Grid System, psd stize uskoro. Eto cim prije</p>
4
 
5
<div class="row">
6
  <div class="colon1">1</div>
7
  <div class="colon1">1</div>
8
  <div class="colon1">1</div>
9
  <div class="colon1">1</div>
10
  <div class="colon1">1</div>
11
  <div class="colon1">1</div>
12
  <div class="colon1">1</div>
13
  <div class="colon1">1</div>
14
  <div class="colon1">1</div>
15
  <div class="colon1">1</div>
16
  <div class="colon1">1</div>
17
  <div class="colon1">1</div>
18
 
19
  <div class="colon2">2</div>
20
  <div class="colon2">2</div>
21
  <div class="colon2">2</div>
22
  <div class="colon2">2</div>
23
  <div class="colon2">2</div>
24
  <div class="colon2">2</div>
25
 
26
  <div class="colon3">3</div>
27
  <div class="colon3">3</div>
28
  <div class="colon3">3</div>
29
  <div class="colon3">3</div>
30
 
31
  <div class="colon4">4</div>
32
  <div class="colon4">4</div>
33
  <div class="colon4">4</div>
34
 
35
  <div class="colon6">6</div>
36
  <div class="colon6">6</div>
37
 
38
  <div class="colon7">7</div>
39
  <div class="colon5">5</div>
40
 
41
  <div class="colon8">8</div>
42
  <div class="colon4">4</div>
43
 
44
  <div class="colon9">9</div>
45
  <div class="colon3">3</div>
46
 
47
  <div class="colon10">10</div>
48
  <div class="colon2">2</div>
49
 
50
  <div class="colon11">11</div>
51
  <div class="colon1">1</div>
52
 
53
  <div class="colon12">12</div>
54
</div>
55
  ( . ) ( . )
 
CSS 
$color: #ebeced
1
$color: #ebeced
2
$gray: #dddddd
3
 
4
*
5
  box-sizing: border-box
6
  &:before, &:after
7
    box-sizing: border-box
8
 
9
=small
10
  @media only screen and (max-width: 766px)
11
    @content
12
 
13
=foo
14
  +small
15
    width: 100%
16
 
17
.row
18
  width: 100%
19
  max-width: 1020px
20
  margin: 0 auto
21
  clear:both
22
  overflow: hidden
23
  padding-top: 50px
24
 
25
  +small
26
    padding: 0 10px
27
 
28
 
29
%flok
30
  min-height: 10px
31
  margin: 1.0416666666666665%
32
  float: left
33
  overflow: hidden
34
  // background: $color
35
  border: 4px solid $gray
36
 
37
  +small
38
    margin-left: 0
39
    margin-right: 0
40
 
41
 
42
=col1
43
  width: 6.25%
44
  @extend %flok
45
  +foo
46
 
47
=col2
48
  width: 14.583333333333334%
49
  @extend %flok
50
  +foo
51
 
52
=col3
53
  width: 22.916666666666664%
54
  @extend %flok
55
  +foo
56
 
57
=col4
58
  width: 31.25%
59
  @extend %flok
60
  +foo
61
 
62
=col5
63
  width: 39.58333333333333%
64
  @extend %flok
65
  +foo
66
 
67
=col6
68
  width: 47.91666666666667%
69
  @extend %flok
70
  +foo
71
 
72
=col7
73
  width: 56.25%
74
  @extend %flok
75
  +foo
76
 
77
=col8
78
  width: 64.58333333333334%
79
  @extend %flok
80
  +foo
81
 
82
=col9
83
  width: 72.91666666666666%
84
  @extend %flok
85
  +foo
86
 
87
=col10
88
  width: 81.25%
89
  @extend %flok
90
  +foo
91
 
92
=col11
93
  width: 89.58333333333334%
94
  @extend %flok
95
  +foo
96
 
97
=col12
98
  width: 97.91666666666666%
99
  @extend %flok
100
  +foo
101
 
102
// decorate
103
body
104
  text-align: center
105
  line-height: 2.5
106
  margin: 0
107
  padding: 0
108
  color: darken($gray, 10%)
109
  font-family: 'Open Sans', 'sans-serif'
110
  font-weight: 300
111
 
112
h1
113
  text-align: center
114
  font-size: 45px
115
  line-height: 1.2
116
  padding: 45px 0 0
117
  color: darken($gray, 20%)
118
119
.colon1
120
  +col1
121
 
122
.colon2
123
  +col2
124
 
125
.colon3
126
  +col3
127
 
128
.colon4
129
  +col4
130
 
131
.colon5
132
  +col5
133
 
134
.colon6
135
  +col6
136
 
137
.colon7
138
  +col7
139
 
140
.colon8
141
  +col8
142
 
143
.colon9
144
  +col9
145
 
146
.colon10
147
  +col10
148
 
149
.colon11
150
  +col11
151
 
152
.colon12
153
  +col12
154
 
 

Sexy Grid

CSSDeck G+