Spacing

A wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

👉

Default spacing

Webpixels' CSS comes with a custom spacing set of variables to allow a more extensive customization in your markup.

// Spacing scale
$spacer: 1rem !default;

// Spacing values
$spacers: (
    0: 0,
    1: $spacer * 0.25,
    2: $spacer * 0.5,
    3: $spacer * 0.75,
    4: $spacer,
    5: $spacer * 1.25,
    6: $spacer * 1.5,
    7: $spacer * 1.75,
    8: $spacer * 2,
    10: $spacer * 2.5,
    12: $spacer * 3,
    14: $spacer * 3.5,
    16: $spacer * 4,
    18: $spacer * 4.5,
    20: $spacer * 5,
    24: $spacer * 6,
    32: $spacer * 8,
    40: $spacer * 10,
    48: $spacer * 12,
    56: $spacer * 14,
    64: $spacer * 16,
    72: $spacer * 18,
    80: $spacer * 20,
    88: $spacer * 22,
    96: $spacer * 24,
    px: 1px

Take note that the spacing scale is used to generate various utilities like the padding, margin, and gap.


Customizing spacing

Use the spacing variables in your custom variables file to customize the default spacing scale.

Extending the default spacing scale

You can extend almost anything. Usually this is done with the help of the map-merge function provided by Sass. For adding a new spacing value to the existing map, add the following in your $theme config:

$theme: (
    spacers: map-merge(
        $spacers,
        (
            9: 2rem,
            11: 2.75rem
        )
    )
)

Override all spacers

Create your own spacing scale and override the default system provided by us:

// Spacing values
$theme: (
    spacers: (
        0: 0,
        1: 0.25rem,
        2: 0.5rem,
        3: 0.75rem,
        4: 1rem,
        5: 1.25rem
    )
)

Using the spacing system

There's wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

Margin

Assign responsive-friendly margin values to an element with shorthand classes.

Padding

Assign responsive-friendly padding values to an element with shorthand classes.

Gutter

Gutters are the padding between your columns, used in the Bootstrap grid system.

Gap

Assign responsive-friendly gap values to an element with shorthand classes.

UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->