Utilities classes for layout

Please notice: If you installed YouSee DNA with npm, be aware that all utility classes are part of the basic ys-base.css-file if you add css-files individually.

ys-u-justify-content-center

The ys-u-justify-content-center utility class can be used to to center flexbox items.

html:not(#ys-specificity) .ys-u-justify-content-center {
  justify-content: center;
}

ys-u-w-100

The ys-u-w-100 utility class forces next columns to break to a new line. Breaking columns to a new line in flexbox requires a small hack. Add an element with width: 100% wherever you want to wrap your columns to a new line.

html:not(#ys-specificity) .ys-u-w-100 {
  width: 100%;
}