Principe

Mise en place d'un bloc "type" avec paramétrage des bordures, radius, padding, titres...

LOREM IPSUM

bloc part 1
bloc part 2
bloc part 3 

<div class="bloc">

    <h2 class="bloc-title">LOREM IPSUM</h2>

    <div class="bloc-middle">
        <div class="bloc-part">
            bloc part 1
        </div>
        <div class="bloc-part">
            bloc part 2
        </div>
        <div class="bloc-part">
            bloc part 3
        </div>
    </div>

</div>
Sizing
Small

Ajouter la classe .bloc-sm.

LOREM IPSUM

bloc part 1
bloc part 2
bloc part 3 

<div class="bloc bloc-sm">

    <h2 class="bloc-title">LOREM IPSUM</h2>

    <div class="bloc-middle">
        <div class="bloc-part">
            bloc part 1
        </div>
        <div class="bloc-part">
            bloc part 2
        </div>
        <div class="bloc-part">
            bloc part 3
        </div>
    </div>

</div>
Large

Ajouter la classe .bloc-lg.

LOREM IPSUM

bloc part 1
bloc part 2
bloc part 3 

<div class="bloc bloc-lg">

    <h2 class="bloc-title">LOREM IPSUM</h2>

    <div class="bloc-middle">
        <div class="bloc-part">
            bloc part 1
        </div>
        <div class="bloc-part">
            bloc part 2
        </div>
        <div class="bloc-part">
            bloc part 3
        </div>
    </div>

</div>
Combinaisons avec un corridor

Il est possible de combiner du sizing sur le .corridor et sur le .bloc (9 combinaisons possibles :)).

.corridor-sm et .bloc-sm

LOREM IPSUM

bloc part 1
bloc part 2
bloc part 3

.corridor et .bloc

LOREM IPSUM

bloc part 1
bloc part 2
bloc part 3

.corridor-lg et .bloc-lg

LOREM IPSUM

bloc part 1
bloc part 2
bloc part 3

.corridor-sm et .bloc-lg

LOREM IPSUM

bloc part 1
bloc part 2
bloc part 3