Documentation

Les classes comportant bubble ajoutent des marges tandis que les framed ajoutent des padding.

Si un de ses mots clefs est préfixé par v les modifications se feront verticalement ( haut et bas ) et s'il s'agit d'un h alors elles se feront horitalement ( gauche et droite )

L'écriture se fait en camelCase

Toute la largeur vs Toute la place

Preview

a

Balisage


                
                    <div style="height: 100px;">
                        <div class="u-fullsize u-lightGrey">
                            <div class="u-fullwidth u-blueGrey">a</div>
                            <div class="u-square50 u-darkBlue"></div>
                        </div>
                    </div>

Bubble vs Framed

Preview

1
2
3

Balisage


                
                    <div class="u-flex u-lightGrey">
                        <div class="u-bubble u-darkBlue u-white-text">1</div>
                        <div class="u-framed u-blueGrey">2</div>
                        <div class="u-bubble u-darkBlue u-white-text">3</div>
                    </div>

Vertical bubble / framed

Preview

1
2
3

Balisage


                
                    <div class="u-flex u-lightGrey">
                        <div class="u-vBubble u-darkBlue u-white-text">1</div>
                        <div class="u-vFramed u-blueGrey">2</div>
                        <div class="u-vBubble u-darkBlue u-white-text">3</div>
                    </div>

Horizontal bubble / framed

Preview

1
2
3

Balisage


                
                    <div class="u-flex u-lightGrey">
                        <div class="u-hBubble u-darkBlue u-white-text">1</div>
                        <div class="u-hFramed u-blueGrey">2</div>
                        <div class="u-hBubble u-darkBlue u-white-text">3</div>
                    </div>