├── README.md
├── assets
    ├── icecream-ninja.png
    ├── style.css
    └── zied-hosni.jpg
├── css
    ├── icecream-grid.css
    └── icecream-grid.min.css
├── index.html
└── less
    ├── elements.less
    └── icecream-grid.less


/README.md:
--------------------------------------------------------------------------------
 1 | The Grid
 2 | =========
 3 | 
 4 | Sometimes you just need a grid system, everything else is excess, with the iceCream syntax this can be done easily and faster.
 5 | 
 6 | Demo
 7 | ---
 8 | http://html5-ninja.com/icecream
 9 | 
10 | "i" for iceCream
11 | ---
12 |  - i-container : a 980px container, for full width page just remove this class
13 |  - i-g : "g" for grid , the grid class
14 |  - i-* : iceCream grid is 12 columns layout starting from i-0 (for hiding) to i-12 (100% width)
15 |  - i-mp-* : "mp" for mobile portrait a 4 columns layout starting from i-mp-0 (for hiding) to i-mp-4 (100% width)
16 |  - i-ml-* : "ml" for mobile landscape a 4 columns layout starting from i-ml-0 (for hiding) to i-ml-4 (100% width)
17 |  - i-tp-* : "tp" for tablet portrait a 4 columns layout starting from i-tp-0 (for hiding) to i-tp-4 (100% width)
18 |  - i-tl-* : "tl" for tablet landscape a 4 columns layout starting from i-tl-0 (for hiding) to i-tl-4 (100% width)
19 |  - i-img : wrap image to fit the parent column width
20 |  
21 | 
22 | Version
23 | ----
24 | 
25 | 0.1.0
26 | 
27 | 
28 | 
29 | How to use
30 | --------------
31 | 
32 | ```sh
33 | <link href="css/icecream-grid.min.css" rel="stylesheet" />
34 | ```
35 | 
36 | 
37 | License
38 | ----
39 | 
40 | WTFPL - http://www.wtfpl.net/
41 | 
42 | *Free, Hell Yeah!*
43 | 
44 | Author
45 | --- 
46 |  - Zied Hosni - zied.hosni.mail@gmail.com
47 |  - http://html5-ninja.com - @html5_ninja
48 |     
49 | 


--------------------------------------------------------------------------------
/assets/icecream-ninja.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/html5-ninja/icecream/b3daa9a6ab00317a1fc35f7d6382926733b4b0b2/assets/icecream-ninja.png


--------------------------------------------------------------------------------
/assets/style.css:
--------------------------------------------------------------------------------
 1 | @import url(http://fonts.googleapis.com/css?family=Molle:400italic);
 2 | @import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 3 | body{font-family: 'Open Sans', sans-serif;color: #333; background: #fff;font-weight: 300;font-size: 1em}
 4 | h1{font-family: 'Molle', cursive;font-size: 12vw; font-style: italic;font-weight: normal;margin: 0;text-align: center; color: #C3E4DF;
 5 | text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
 6 |              0px 8px 13px rgba(0,0,0,0.1),
 7 |              0px 18px 23px rgba(0,0,0,0.1);
 8 | font-weight: 400;
 9 | line-height: 1;}
10 | h2,h3,h4{margin: 0;font-weight: 300}
11 | h2{font-size: 2em}
12 | h3{margin-top: 0.5em;font-size: 1.5em}
13 | .wrapper{width:100%;margin: 0 auto;}
14 | .grid-test .i-g div{border:1px solid #ccc;min-height: 20px;font-size: 0.8em;text-align: center;line-height: 18px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden}
15 | .well{text-align: center}
16 | .well p strong{font-size: 2em; font-weight: 300;color: #C3E4DF}
17 | .well p{padding: 0;margin: 0;}
18 | pre.prettyprint{margin-left: 0;border: none !important;padding-top: 10px !important}
19 | .code{background: #eee;overflow: hidden}
20 | li{padding: 0.4em 0}
21 | b{font-weight: bold}
22 | .grid-test.code{background: #eee}
23 | footer{border-top: 3px solid #ccc;clear: both; margin-top: 1em;display: block;float: left;width: 100%;padding-top: 1em}
24 | .author img{
25 |     border-radius: 100%;
26 |     -webkit-border-radius: 100%;
27 |     -moz-border-radius: 100%;
28 |     border:3px solid #fff;
29 |     box-shadow: 0 0 8px #ccc;
30 |     -moz-box-shadow: 0 0 8px #ccc;
31 |     -webkit-box-shadow: 0 0 8px #ccc;
32 | }
33 | .author{text-align: center}
34 | .author .i-img{text-align: center; }
35 | .download{font-size:1em; display: block; background:#C3E4DF; text-decoration: none; text-align: center;color:#333;height: 3em;line-height: 3em; }
36 | .download:hover{background: #3f6fa0;color:#fff}
37 | h2 small {font-size: 0.5em}
38 | .shareBox{padding-top: 2em;padding-bottom: 2em}
39 | .copy{border-top:1px solid #ccc}
40 | .html5ninja a{text-decoration: none;font-size: 0.8em}
41 | .html5ninja  img{margin-right: 3px}


--------------------------------------------------------------------------------
/assets/zied-hosni.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/html5-ninja/icecream/b3daa9a6ab00317a1fc35f7d6382926733b4b0b2/assets/zied-hosni.jpg


--------------------------------------------------------------------------------
/css/icecream-grid.css:
--------------------------------------------------------------------------------
  1 | /*-------------------------------------------------------- 
  2 |     IceCream 0.1.0
  3 |     Created on : 23 nov. 2013, 20:07:41
  4 |     Author     : HTML5 Ninja - twitter @html5_ninja
  5 |                  zied hosni - zied.hosni.mail@gmail.com
  6 |     More info  : http://html5-ninja.com/icecream
  7 | --------------------------------------------------------*/
  8 | /*-------------------------------------------------------- 
  9 |     Grids
 10 | --------------------------------------------------------*/
 11 | .i-g {
 12 |   clear: both;
 13 |   -ms-box-sizing: border-box;
 14 |   -moz-box-sizing: border-box;
 15 |   -webkit-box-sizing: border-box;
 16 |   box-sizing: border-box;
 17 | }
 18 | .i-g > div {
 19 |   margin: 0.5208333333333334% 1.0416666666666667%;
 20 |   float: left;
 21 |   -ms-box-sizing: border-box;
 22 |   -moz-box-sizing: border-box;
 23 |   -webkit-box-sizing: border-box;
 24 |   box-sizing: border-box;
 25 | }
 26 | .i-g .i-0 {
 27 |   display: none;
 28 | }
 29 | .i-g .i-1 {
 30 |   width: 6.25%;
 31 | }
 32 | .i-g .i-2 {
 33 |   width: 14.583333333333334%;
 34 | }
 35 | .i-g .i-3 {
 36 |   width: 22.916666666666668%;
 37 | }
 38 | .i-g .i-4 {
 39 |   width: 31.250000000000004%;
 40 | }
 41 | .i-g .i-5 {
 42 |   width: 39.583333333333336%;
 43 | }
 44 | .i-g .i-6 {
 45 |   width: 47.91666666666667%;
 46 | }
 47 | .i-g .i-7 {
 48 |   width: 56.25000000000001%;
 49 | }
 50 | .i-g .i-8 {
 51 |   width: 64.58333333333334%;
 52 | }
 53 | .i-g .i-9 {
 54 |   width: 72.91666666666667%;
 55 | }
 56 | .i-g .i-10 {
 57 |   width: 81.25%;
 58 | }
 59 | .i-g .i-11 {
 60 |   width: 89.58333333333334%;
 61 | }
 62 | .i-g .i-12 {
 63 |   width: 97.91666666666667%;
 64 | }
 65 | .i-container {
 66 |   width: 980px;
 67 |   margin: auto;
 68 | }
 69 | .i-img img {
 70 |   max-width: 100%;
 71 | }
 72 | @media only screen {
 73 |   /* Smartphones (portrait) ----------- */
 74 |   /* Smartphones (landscape) ----------- */
 75 |   /* tablet (portrait) ----------- */
 76 |   /* tablet (landscape) ----------- */
 77 | }
 78 | @media only screen and (max-width: 980px) {
 79 |   .i-container {
 80 |     width: 100%;
 81 |   }
 82 | }
 83 | @media only screen and (max-width: 320px) {
 84 |   .i-g .i-mp-0 {
 85 |     display: none;
 86 |   }
 87 |   .i-g .i-mp-1 {
 88 |     width: 22.916666666666668%;
 89 |   }
 90 |   .i-g .i-mp-2 {
 91 |     width: 47.91666666666667%;
 92 |   }
 93 |   .i-g .i-mp-3 {
 94 |     width: 72.91666666666667%;
 95 |   }
 96 |   .i-g .i-mp-4 {
 97 |     width: 97.91666666666667%;
 98 |   }
 99 | }
100 | @media only screen and (min-width: 321px) and (max-width: 480px) {
101 |   .i-g .i-ml-0 {
102 |     display: none;
103 |   }
104 |   .i-g .i-ml-1 {
105 |     width: 22.916666666666668%;
106 |   }
107 |   .i-g .i-ml-2 {
108 |     width: 47.91666666666667%;
109 |   }
110 |   .i-g .i-ml-3 {
111 |     width: 72.91666666666667%;
112 |   }
113 |   .i-g .i-ml-4 {
114 |     width: 97.91666666666667%;
115 |   }
116 | }
117 | @media only screen and (min-width: 481px) and (max-width: 768px) {
118 |   .i-g .i-tp-0 {
119 |     display: none;
120 |   }
121 |   .i-g .i-tp-1 {
122 |     width: 22.916666666666668%;
123 |   }
124 |   .i-g .i-tp-2 {
125 |     width: 47.91666666666667%;
126 |   }
127 |   .i-g .i-tp-3 {
128 |     width: 72.91666666666667%;
129 |   }
130 |   .i-g .i-tp-4 {
131 |     width: 97.91666666666667%;
132 |   }
133 | }
134 | @media only screen and (min-width: 769px) and (max-width: 1024px) {
135 |   .i-g .i-tl-0 {
136 |     display: none;
137 |   }
138 |   .i-g .i-tl-1 {
139 |     width: 22.916666666666668%;
140 |   }
141 |   .i-g .i-tl-2 {
142 |     width: 47.91666666666667%;
143 |   }
144 |   .i-g .i-tl-3 {
145 |     width: 72.91666666666667%;
146 |   }
147 |   .i-g .i-tl-4 {
148 |     width: 97.91666666666667%;
149 |   }
150 | }
151 | 


--------------------------------------------------------------------------------
/css/icecream-grid.min.css:
--------------------------------------------------------------------------------
1 | .i-g{clear:both;-ms-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.i-g>div{margin:.5208333333333334% 1.0416666666666667%;float:left;-ms-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.i-g .i-0{display:none}.i-g .i-1{width:6.25%}.i-g .i-2{width:14.583333333333334%}.i-g .i-3{width:22.916666666666668%}.i-g .i-4{width:31.250000000000004%}.i-g .i-5{width:39.583333333333336%}.i-g .i-6{width:47.91666666666667%}.i-g .i-7{width:56.25000000000001%}.i-g .i-8{width:64.58333333333334%}.i-g .i-9{width:72.91666666666667%}.i-g .i-10{width:81.25%}.i-g .i-11{width:89.58333333333334%}.i-g .i-12{width:97.91666666666667%}.i-container{width:980px;margin:auto}.i-img img{max-width:100%}@media only screen and (max-width:980px){.i-container{width:100%}}@media only screen and (max-width:320px){.i-g .i-mp-0{display:none}.i-g .i-mp-1{width:22.916666666666668%}.i-g .i-mp-2{width:47.91666666666667%}.i-g .i-mp-3{width:72.91666666666667%}.i-g .i-mp-4{width:97.91666666666667%}}@media only screen and (min-width:321px) and (max-width:480px){.i-g .i-ml-0{display:none}.i-g .i-ml-1{width:22.916666666666668%}.i-g .i-ml-2{width:47.91666666666667%}.i-g .i-ml-3{width:72.91666666666667%}.i-g .i-ml-4{width:97.91666666666667%}}@media only screen and (min-width:481px) and (max-width:768px){.i-g .i-tp-0{display:none}.i-g .i-tp-1{width:22.916666666666668%}.i-g .i-tp-2{width:47.91666666666667%}.i-g .i-tp-3{width:72.91666666666667%}.i-g .i-tp-4{width:97.91666666666667%}}@media only screen and (min-width:769px) and (max-width:1024px){.i-g .i-tl-0{display:none}.i-g .i-tl-1{width:22.916666666666668%}.i-g .i-tl-2{width:47.91666666666667%}.i-g .i-tl-3{width:72.91666666666667%}.i-g .i-tl-4{width:97.91666666666667%}}


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <title>IceCream - Simple and light responsive grid system</title>
  5 |         <meta charset="UTF-8">
  6 |         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7 |         <meta name="keywords" content="css3, grid, html5" >
  8 |         <meta name="description" content="Sometimes you just need a grid system, everything else is excess, with the iceCream syntax this can be done easily and faster." >
  9 |         <link href="css/icecream-grid.min.css" rel="stylesheet" />
 10 |         <link href="assets/style.css" rel="stylesheet" />
 11 |         <script>
 12 |             var _gaq = _gaq || [];
 13 |             _gaq.push(['_setAccount', 'UA-32531891-1']);
 14 |             _gaq.push(['_trackPageview']);
 15 | 
 16 |             (function() {
 17 |                 var ga = document.createElement('script');
 18 |                 ga.type = 'text/javascript';
 19 |                 ga.async = true;
 20 |                 ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
 21 |                 var s = document.getElementsByTagName('script')[0];
 22 |                 s.parentNode.insertBefore(ga, s);
 23 |             })();
 24 |         </script>
 25 |     </head>
 26 |     <body>
 27 |         <header>
 28 |             <div class="i-container">
 29 |                 <div class="i-g">
 30 |                     <div class="i-4 i-mp-1 i-ml-1"></div>
 31 |                     <div class="i-4 i-mp-2 i-ml-2">
 32 |                         <div class="i-img">
 33 |                             <img src="assets/icecream-ninja.png" alt="IceCream Ninja" />
 34 |                         </div>
 35 |                     </div>
 36 |                     <div class="i-4 i-mp-1 i-ml-1"></div>
 37 |                     <div class="i-12 well">
 38 |                         <h1>IceCream</h1>
 39 |                         <p><strong>Simple and light responsive grid system</strong></p>
 40 |                     </div>
 41 |                 </div>
 42 |             </div>
 43 |         </header>
 44 |         <div class="wrapper">
 45 |             <div class="i-container">
 46 |                 <div class="i-g">
 47 |                     <div class="i-12">
 48 |                         <br/>
 49 |                         <h2>The Grid <small>(uncompressed 2.9kb, minified 1.8kb)</small></h2>
 50 |                         <p>Sometimes you just need a grid system, everything else is excess, with the <b>iceCream</b> syntax this can be done easily and faster.</p>
 51 |                     </div>
 52 |                 </div>    
 53 |                 <div class="i-g">
 54 |                     <div class="i-12">
 55 |                         <h3>And it's look like that</h3>
 56 |                     </div>
 57 |                 </div>
 58 |                 <div class="grid-test">
 59 |                     <div class="i-g">
 60 |                         <div class="i-1">i-1</div>
 61 |                         <div class="i-1">i-1</div>
 62 |                         <div class="i-1">i-1</div>
 63 |                         <div class="i-1">i-1</div>
 64 |                         <div class="i-1">i-1</div>
 65 |                         <div class="i-1">i-1</div>
 66 |                         <div class="i-1">i-1</div>
 67 |                         <div class="i-1">i-1</div>
 68 |                         <div class="i-1">i-1</div>
 69 |                         <div class="i-1">i-1</div>
 70 |                         <div class="i-1">i-1</div>
 71 |                         <div class="i-1">i-1</div>
 72 |                         <div class="i-1">i-1</div>
 73 |                         <div class="i-11">i-11</div>
 74 |                         <div class="i-2">i-2</div>
 75 |                         <div class="i-10">i-10</div>
 76 |                         <div class="i-3">i-3</div>
 77 |                         <div class="i-9">i-9</div>
 78 |                         <div class="i-4">i-4</div>
 79 |                         <div class="i-8">i-8</div>
 80 |                         <div class="i-5">i-5</div>
 81 |                         <div class="i-7">i-7</div>
 82 |                         <div class="i-6">i-6</div>
 83 |                         <div class="i-6">i-6</div>
 84 |                         <div class="i-12">i-12</div>
 85 |                     </div>
 86 |                 </div>
 87 | 
 88 |                 <div class="i-g">
 89 |                     <div class="i-12">
 90 |                         <h3><b>i</b> for iceCream</h3>
 91 |                         <ul>
 92 |                             <li><b>i-container</b> : a 980px container, for full width page just remove this class</li>
 93 |                             <li><b>i-g</b> : <b>"g"</b> for grid , the grid class</li>
 94 |                             <li><b>i-*</b> : iceCream grid is 12 columns layout starting from <b>i-0</b> <small>(for hiding)</small> to <b>i-12</b> <small>(100% width)</small></li>
 95 |                             <li><b>i-mp-*</b> : <b>"mp"</b> for <b>mobile portrait</b> a 4 columns layout starting from <b>i-mp-0</b> <small>(for hiding)</small> to <b>i-mp-4</b> <small>(100% width)</small></li>
 96 |                             <li><b>i-ml-*</b> : <b>"ml"</b> for <b>mobile landscape</b> a 4 columns layout starting from <b>i-ml-0</b> <small>(for hiding)</small> to <b>i-ml-4</b> <small>(100% width)</small></li>
 97 |                             <li><b>i-tp-*</b> : <b>"tp"</b> for <b>tablet portrait</b> a 4 columns layout starting from <b>i-tp-0</b> <small>(for hiding)</small> to <b>i-tp-4</b> <small>(100% width)</small></li>
 98 |                             <li><b>i-tl-*</b> : <b>"tl"</b> for <b>tablet landscape</b> a 4 columns layout starting from <b>i-tl-0</b> <small>(for hiding)</small> to <b>i-tl-4</b> <small>(100% width)</small></li>
 99 |                             <li><b>i-img</b> : wrap image to fit the parent column width </li>
100 |                         </ul>
101 |                     </div>
102 |                 </div>
103 | 
104 |                 <div class="i-g">
105 |                     <div class="i-12">
106 |                         <h3>Sample grid code</h3>
107 |                         <div class="code">
108 |                             <pre class="prettyprint">
109 |  &nbsp;&lt;div class="i-container"&gt;
110 |  &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="i-g"&gt;
111 |  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="i-4"&gt;i-4&lt;/div&gt;
112 |  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="i-8"&gt;i-8&lt;/div&gt;
113 |  &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
114 |  &nbsp;&lt;/div&gt;
115 |                             </pre>
116 |                         </div>
117 |                     </div> 
118 |                 </div>
119 |                 <div class="grid-test">
120 |                     <!-- sample code demo -->
121 |                     <div class="i-container">
122 |                         <div class="i-g">
123 |                             <div class="i-4">i-4</div>
124 |                             <div class="i-8">i-8</div>
125 |                         </div>
126 |                     </div>
127 |                     <!-- sample code demo -->
128 |                 </div>
129 |             </div>
130 |             <div class="i-container">
131 |                 <div class="i-g">
132 |                     <div class="i-12">
133 |                         <h3>Different screen sizes and columns behaviour</h3>
134 |                         <div class="code">
135 |                             <pre class="prettyprint">
136 |     &lt;div class=&quot;i-g&quot;&gt;
137 |         &lt;div class=&quot;i-8 i-mp-1 i-tp-2 i-tl-1&quot;&gt;i-8 i-mp-1 i-tp-2 i-tl-1&lt;/div&gt;
138 |         &lt;div class=&quot;i-4 i-mp-3 i-tp-2 i-tl-1&quot;&gt;i-4 i-mp-3 i-tp-2 i-tl-1&lt;/div&gt;           
139 |         &lt;div class=&quot;i-12 i-mp-2 i-ml-2 i-tp-2  i-tl-1&quot;&gt;i-12 i-mp-2 i-ml-2 i-tp-2  i-tl-1&lt;/div&gt;           
140 |         &lt;div class=&quot;i-12 i-mp-2 i-tp-2  i-tl-1&quot;&gt;i-12 i-mp-2 i-tp-2  i-tl-1&lt;/div&gt;           
141 |     &lt;/div&gt;                               
142 |                             </pre>
143 |                         </div>
144 |                         <p>Resize your browser to try it</p>
145 |                     </div>
146 |                 </div>
147 | 
148 |                 <div class="grid-test">
149 |                     <div class="i-g">
150 |                         <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>
151 |                         <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>           
152 |                         <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>           
153 |                         <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>           
154 |                     </div>
155 |                 </div>
156 |                 <div class="i-g">
157 |                     <div class="i-12">
158 |                         <footer>
159 |                             <div class="i-g">
160 |                                 <div class="i-4 i-mp-4 i-ml-4 i-tp-2 html5ninja"> 
161 |                                     <h4>Start selling your HTML5 creation</h4>
162 |                                     <p>
163 |                                         <a href="http://html5-ninja.com">
164 |                                             <img align="left" src="http://html5-ninja.com/front/images/little-ninja.png" alt="html5 ninja"/>
165 |                                             html5-ninja.com is a marketplace where authors & designers propose their creations (themes, scripts... ) for selling.
166 |                                         </a>
167 |                                     </p>
168 |                                 </div>
169 |                                 <div class="i-4 i-ml-4 i-mp-4 i-tp-2">
170 |                                     <a href="https://github.com/html5-ninja/icecream" class="download">Download v0.1 on gitHub</a>
171 |                                     <div class="shareBox">
172 |                                         <div class="fb-like" data-href="http://html5-ninja.com/icecream" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div> 
173 |                                         &nbsp;<a href="https://twitter.com/share" class="twitter-share-button" data-via="html5_ninja">Tweet</a>
174 |                                         <script>!function(d, s, id) {
175 |                                                 var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
176 |                                                 if (!d.getElementById(id)) {
177 |                                                     js = d.createElement(s);
178 |                                                     js.id = id;
179 |                                                     js.src = p + '://platform.twitter.com/widgets.js';
180 |                                                     fjs.parentNode.insertBefore(js, fjs);
181 |                                                 }
182 |                                             }(document, 'script', 'twitter-wjs');</script>
183 | 
184 |                                         <!-- Place this tag where you want the share button to render. -->
185 |                                         <div class="g-plus" data-action="share" data-annotation="bubble"></div>
186 | 
187 |                                         <!-- Place this tag after the last share tag. -->
188 |                                         <script type="text/javascript">
189 |                                             (function() {
190 |                                                 var po = document.createElement('script');
191 |                                                 po.type = 'text/javascript';
192 |                                                 po.async = true;
193 |                                                 po.src = 'https://apis.google.com/js/platform.js';
194 |                                                 var s = document.getElementsByTagName('script')[0];
195 |                                                 s.parentNode.insertBefore(po, s);
196 |                                             })();
197 |                                         </script>
198 | 
199 |                                         <!-- Place this tag where you want the su badge to render -->
200 |                                         <su:badge layout="1"></su:badge>
201 | 
202 |                                         <!-- Place this snippet wherever appropriate -->
203 |                                         <script type="text/javascript">
204 |                                             (function() {
205 |                                                 var li = document.createElement('script');
206 |                                                 li.type = 'text/javascript';
207 |                                                 li.async = true;
208 |                                                 li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
209 |                                                 var s = document.getElementsByTagName('script')[0];
210 |                                                 s.parentNode.insertBefore(li, s);
211 |                                             })();
212 |                                         </script>
213 | 
214 |                                     </div>
215 |                                 </div>
216 | 
217 |                                 <div class="i-4 i-ml-4 i-mp-4 i-tp-4 author">
218 |                                     <div class="i-img">
219 |                                         <a href="https://plus.google.com/+ziedhosni" target="_blank">
220 |                                             <img src="assets/zied-hosni.jpg" alt="" />
221 |                                         </a>
222 |                                     </div>
223 |                                     Zied Hosni / zied.hosni.mail@gmail.com
224 |                                 </div>
225 |                                 <div class="i-12 copy">
226 |                                     <br/>
227 |                                     &copy; <a href="http://html5-ninja.com">HTML5 Ninja</a> - Code licensed under <a href="http://www.wtfpl.net/" target="_blank">WTFPL</a>
228 |                                 </div>
229 |                             </div>
230 |                         </footer>
231 |                     </div>
232 |                 </div>
233 |             </div>
234 |         </div>
235 |         <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
236 |         <div id="fb-root"></div>
237 |         <script>
238 |                                             (function(d, s, id) {
239 |                                                 var js, fjs = d.getElementsByTagName(s)[0];
240 |                                                 if (d.getElementById(id))
241 |                                                     return;
242 |                                                 js = d.createElement(s);
243 |                                                 js.id = id;
244 |                                                 js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=378424785574976";
245 |                                                 fjs.parentNode.insertBefore(js, fjs);
246 |                                             }(document, 'script', 'facebook-jssdk'));
247 |         </script>
248 |     </body>
249 | </html>
250 | 


--------------------------------------------------------------------------------
/less/elements.less:
--------------------------------------------------------------------------------
  1 | //---------------------------------------------------
  2 | //    LESS Elements 0.9
  3 | //  ---------------------------------------------------
  4 | //    A set of useful LESS mixins
  5 | //    More info at: http://lesselements.com
  6 | //  ---------------------------------------------------
  7 | 
  8 | .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  9 |   background: @color;
 10 |   background: -webkit-gradient(linear,
 11 |                                left bottom,
 12 |                                left top,
 13 |                                color-stop(0, @start),
 14 |                                color-stop(1, @stop));
 15 |   background: -ms-linear-gradient(bottom,
 16 |                                   @start,
 17 |                                   @stop);
 18 |   background: -moz-linear-gradient(center bottom,
 19 |                                    @start 0%,
 20 |                                    @stop 100%);
 21 |   background: -o-linear-gradient(@stop,
 22 |                                  @start);
 23 |   filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
 24 | }
 25 | .bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
 26 |   background: @color;
 27 |   background: -webkit-gradient(linear,
 28 |                                left bottom,
 29 |                                left top,
 30 |                                color-stop(0, rgb(@start,@start,@start)),
 31 |                                color-stop(1, rgb(@stop,@stop,@stop)));
 32 |   background: -ms-linear-gradient(bottom,
 33 |                                   rgb(@start,@start,@start) 0%,
 34 |                                   rgb(@stop,@stop,@stop) 100%);
 35 |   background: -moz-linear-gradient(center bottom,
 36 |                                    rgb(@start,@start,@start) 0%,
 37 |                                    rgb(@stop,@stop,@stop) 100%);
 38 |   background: -o-linear-gradient(rgb(@stop,@stop,@stop),
 39 |                                  rgb(@start,@start,@start));
 40 |   filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
 41 | }
 42 | .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
 43 |   border-top: solid 1px @top-color;
 44 |   border-left: solid 1px @left-color;
 45 |   border-right: solid 1px @right-color;
 46 |   border-bottom: solid 1px @bottom-color;
 47 | }
 48 | .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
 49 |   -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
 50 |   -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
 51 |   box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
 52 | }
 53 | .rounded(@radius: 2px) {
 54 |   -webkit-border-radius: @radius;
 55 |   -moz-border-radius: @radius;
 56 |   border-radius: @radius;
 57 | }
 58 | .border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
 59 |   -webkit-border-top-right-radius: @topright;
 60 |   -webkit-border-bottom-right-radius: @bottomright;
 61 |   -webkit-border-bottom-left-radius: @bottomleft;
 62 |   -webkit-border-top-left-radius: @topleft;
 63 |   -moz-border-radius-topright: @topright;
 64 |   -moz-border-radius-bottomright: @bottomright;
 65 |   -moz-border-radius-bottomleft: @bottomleft;
 66 |   -moz-border-radius-topleft: @topleft;
 67 |   border-top-right-radius: @topright;
 68 |   border-bottom-right-radius: @bottomright;
 69 |   border-bottom-left-radius: @bottomleft;
 70 |   border-top-left-radius: @topleft;
 71 |   .background-clip(padding-box);
 72 | }
 73 | .opacity(@opacity: 0.5) {
 74 |   -moz-opacity: @opacity;
 75 |   -khtml-opacity: @opacity;
 76 |   -webkit-opacity: @opacity;
 77 |   opacity: @opacity;
 78 |   @opperc: @opacity * 100;
 79 |   -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
 80 |   filter: ~"alpha(opacity=@{opperc})";
 81 | }
 82 | .transition-duration(@duration: 0.2s) {
 83 |   -moz-transition-duration: @duration;
 84 |   -webkit-transition-duration: @duration;
 85 |   -o-transition-duration: @duration;
 86 |   transition-duration: @duration;
 87 | }
 88 | .transform(...) {
 89 |   -webkit-transform: @arguments;
 90 |   -moz-transform: @arguments;
 91 |   -o-transform: @arguments;
 92 |   -ms-transform: @arguments;
 93 |   transform: @arguments;
 94 | }
 95 | .rotation(@deg:5deg){
 96 |   .transform(rotate(@deg));
 97 | }
 98 | .scale(@ratio:1.5){
 99 |   .transform(scale(@ratio));
100 | }
101 | .transition(@duration:0.2s, @ease:ease-out) {
102 |   -webkit-transition: all @duration @ease;
103 |   -moz-transition: all @duration @ease;
104 |   -o-transition: all @duration @ease;
105 |   transition: all @duration @ease;
106 | }
107 | .inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
108 |   -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
109 |   -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
110 |   box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
111 | }
112 | .box-shadow(@arguments) {
113 |   -webkit-box-shadow: @arguments;
114 |   -moz-box-shadow: @arguments;
115 |   box-shadow: @arguments;
116 | }
117 | .box-sizing(@sizing: border-box) {
118 |   -ms-box-sizing: @sizing;
119 |   -moz-box-sizing: @sizing;
120 |   -webkit-box-sizing: @sizing;
121 |   box-sizing: @sizing;
122 | }
123 | .user-select(@argument: none) {
124 |   -webkit-user-select: @argument;
125 |   -moz-user-select: @argument;
126 |   -ms-user-select: @argument;
127 |   user-select: @argument;
128 | }
129 | .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
130 |   -moz-column-width: @colwidth;
131 |   -moz-column-count: @colcount;
132 |   -moz-column-gap: @colgap;
133 |   -moz-column-rule-color: @columnRuleColor;
134 |   -moz-column-rule-style: @columnRuleStyle;
135 |   -moz-column-rule-width: @columnRuleWidth;
136 |   -webkit-column-width: @colwidth;
137 |   -webkit-column-count: @colcount;
138 |   -webkit-column-gap: @colgap;
139 |   -webkit-column-rule-color: @columnRuleColor;
140 |   -webkit-column-rule-style: @columnRuleStyle;
141 |   -webkit-column-rule-width: @columnRuleWidth;
142 |   column-width: @colwidth;
143 |   column-count: @colcount;
144 |   column-gap: @colgap;
145 |   column-rule-color: @columnRuleColor;
146 |   column-rule-style: @columnRuleStyle;
147 |   column-rule-width: @columnRuleWidth;
148 | }
149 | .translate(@x:0, @y:0) {
150 |   .transform(translate(@x, @y));
151 | }
152 | .background-clip(@argument: padding-box) {
153 |   -moz-background-clip: @argument;
154 |   -webkit-background-clip: @argument;
155 |   background-clip: @argument;
156 | }


--------------------------------------------------------------------------------
/less/icecream-grid.less:
--------------------------------------------------------------------------------
  1 | /*-------------------------------------------------------- 
  2 |     IceCream 0.1.0
  3 |     Created on : 23 nov. 2013, 20:07:41
  4 |     Author     : HTML5 Ninja - twitter @html5_ninja
  5 |                  zied hosni - zied.hosni.mail@gmail.com
  6 |     More info  : http://html5-ninja.com/icecream
  7 | --------------------------------------------------------*/
  8 | @import 'elements';
  9 | /*-------------------------------------------------------- 
 10 |     Grids
 11 | --------------------------------------------------------*/
 12 | // unit mesure 
 13 | @unit : 100% / 48; 
 14 | @colMargin : 100% / 48 / 2;
 15 | // grid columns width
 16 | @width1 :  @unit*3 ;
 17 | @width2 :  @unit*7; 
 18 | @width3 :  @unit*11; 
 19 | @width4 :  @unit*15; 
 20 | @width5 :  @unit*19; 
 21 | @width6 :  @unit*23; 
 22 | @width7 :  @unit*27; 
 23 | @width8 :  @unit*31; 
 24 | @width9 :  @unit*35; 
 25 | @width10 :  @unit*39; 
 26 | @width11 :  @unit*43; 
 27 | @width12 :  @unit*47; 
 28 | // grid columns mixins
 29 | .gridColMargin(){margin : @colMargin/2 @colMargin;}
 30 | .col(){.gridColMargin;float:left;.box-sizing();}
 31 | // grid & cols
 32 | .i-g{
 33 |     clear:both;
 34 |     .box-sizing;
 35 |     > div{.col;}
 36 |     .i-0{display:none}
 37 |     .i-1{width:@width1;}
 38 |     .i-2{width:@width2;}
 39 |     .i-3{width:@width3;}
 40 |     .i-4{width:@width4;}
 41 |     .i-5{width:@width5;}
 42 |     .i-6{width:@width6;}
 43 |     .i-7{width:@width7;}
 44 |     .i-8{width:@width8;}
 45 |     .i-9{width:@width9;}
 46 |     .i-10{width:@width10;}
 47 |     .i-11{width:@width11;} 
 48 |     .i-12{width:@width12;} 
 49 | }
 50 | .i-container{width:980px;margin:auto}
 51 | .i-img img{max-width:100%}
 52 | 
 53 | @media only screen {
 54 |     
 55 |     @media (max-width : 980px){
 56 |         .i-container{width:100%}
 57 |     }
 58 | 
 59 |     /* Smartphones (portrait) ----------- */
 60 |     @media (max-width:320px) {
 61 |         .i-g{
 62 |             .i-mp-0 {display:none}
 63 |             .i-mp-1 {width:@width3}
 64 |             .i-mp-2 {width:@width6}
 65 |             .i-mp-3 {width:@width9}
 66 |             .i-mp-4 {width:@width12}
 67 |         }
 68 |     }
 69 | 
 70 |     /* Smartphones (landscape) ----------- */
 71 |     @media (min-width : 321px) and (max-width:480px) {
 72 |         .i-g{
 73 |             .i-ml-0 {display:none}
 74 |             .i-ml-1 {width:@width3}
 75 |             .i-ml-2 {width:@width6}
 76 |             .i-ml-3 {width:@width9}
 77 |             .i-ml-4 {width:@width12}
 78 |         }
 79 |     }
 80 | 
 81 |     /* tablet (portrait) ----------- */
 82 |     @media  (min-width : 481px) and (max-width:768px) {
 83 |         .i-g{
 84 |             .i-tp-0 {display:none}
 85 |             .i-tp-1 {width:@width3}
 86 |             .i-tp-2 {width:@width6}
 87 |             .i-tp-3 {width:@width9}
 88 |             .i-tp-4 {width:@width12}
 89 |         }
 90 |     }
 91 | 
 92 |     /* tablet (landscape) ----------- */
 93 |     @media  (min-width : 769px) and (max-width:1024px) {
 94 |         .i-g{
 95 |             .i-tl-0 {display:none}
 96 |             .i-tl-1 {width:@width3}
 97 |             .i-tl-2 {width:@width6}
 98 |             .i-tl-3 {width:@width9}
 99 |             .i-tl-4 {width:@width12}
100 |         }
101 |     }
102 | }


--------------------------------------------------------------------------------