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.