l12 m6 hide-s
l1 m6 s6
l11 m6 s6
l2 m6 s6
l10 m6 s6
l3 m6 s6
l9 m6 s6
l4 m6 s6
l8 m6 s6
l5 m8 s6
l7 m4 s6
l6 m4 s6
l6 m8 s6

Install

Easy to get started. Install with npm, bower or yarn and quickly include CSS into any project.

                    $ npm install serdivan
                    $ bower install serdivan
                    $ yarn add serdivan
                   <link rel="stylesheet" href="https://cdn.rawgit.com/ahmetozantekin/serdivan/ac40a77b/dist/serdivan.min.css">

Usage

Serdivan only use attribute. Non spesific classes.

                    
Container
<div container></div>
                    
Row
<div row></div>
12 Column

Serdivan grid has 12 columns no matter the size of the browser.

1
2
3
4
5
6
7
8
9
10
11
12
                        
Grid System

                        <div row>
  <div l1> 1 </div> 
  <div l1> 2 </div> 
  <div l1> 3 </div> 
  <div l1> 4 </div> 
  <div l1> 5 </div> 
  <div l1> 6 </div> 
  <div l1> 7 </div> 
  <div l1> 8 </div> 
  <div l1> 9 </div> 
  <div l1> 10 </div> 
  <div l1> 11 </div> 
  <div l1> 12 </div> 
</div>
1
2
                        
Grid System

                        <div row>
  <div l6> 1 </div> 
  <div l6> 2 </div> 
</div>
1
2
3
4
                        
Grid System

                        <div row>
  <div l4> 1 </div> 
  <div l8> 2 </div>
  <div l8> 3 </div> 
  <div l4> 4 </div> 
</div>
1
2
                        
Grid System Offsets

                        <div row>
  <div l9>  <!-- do nothing means offset --> </div> 
  <div l3>  1 </div>
  <div l12> 2 </div> 
</div>
Responsive

Try resizing your browser and watch the layout change below.

Large-12 Medium-6 Small-6
Large-12 Medium-6 Small-6
Large-12 Medium-6 Hide-S
                        
Responsive

                        <div row>
  <div l12 m6 s6> Large-12 Medium-6 Small-6 </div> 
  <div l11 m6 s6> Large-12 Medium-6 Small-6 </div> 
  <div l11 m6 hide-s> Large-12 Medium-6 Hide-S </div>
</div>
Large-4 Medium-6 Small-12
Large-8 Medium-6 Small-12
Large-12 Medium-12 Small-6
                        
Responsive

                        <div row>
  <div l4 m6 s12>  Large-4 Medium-6 Small-12  </div> 
  <div l8 m6 s12>  Large-8 Medium-6 Small-12  </div> 
  <div l12 m12 s6> Large-12 Medium-12 Small-6 </div>
</div>
6 in Large-6
6 in Large-6
12 in Large-6
                        
Nested Grid

                        <div row>
  <div l6 m6 s12>  
      <div l6 m6 s6>  6 in Large-6  </div> 
      <div l6 m6 s6>  6 in Large-6  </div>
  </div> 
  <div l6 m6 s12> 
      <div l12 m12 s12>  12 in Large-6  </div> 
  </div> 
</div>

Contact