katonada
7/1/2014 - 3:37 AM

Generated by SassMeister.com.

Generated by SassMeister.com.

SassMeister-rendered.html
content_copyfile_download
<!-- Pravi primjer SASS + BEM + Dokumentacija -->

<ul class="list_block--02" style="width:600px">

    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">

                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a8/48/a848c4ee2c5046fe0e4b59d5cc12df6a.jpg">
                </figure>

                <div class="data block__data">
                    <strong class="data__subtitle">Tjedna inventura</strong>
                    <h2 class="data__title">'Dalmatinka, Srbijanka' Severina i posprdni Davor Šuker – koja motivacija za hrvatske nogometaše!</h2>
                </div>

            </a>
        </article>
    </li>

    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">

                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a7/cd/a7cd060be10b78f6e33f3df579025100.jpg">
                </figure>

                <div class="data block__data">
                    <strong class="data__subtitle">prof. dr. Mirjana Kasapović</strong>
                    <h2 class="data__title">Ministar Mornar u politici se ponaša kao Alisa u zemlji čudesa</h2>
                </div>

            </a>
        </article>
    </li>

    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">

                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/4e/5d/4e5dd8fc9d2a5861ebd01d253391b8f3.jpg">
                </figure>

                <div class="data block__data">
                    <strong class="data__subtitle">maja šuput</strong>
                    <h2 class="data__title">Idealan odmor bio bi u zatvoru, ondje nema alkohola ni muškaraca</h2>
                </div>

            </a>
        </article>
    </li>

</ul>

<ul class="list_block--02 fig_small" style="width:600px">

    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">

                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a8/48/a848c4ee2c5046fe0e4b59d5cc12df6a.jpg">
                </figure>

                <div class="data block__data">
                    <strong class="data__subtitle">Tjedna inventura</strong>
                    <h2 class="data__title">'Dalmatinka, Srbijanka' Severina i posprdni Davor Šuker – koja motivacija za hrvatske nogometaše!</h2>
                </div>

            </a>
        </article>
    </li>

    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">

                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a7/cd/a7cd060be10b78f6e33f3df579025100.jpg">
                </figure>

                <div class="data block__data">
                    <strong class="data__subtitle">prof. dr. Mirjana Kasapović</strong>
                    <h2 class="data__title">Ministar Mornar u politici se ponaša kao Alisa u zemlji čudesa</h2>
                </div>

            </a>
        </article>
    </li>

    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">

                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/4e/5d/4e5dd8fc9d2a5861ebd01d253391b8f3.jpg">
                </figure>

                <div class="data block__data">
                    <strong class="data__subtitle">maja šuput</strong>
                    <h2 class="data__title">Idealan odmor bio bi u zatvoru, ondje nema alkohola ni muškaraca</h2>
                </div>

            </a>
        </article>
    </li>

</ul>
SassMeister-output.css
content_copyfile_download
@charset "UTF-8";
.img_block {
  display: block;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.img_block__image {
  width: 100%;
  display: block;
}

.list_block--02 {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.block__figure {
  display: block;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.block__image {
  width: 100%;
  display: block;
}
.list_block--02 .block {
  padding: 0 15px;
  position: relative;
  z-index: 2;
}
.list_block--02 .block__article {
  padding: 15px 5px;
  border-top: 1px solid #e3e3e3;
  overflow: hidden;
}
.list_block--02 .block:first-child .block__article {
  border: none;
}
.list_block--02 .block__link {
  color: #000;
  text-decoration: none;
  display: block;
}
.list_block--02 .block__figure {
  width: 100px;
  float: right;
  margin-left: 10px;
}
.list_block--02.fig_small .block__figure {
  width: 75px;
}

/*
Kalei style guide dokumentacija

# Liste

## list_block--02
Lista sa slikom desno
```
<ul class="list_block--02" style="width:600px">
    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">
                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a8/48/a848c4ee2c5046fe0e4b59d5cc12df6a.jpg">
                </figure>
                <div class="data block__data">
                    <strong class="data__subtitle">Tjedna inventura</strong>
                    <h2 class="data__title">'Dalmatinka, Srbijanka' Severina i posprdni Davor Šuker – koja motivacija za hrvatske nogometaše!</h2>
                </div>
            </a>
        </article>
    </li>
    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">
                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a7/cd/a7cd060be10b78f6e33f3df579025100.jpg">
                </figure>
                <div class="data block__data">
                    <strong class="data__subtitle">prof. dr. Mirjana Kasapović</strong>
                    <h2 class="data__title">Ministar Mornar u politici se ponaša kao Alisa u zemlji čudesa</h2>
                </div>
            </a>
        </article>
    </li>
    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">
                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/4e/5d/4e5dd8fc9d2a5861ebd01d253391b8f3.jpg">
                </figure>
                <div class="data block__data">
                    <strong class="data__subtitle">maja šuput</strong>
                    <h2 class="data__title">Idealan odmor bio bi u zatvoru, ondje nema alkohola ni muškaraca</h2>
                </div>
            </a>
        </article>
    </li>
</ul>
```
## list_block--02.fig_small
Lista sa slikom malom desno
```
<ul class="list_block--02 fig_small" style="width:600px">
    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">
                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a8/48/a848c4ee2c5046fe0e4b59d5cc12df6a.jpg">
                </figure>
                <div class="data block__data">
                    <strong class="data__subtitle">Tjedna inventura</strong>
                    <h2 class="data__title">'Dalmatinka, Srbijanka' Severina i posprdni Davor Šuker – koja motivacija za hrvatske nogometaše!</h2>
                </div>
            </a>
        </article>
    </li>
    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">
                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a7/cd/a7cd060be10b78f6e33f3df579025100.jpg">
                </figure>
                <div class="data block__data">
                    <strong class="data__subtitle">prof. dr. Mirjana Kasapović</strong>
                    <h2 class="data__title">Ministar Mornar u politici se ponaša kao Alisa u zemlji čudesa</h2>
                </div>
            </a>
        </article>
    </li>
    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">
                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/4e/5d/4e5dd8fc9d2a5861ebd01d253391b8f3.jpg">
                </figure>
                <div class="data block__data">
                    <strong class="data__subtitle">maja šuput</strong>
                    <h2 class="data__title">Idealan odmor bio bi u zatvoru, ondje nema alkohola ni muškaraca</h2>
                </div>
            </a>
        </article>
    </li>
</ul>
```
*/
SassMeister-input.scss
content_copyfile_download
// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

// Ovo je modul
.img_block {
  display: block;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  &__image {
    width: 100%;
    display: block;
  }
}

// i ovo je modul, BEM ispravno napisana klasa bi bila:
// .list_block--02 (.list_block sa modifierom --02˙)
.list_block--02 {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
} 

// naziv modula: $m: block;
$m: block;
.#{$m} {
  // prebačeno iz gornjeg .img_block nakon čišćenja markupa
  &__figure {
    display: block;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
  }
  &__image {
    width: 100%;
    display: block;
  }
  // ovo je modifier modula .block, nije dio bloka, nije helper klasa, 
  // u ovom selektoru se modul .block ponaša drugačije
  // slično media-query-u
  @at-root .list_block--02 &{
    padding: 0 15px;
    position: relative;
    z-index: 2;
  
    &__article {
      padding: 15px 5px;
      border-top: 1px solid #e3e3e3;
      overflow: hidden;
    }
    // ne odgovara BEM strukturi pa se piše klasično
    &:first-child .#{$m}__article {
      border: none;
    }
  
    &__link {
      color: #000;
      text-decoration: none;
      display: block;
    }
    
    &__figure {
      width: 100px;
      float: right;
      margin-left: 10px;
    }
  }
  
  // također modifier modula .block
  @at-root .list_block--02.fig_small &{
    &__figure {
      width: 75px;
    }
  }
}

/*
Kalei style guide dokumentacija

# Liste

## list_block--02
Lista sa slikom desno
```
<ul class="list_block--02" style="width:600px">
    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">
                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a8/48/a848c4ee2c5046fe0e4b59d5cc12df6a.jpg">
                </figure>
                <div class="data block__data">
                    <strong class="data__subtitle">Tjedna inventura</strong>
                    <h2 class="data__title">'Dalmatinka, Srbijanka' Severina i posprdni Davor Šuker – koja motivacija za hrvatske nogometaše!</h2>
                </div>
            </a>
        </article>
    </li>
    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">
                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a7/cd/a7cd060be10b78f6e33f3df579025100.jpg">
                </figure>
                <div class="data block__data">
                    <strong class="data__subtitle">prof. dr. Mirjana Kasapović</strong>
                    <h2 class="data__title">Ministar Mornar u politici se ponaša kao Alisa u zemlji čudesa</h2>
                </div>
            </a>
        </article>
    </li>
    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">
                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/4e/5d/4e5dd8fc9d2a5861ebd01d253391b8f3.jpg">
                </figure>
                <div class="data block__data">
                    <strong class="data__subtitle">maja šuput</strong>
                    <h2 class="data__title">Idealan odmor bio bi u zatvoru, ondje nema alkohola ni muškaraca</h2>
                </div>
            </a>
        </article>
    </li>
</ul>
```
## list_block--02.fig_small
Lista sa slikom malom desno
```
<ul class="list_block--02 fig_small" style="width:600px">
    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">
                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a8/48/a848c4ee2c5046fe0e4b59d5cc12df6a.jpg">
                </figure>
                <div class="data block__data">
                    <strong class="data__subtitle">Tjedna inventura</strong>
                    <h2 class="data__title">'Dalmatinka, Srbijanka' Severina i posprdni Davor Šuker – koja motivacija za hrvatske nogometaše!</h2>
                </div>
            </a>
        </article>
    </li>
    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">
                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a7/cd/a7cd060be10b78f6e33f3df579025100.jpg">
                </figure>
                <div class="data block__data">
                    <strong class="data__subtitle">prof. dr. Mirjana Kasapović</strong>
                    <h2 class="data__title">Ministar Mornar u politici se ponaša kao Alisa u zemlji čudesa</h2>
                </div>
            </a>
        </article>
    </li>
    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">
                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/4e/5d/4e5dd8fc9d2a5861ebd01d253391b8f3.jpg">
                </figure>
                <div class="data block__data">
                    <strong class="data__subtitle">maja šuput</strong>
                    <h2 class="data__title">Idealan odmor bio bi u zatvoru, ondje nema alkohola ni muškaraca</h2>
                </div>
            </a>
        </article>
    </li>
</ul>
```
*/
SassMeister-input-HTML.html
content_copyfile_download
<!-- Pravi primjer SASS + BEM + Dokumentacija -->

<ul class="list_block--02" style="width:600px">

    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">

                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a8/48/a848c4ee2c5046fe0e4b59d5cc12df6a.jpg">
                </figure>

                <div class="data block__data">
                    <strong class="data__subtitle">Tjedna inventura</strong>
                    <h2 class="data__title">'Dalmatinka, Srbijanka' Severina i posprdni Davor Šuker – koja motivacija za hrvatske nogometaše!</h2>
                </div>

            </a>
        </article>
    </li>

    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">

                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a7/cd/a7cd060be10b78f6e33f3df579025100.jpg">
                </figure>

                <div class="data block__data">
                    <strong class="data__subtitle">prof. dr. Mirjana Kasapović</strong>
                    <h2 class="data__title">Ministar Mornar u politici se ponaša kao Alisa u zemlji čudesa</h2>
                </div>

            </a>
        </article>
    </li>

    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">

                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/4e/5d/4e5dd8fc9d2a5861ebd01d253391b8f3.jpg">
                </figure>

                <div class="data block__data">
                    <strong class="data__subtitle">maja šuput</strong>
                    <h2 class="data__title">Idealan odmor bio bi u zatvoru, ondje nema alkohola ni muškaraca</h2>
                </div>

            </a>
        </article>
    </li>

</ul>

<ul class="list_block--02 fig_small" style="width:600px">

    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">

                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a8/48/a848c4ee2c5046fe0e4b59d5cc12df6a.jpg">
                </figure>

                <div class="data block__data">
                    <strong class="data__subtitle">Tjedna inventura</strong>
                    <h2 class="data__title">'Dalmatinka, Srbijanka' Severina i posprdni Davor Šuker – koja motivacija za hrvatske nogometaše!</h2>
                </div>

            </a>
        </article>
    </li>

    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">

                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/a7/cd/a7cd060be10b78f6e33f3df579025100.jpg">
                </figure>

                <div class="data block__data">
                    <strong class="data__subtitle">prof. dr. Mirjana Kasapović</strong>
                    <h2 class="data__title">Ministar Mornar u politici se ponaša kao Alisa u zemlji čudesa</h2>
                </div>

            </a>
        </article>
    </li>

    <li class="block">
        <article class="block__article">
            <a href="#" class="block__link">

                <figure class="block__figure">
                    <img class="block__image" src="http://www.vecernji.hr/media/cache/4e/5d/4e5dd8fc9d2a5861ebd01d253391b8f3.jpg">
                </figure>

                <div class="data block__data">
                    <strong class="data__subtitle">maja šuput</strong>
                    <h2 class="data__title">Idealan odmor bio bi u zatvoru, ondje nema alkohola ni muškaraca</h2>
                </div>

            </a>
        </article>
    </li>

</ul>