sutter/helloFront

extends ../../../layout/styleguide

append config
  - var template = 't-styleguide'
  - var title = "Utils de layout"
  - var metaDesc = "Utils de Layout - CSS"
  - var path = './../../'

block content
  .hf-head
    .hf-wrapper
      h1 Layout
  .hf-content.hf-wrapper
    h2 Documentation
    p Les utilitaires de Layout sont des helpers permettant de facilement appliquer certaines modifications de layout à un élément. (clearFix, floats, fix de "contexte de formattage de bloc"...)
    table
      thead
        tr
          th Classe
          th Usage
      tbody
        tr
          td
            code .u-float-left
          td
            | Ajoute un
            |
            strong float: left
            |  à l'élément.
        tr
          td
            code .u-float-right
          td
            | Ajoute un
            |
            strong float: right
            |  à l'élément.
        tr
          td
            code .u-no-bfc
          td
            | Supprime le contexte de formatage de block. Plus d'information dans
            |
            a(href='http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html', title='null') cet article d'Alsacréations
            |  sur le contexte de formatage block en CSS.
        tr
          td
            code .u-flex-push-left
          td
            | Décale un enfant direct d'un parent en
            |
            strong display:flex
            |  vers la droite
        tr
          td
            code .u-flex-inline-grid
          td
            | Permet d'aligner les éléments enfants directs en ajoutant un espace entre eux