Display

The display property specifies the display behavior (the type of rendering box) of an element.

In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.


.u-display-none-{BREAKPOINT REFERENCE} Makes the element display none from the breakpoint referenced in the class name.

.u-display-block-{BREAKPOINT REFERENCE} Makes the element display block from the breakpoint referenced in the class name.

.u-display-inline-{BREAKPOINT REFERENCE} Makes the element display inline from the breakpoint referenced in the class name.

.u-display-inline-block-{BREAKPOINT REFERENCE} Makes the element display inline-block from the breakpoint referenced in the class name.


The above utility classes will allow you to amend the display behaviour of an element based on the breakpoint reference you use from the default list below:

$breakpoints: (
    xs: 0px,
    sm: 544px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1440px
) !default;

Utility classes will be built for all breakpoints apart from ones with a 0px value.

The breakpoints here are the same breakpoints used for @vivid-web/flexboxgrid-sass.

Each breakpoint creates a min-width media query version of the utility class. This allows chaining of class names for responsive display styles. For instance, is you use the .u-display-none class on an element, the element with have display: none; from a window width of 0px, and then on if you add .u-display-block-md to the same element, it will have display: block; from a window width of 768px

Breakpoint Specific

If you only want a certain style for a specific breakpoint, and no others, you can use the -specific suffix.

For example, if you only want to have the element hidden from a window width 768px to 992px then you can use .u-display-none-md-specific