Documentation

Ces utilitaires sont des conteneurs permettant d'organiser le contenu en l'alignant et le répartissant verticalement et horizontalement

Ce sont des presets de display: flex

Colonne

Balisage


                
                    <div class="u-column">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                    </div>

Colonne centrée

Balisage


                
                    <div class="u-columnCenter" style="height: 200px;">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                    </div>

Colonne espace entre

Balisage


                
                    <div class="u-columnCenterSpaceBetween" style="height: 200px;">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                    </div>

Ligne stricte

Preview

Balisage


                
                    <div class="u-flex u-lightGrey" style="width: 50px">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                        <div>d</div>
                        <div>e</div>
                        <div>f</div>
                        <div>g</div>
                        <div>h</div>
                        <div>i</div>
                        <div>j</div>
                    </div>

Ligne avec retour à la ligne

Preview

Balisage


                
                    <div class="u-flex u-wrap u-lightGrey" style="width: 50px">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                        <div>d</div>
                        <div>e</div>
                        <div>f</div>
                        <div>g</div>
                        <div>h</div>
                        <div>i</div>
                        <div>j</div>
                    </div>

Colonne devenant une ligne sous mobile

Balisage


                
                    <div class="u-rowOnMobile">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                    </div>

Contenu centré

Balisage


                
                    <div class="u-center">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                    </div>

Contenu centré avec espace autour

Balisage


                
                    <div class="u-centerSpaceAround">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                    </div>

Contenu centré avec espace entre

Balisage


                
                    <div class="u-centerSpaceBetween">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                    </div>

Contenus de même taille

Balisage


                
                    <div class="u-flex">
                        <div class="u-same-size u-border--thin--black">a</div>
                        <div class="u-same-size u-border--thin--black">b</div>
                        <div class="u-same-size u-border--thin--black">c</div>
                    </div>

Contenu caché sous mobile

Balisage


                
                    <div class="u-hideOnMobile">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                    </div>

Contenu affiché sous mobile

Balisage


                
                    <div class="u-showOnMobile">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                    </div>

Contenu caché sous tablette

Balisage


                
                    <div class="u-hideOnTablet">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                    </div>

Contenu affiché sous tablette

Balisage


                
                    <div class="u-showOnTablet">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                    </div>

Contenu séparé en deux part égales

Balisage


                
                    <div class="u-split">
                        <div>a</div>
                        <div>b</div>
                    </div>

Colonne inversée sous mobile

Balisage


                
                    <div class="u-column--revertOnMobile">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                    </div>

Ligne inversée sous mobile

Balisage


                
                    <div class="u-row--revertOnMobile">
                        <div>a</div>
                        <div>b</div>
                        <div>c</div>
                    </div>

Helpers position relative/absolue

Balisage


                
                    <div class="u-position--relative">X
                        <div class="u-position--absolute">O</div>
                        <div class="u-position--absolute">-</div>
                    </div>