Utilities

Use the utility classes to extend the existing base components or to build new ones from scratch directly into your markup.


Overview

Webpixels' CSS utilities are generated with the utility API included in Bootstrap and can be used to modify or extend our default set of utility classes via Sass. While Bootstrap utilities are very good for starting a project, our CSS comes with an extensive collection of utilities that cover a much larger area of use cases.

Next to the already built UI components and patterns, you can use these utility classes to extend or build completely custom new components and designs without leaving your HTML.


Using the API

API options

In order to make this process more straight-forward and easier to use, we came up with our way of adding/changing the utilities. To start customizing these, you'll make use of the $theme Sass map which will override the defaults with your values.


How to override utilities

Changing values

By using the specified key of each utility, you can override the default values. You will find this information on each utility page. For example the following piece of code will override the default values.

$theme: (
    opacity: (
        values: (
            1: 0.1,
            2: 0.3,
            3: 0.3,
            4: 0.4,
            5: 0.5
        )
    )
);

If you want to keep the included utility classes and add some more values, use the merge option provided by Sass:

$theme: (
    color: (
        extend: (
            "custom": $new-color
        )
    )
);

Changing states

Use the state option to generate pseudo-class variations. Example pseudo-classes are :hover and :focus. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add state: hover and you’ll get .opacity-hover:hover in your compiled CSS.

Need multiple pseudo-classes? Use a space-separated list of states: state: hover focus. inside the $theme map:

$theme: (
    opacity: (
        state: hover focus
    )
);

The result will be:

.opacity-1-hover:hover {
    opacity: .1;
}
...
.opacity-10-focus:focus {
    opacity: 1;
}

Remove utilities

Remove any of the default utilities by setting the group key disable option to true. For example, to remove all our opacity utilities, here's what you need to do:

// Your custom utilities
$theme: (
    opacity: (
        disable: true
    )
);
UI Components

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

Explore ->