OOCSS - SMACSS - BEM

OOCSS - SMACSS - BEM

Prezentace z ostravského srazu Frontendistů 25.4.2014.

Edaa92fe8674c00b7ce852990a2d2737?s=128

Patrik Illy

April 27, 2014
Tweet

Transcript

  1. 8.
  2. 10.

    .MEDIA OBJEKT Lorem ipsum dolor sit amet, consectetur adipisicing elit,

    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  3. 11.

    <div class="media"> <a class="media__img" href=“#"> <img src="" alt=“"> </a> <p

    class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
  4. 12.

    .media { @extend %u-cf; display: block; } ! .media__img {

    float: left; margin-right: $base-unit; } ! .media__img img { display: block; } ! .media__body { overflow: hidden; }
  5. 14.

    <div class="media"> ! <a class="media__img media__img--rev" href=“#"> <img src="" alt=“">

    </a> ! <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
  6. 16.
  7. 17.

    <div class="panel"> <div class="panel__heading"> <h3 class="panel__title">Panel title</h3> </div> <div class="panel__body">

    Panel content </div> </div> ! <div class="panel panel--default">...</div> <div class="panel panel--primary">...</div>
  8. 24.
  9. 29.