Documentation

Le u-sidewrapper permet d'ajouter un padding latéral (gauche et droite) à ses enfants directs.

L'option --big permet de mettre un padding plus grand.

Les paddings sont automatiquement ajustés sous mobile

Le u-separator quant à lui ajoute des bordures grises entre les éléments enfants

Sidewrapper

Preview

Sidewrapper
Conteneur avec padding
Conteneur sans padding
Fin du conteneur avec padding

Balisage


                
                    <div class="u-sidewrapper">Sidewrapper
                        <div class="u-darkBlue u-white-text">Conteneur avec padding
                            <div class="u-lightGrey u-black-text">Conteneur sans padding</div>Fin du conteneur avec padding
                        </div>
                    </div>

Sidewrapper (--big)

Preview

Sidewrapper Big
Conteneur avec padding
Conteneur sans padding
Conteneur sans padding 2
Fin du conteneur avec padding

Balisage


                
                    <div class="u-sidewrapper--big">Sidewrapper Big
                        <div class="u-darkBlue u-white-text">Conteneur avec padding
                            <div class="u-lightGrey u-black-text">Conteneur sans padding</div>
                            <div class="u-lightGrey u-black-text">Conteneur sans padding 2</div>Fin du conteneur avec padding
                        </div>
                    </div>

Separator Wrapper

Preview

a
b
c
d
e

Balisage


                
                    <div class="u-separatorWrapper">
                        <div class="u-square50 u-center">a</div>
                        <div class="u-square50 u-center">b</div>
                        <div class="u-square50 u-center">c</div>
                        <div class="u-square50 u-center">d</div>
                        <div class="u-square50 u-center">e</div>
                    </div>