Salvattore

Presented today at Startech by Giorgio Leveroni.

Transcript

2. THE PROBLEM
3. THE “SOLUTION”
4. THE PROBLEM WITH THE “SOLUTION” MADNESS IMAGELOAD? JS-DEFINED LAYOUT
6. EASY SETUP, CSS-ORIENTED <section class=“test”>
 <div class=“item”>Item 1</div>
 <div class=“item”>Item 2</div>
 <div class=“item”>Item 3</div>
 …
 <div class=“item”>Item 20</div>
 </section>
7. EASY SETUP, CSS-ORIENTED <div class=“item”>
 Item 1
 </div> <div class=“item”>
 Item 2
 </div> <div class=“item”>
 Item 3
 </div> <div class=“item”>
 Item 4
 </div> <div class=“item”>
 Item 5
 </div> <div class=“item”>
 Item 6
 </div>
8. EASY SETUP, CSS-ORIENTED <section class=“test” data-columns>
 <div class=“item”>Item 1</div>
 <div class=“item”>Item 2</div>
 <div class=“item”>Item 3</div>
 …
 <div class=“item”>Item 20</div>
 </section>
9. .test[data-columns]::before {
 content: ‘3 .column.size-1of3’
 } EASY SETUP, CSS-ORIENTED .column {
 float: left;
 } 
 .size-1of3 {
 width: 33.333%;
 }
10. <section class=“test” data-columns>
 <div class=“column size-1of3”>
 <div class=“item”>Item 1</div>
 <div class=“item”>Item 4</div> 
 …
 </div>
 <div class=“column size-1of3”>
 <div class=“item”>Item 2</div>
 <div class=“item”>Item 5</div> 
 …
 </div>
 <div class=“column size-1of3”>
 <div class=“item”>Item 3</div>
 <div class=“item”>Item 6</div>
 …
 </div>
 </section> EASY SETUP, CSS-ORIENTED
11. PROBLEM SOLVED, THE RIGHT WAY <div class=“item”>
 Item 1
 </div> <div class=“item”>
 Item 2
 </div> <div class=“item”>
 Item 3
 </div> <div class=“item”>
 Item 4
 </div> <div class=“item”>
 Item 5
 </div> <div class=“item”>
 Item 6
 </div>
12. @media screen and (min-width: 481px) and .test[data-columns]::before {
 content: ‘2 .column.size-1of2’
 }
 } @media screen and (min-width: 601px) and .test[data-columns]::before {
 content: ‘3 .column.size-1of3’
 }
 } MEDIA QUERIES COMPATIBLE
13. IN USE lamula.pe tadpoles.in
14. GIVE IT A TRY salvattore.com
 by @rnmp and @ppold