IceCream Ninja

IceCream

Simple and light responsive grid system


The Grid (uncompressed 2.9kb, minified 1.8kb)

Sometimes you just need a grid system, everything else is excess, with the iceCream syntax this can be done easily and faster.

And it's look like that

i-1
i-1
i-1
i-1
i-1
i-1
i-1
i-1
i-1
i-1
i-1
i-1
i-1
i-11
i-2
i-10
i-3
i-9
i-4
i-8
i-5
i-7
i-6
i-6
i-12

i for iceCream

  • i-container : a 980px container, for full width page just remove this class
  • i-g : "g" for grid , the grid class
  • i-* : iceCream grid is 12 columns layout starting from i-0 (for hiding) to i-12 (100% width)
  • i-mp-* : "mp" for mobile portrait a 4 columns layout starting from i-mp-0 (for hiding) to i-mp-4 (100% width)
  • i-ml-* : "ml" for mobile landscape a 4 columns layout starting from i-ml-0 (for hiding) to i-ml-4 (100% width)
  • i-tp-* : "tp" for tablet portrait a 4 columns layout starting from i-tp-0 (for hiding) to i-tp-4 (100% width)
  • i-tl-* : "tl" for tablet landscape a 4 columns layout starting from i-tl-0 (for hiding) to i-tl-4 (100% width)
  • i-img : wrap image to fit the parent column width

Sample grid code

  <div class="i-container">
     <div class="i-g">
         <div class="i-4">i-4</div>
         <div class="i-8">i-8</div>
     </div>
  </div>
                            
i-4
i-8

Different screen sizes and columns behaviour

    <div class="i-g">
        <div class="i-8 i-mp-1 i-tp-2 i-tl-1">i-8 i-mp-1 i-tp-2 i-tl-1</div>
        <div class="i-4 i-mp-3 i-tp-2 i-tl-1">i-4 i-mp-3 i-tp-2 i-tl-1</div>           
        <div class="i-12 i-mp-2 i-ml-2 i-tp-2  i-tl-1">i-12 i-mp-2 i-ml-2 i-tp-2  i-tl-1</div>           
        <div class="i-12 i-mp-2 i-tp-2  i-tl-1">i-12 i-mp-2 i-tp-2  i-tl-1</div>           
    </div>                               
                            

Resize your browser to try it

i-8 i-mp-1 i-tp-2 i-tl-1
i-4 i-mp-3 i-tp-2 i-tl-1
i-12 i-mp-2 i-ml-2 i-tp-2 i-tl-1
i-12 i-mp-2 i-tp-2 i-tl-1