undefined
undefined
Basic usage
Adding padding to a single side
If you want to add padding to a single side on an element you an use the mixins pl
pr
pt
and pb
. For example:
div {
@include pl(3);
}
Adding padding horizonatally or vertically
There are two options for adding simultaneous vertical / horizontal padding. You can either use the separate mixins px
and py
which will add the appropriate padding along the single dimension. Or you can use the pxy
mixin which will add padding both horizontally and vertically.
For example to add vertical-only padding:
div {
@include py(3);
// or
@include pxy(0, 3);
}
To add both horizontal and vertical padding we can do:
div {
@include pxy(2, 3);
// or
@include px(2);
@include py(3);
}
Adding padding to all sides
To add equal padding to all sides of an element you can use the p
mixin. For example:
div {
@include p(4);
}
With the spacing
function
All paddings are computed with the spacing
function in BridgeCSS. This function computes a spacing scale that is universally respsected by the Bridge style scheme. Therefore if you want to add padding you can use that function rahter than than mixins should you desire:
div {
padding-left: spacing(4);
padding-right: spacing(4);
}
The advantage to this approach is that the CSS reads more like vanilla CSS (eg. instead of hiding the selector behind the mixin). The downside is that in cases where you want to apply multiple styles (like p
, pxy
, px
or py
) you need to separate out multiple lines / calls to the spacing
function.
Our recommendation is to try both approaches and see what feels more natural to your coding style.