Utilities

Utilities are small helper classes to change or adapt an atom, component or element. They are not needed by default, but they can come in handy in some cases. However, use them with caution.

Installation

Vl-ui-util is automatically installed after intalling any NPM package.

                      
                        npm i @govflanders/vl-ui-util
                      
                    

or

                      
                        yarn add @govflanders/vl-ui-util
                      
                    

Usage

Import SASS

Vl-ui-util is always the last import in your scss file. Why is that?

                      
                        @import "vl-ui-util/src/scss/util";
                      
                    

Make sure your sass --include-path includes node_modules/@govflanders/.

All utilities

Screenreader text

.vl-u-visually-hidden hides text from the screen. It is used to add extra explanation to someone who uses a screenreader.

                      
                        

I am only visible to users with a screenreader. You can't see me, but you can hear me!

Alignment

  • .vl-u-align-left aligns text to the left.
  • .vl-u-align-center aligns text to the center.
  • .vl-u-align-right aligns text to the right.
                      
                        

I am aligned to the left!

I am aligned to the center!

I am aligned to the right!

Modifiers

All alignment tools also contain modifiers. An example: to align text to the center on small devices, use the vl-u-align-center--s class.

                      
                        

I am aligned to the left by default. On medium screens you can find me in the center, and when I'm small go see me at the right!

Background

.vl-u-bg-alt makes the background gray. The gray color is the same as the color used on an Alt Region.

Positioning

  • .vl-u-float-left makes your element float to the left.
  • .vl-u-float-right makes your element float to the right.
  • .vl-u-float-none stops the floating.
  • .vl-u-display-block sets your element to "display: block".
  • .vl-u-display-inline-block sets your element to "display: inline-block".
  • .vl-u-display-flex sets your element to "display: flex".
  • .vl-u-display-inline-flex sets your element to "display: inline-flex".

Clearfix

.vl-u-clearfix adds a clearfix to your element.

Overflow

.vl-u-no-overflow adds "overflow: hidden" to your element.

Printing

Headers, footers and widgets are hidden. Only the main element is printed by default. If you want to hide or show elements explicitly when printing the page use .vl-u-hide-on-print and .vl-u-show-on-print.

Ruler

Use the .vl-u-hr class to create a horizontal ruler.

Spacer

  • .vl-u-spacer adds a margin of 2 rem.
  • .vl-u-spacer--xsmall adds a margin of 1 rem.
  • .vl-u-spacer--small adds a margin of 1.5 rem.
  • .vl-u-spacer--medium adds a margin of 3 rem.
  • .vl-u-spacer--large adds a margin of 6 rem.
  • .vl-u-spacer--none removes the margin.

Text

  • .vl-u-text--ellipse makes the text ellipse.
  • .vl-u-text--uppercase makes the text uppercase.
  • .vl-u-text--lowercase makes the text lowercase
  • .vl-u-text--capitalize capitalizes the first letter of the text.
  • .vl-u-text--success gives the text a color for success (green).
  • .vl-u-text--warning gives the text a color for warning (yellow).
  • .vl-u-text--error makes gives the text a color for error (red).
  • .vl-u-text--bold makes the text bold.
  • .vl-u-text--italic makes the text italic.
  • .vl-u-text--small places the text in a 14px font size.
  • .vl-u-text--xsmall places the text in a 12px font size.
  • .vl-u-text--xxsmall places the text in a 10px font size.
  • .vl-u-text--marked gives the text a yellow (markee) background.

Visibility

To explicitly hide an element, use .vl-u-hidden. All breakpoint modifiers are available on this element as well. An example: .vl-u-hidden--s will hide an element on small screens.

To explicitly show an element use .vl-u-visible. All breakpoint modifiers are available on this element as well. An example: .vl-u-visible--s will show an element on small screens.