src/template/pages/styleguide/utils/u-spacing.pug
extends ../../../layout/styleguide
append config
- var template = 't-styleguide'
- var title = "Utils d'espacement"
- var metaDesc = "Utils d'espacement - CSS"
- var path = './../../'
block content
.hf-head
.hf-wrapper
h1 Spacing
.hf-content.hf-wrapper
h2 Documentation
p Les utilitaires d'espacement permettent facilement d'appliquer des <code>margin</code> / <code>padding</code> sur un élément. A utiliser pour assembler différents composants sans avoir à définir une nouvelle classe de wrapper.
.hf-content.hf-wrapper
h3 Définition
ul
li <strong>p</strong>, <strong>m</strong> = padding, margin
li <strong>a</strong>, <strong>t</strong>, <strong>r</strong>, <strong>b</strong>, <strong>l</strong> = all, top, right, bottom, left
li <strong>s</strong>, <strong>m</strong>, <strong>l</strong>, <strong>n</strong> = Small (10 px), Medium (20 px), Large (40 px) , None (0)
.hf-content.hf-wrapper
h3 Margin
table
thead
tr
th Class
th Usage
tbody
tr
td
code .u-mas
td margin: 10 px;
tr
td
code .u-mam
td margin: 20 px;
tr
td
code .u-mal
td margin: 40 px;
tr
td
code .u-man
td margin: 0;
tr
td
code .u-mts
td margin-top: 10 px;
tr
td
code .u-mtm
td margin-top: 20 px;
tr
td
code .u-mtl
td margin-top: 40 px;
tr
td
code .u-mtn
td margin-top: 0;
tr
td
code .u-mrs
td margin-right: 10 px;
tr
td
code .u-mrm
td margin-right: 20 px;
tr
td
code .u-mrl
td margin-right: 40 px;
tr
td
code .u-mrn
td margin-right: 0;
tr
td
code .u-mbs
td margin-bottom: 10 px;
tr
td
code .u-mbm
td margin-bottom: 20 px;
tr
td
code .u-mbl
td margin-bottom: 40 px;
tr
td
code .u-mbn
td margin-bottom: 0;
tr
td
code .u-mls
td margin-left: 10 px;
tr
td
code .u-mlm
td margin-left: 20 px;
tr
td
code .u-mll
td margin-left: 40 px;
tr
td
code .u-mln
td margin-left: 0;
.hf-content.hf-wrapper
h3 Padding
table
thead
tr
th Class
th Usage
tbody
tr
td
code .u-pas
td padding: 10 px;
tr
td
code .u-pam
td padding: 20 px;
tr
td
code .u-pal
td padding: 40 px;
tr
td
code .u-pan
td padding: 0;
tr
td
code .u-pts
td padding-top: 10 px;
tr
td
code .u-ptm
td padding-top: 20 px;
tr
td
code .u-ptl
td padding-top: 40 px;
tr
td
code .u-ptn
td padding-top: 0;
tr
td
code .u-prs
td padding-right: 10 px;
tr
td
code .u-prm
td padding-right: 20 px;
tr
td
code .u-prl
td padding-right: 40 px;
tr
td
code .u-prn
td padding-right: 0;
tr
td
code .u-pbs
td padding-bottom: 10 px;
tr
td
code .u-pbm
td padding-bottom: 20 px;
tr
td
code .u-pbl
td padding-bottom: 40 px;
tr
td
code .u-pbn
td padding-bottom: 0;
tr
td
code .u-pls
td padding-left: 10 px;
tr
td
code .u-plm
td padding-left: 20 px;
tr
td
code .u-pll
td padding-left: 40 px;
tr
td
code .u-pln
td padding-left: 0;