Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Salvattore

 Salvattore

Presented today at Startech by Giorgio Leveroni.

Rolando Murillo

October 26, 2013
Tweet

Other Decks in Design

Transcript

  1. 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>
  2. 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>
  3. 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>
  4. <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
  5. 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>
  6. @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