Mixins

Speed up your CSS workflow, and generate CSS that match Webcore

If you’d like to develop additional components alongside of Webcore, you can optionally use the Sass mixins defined in this documentation to keep your new styles consistent with Webcore. Using these mixins are not mandatory to use Webcore, but they can also help you speed up your workflow by writing less CSS, and they are easily configurable through the configuration file.

If you’re using Sass outside of Webcore and you’d like to improve your CSS workflow, you can also integrate these mixins into your own project by copy-pasting the definitions. You can find all mixins defined here.

If you choose to use your own techstack, but you’d like to copy Webcore styles, you can use our compile script to generate vanilla CSS from the module CSS files. Simply clone the repository and run the following command in your terminal:

- format: npm run compile <Component/BlockName>
- example: npm run compile Button

All mixins are available through importing from webcoreui/config:

@use 'webcoreui/config' as *;

All mixins accept a number of options. Some of the predefined options mentioned in this documentation, such as breakpoints or font sizes, can be configured using the webcore.config.scss file.

Background

Use the background mixin to create background colors with the current theme’s color palette.

.background {
    @include background(primary);
    @include background(success);
    @include background(var(--w-checkbox-color));
    @include background(transparent);
}

.background {
    background: var(--w-color-primary);
    background: var(--w-color-success);
    background: var(--w-checkbox-color);
    background: transparent;
}

When working with colors, you can reference color variables by their names in the color palette, without the --w-color- prefix. You can use the following list of keywords to work with colors:

primary primary-10 primary-20 primary-30 primary-40 primary-50 primary-60 primary-70 info info-accent info-fg success success-accent success-fg warning warning-accent warning-fg alert alert-accent alert-fg overlay

To learn more about how to override these colors, visit the Themes documentation.

Border

Use the border mixin to generate borders that are consistent in color with your theme.

.border {
    @include border();
    @include border(10px, info);
    @include border(0);

    @include border(info, top);
    @include border(info, bottom);
    @include border(info, left);
    @include border(info, right);

    @include border(info, x);
    @include border(info, y);
}

.border {
    border: 1px solid var(--w-color-primary);
    border: 10px solid var(--w-color-info);
    border: 0;

    border-top: 1px solid var(--w-color-info);
    border-bottom: 1px solid var(--w-color-info);
    border-left: 1px solid var(--w-color-info);
    border-right: 1px solid var(--w-color-info);

    border-left: 1px solid var(--w-color-info);
    border-right: 1px solid var(--w-color-info);
    border-top: 1px solid var(--w-color-info);
    border-bottom: 1px solid var(--w-color-info);
}

Most mixins accept a list of values, including the border mixin. The border mixin can accept numbers, colors, and custom keywords. By default, the border’s width is set to 1px with the primary color, therefore, the following two definitions are equivalent:

@include border();
@include border(1px, primary);

The border mixin also comes with the following custom keywords you can use:

top: Generates a border-top rule.
bottom: Generates a border-bottom rule.
left: Generates a border-left rule.
right: Generates a border-right rule.
x: Generates a border-top and border-bottom rules.
y: Generates a border-left and border-right rules.

Border Radius

Use the border-radius mixin to generate rounded borders consistent with radius levels set in your config.

.radius {
    @include border-radius();
    @include border-radius(none);
    @include border-radius(sm);
    @include border-radius(md);
    @include border-radius(lg);
    @include border-radius(xl);
    @include border-radius(max);

    @include border-radius(top);
    @include border-radius(bottom);
    @include border-radius(left);
    @include border-radius(right);
    @include border-radius(diagonal);
    @include border-radius(reverse-diagonal);
}

.radius {
    border-radius: var(--w-md-radius);
    border-radius: 0;
    border-radius: var(--w-sm-radius);
    border-radius: var(--w-md-radius);
    border-radius: var(--w-lg-radius);
    border-radius: var(--w-xl-radius);
    border-radius: 100%;

    border-radius: 5px 5px 0 0;
    border-radius: 0 0 5px 5px;
    border-radius: 5px 0 0 5px;
    border-radius: 0 5px 5px 0;
    border-radius: 5px 0;
    border-radius: 0 5px;
}

Radius comes in the sizes as defined above. If no arguments are passed to the border-radius mixin, it’ll generate a CSS border-radius with the value of md. The mixin can also accept the following keywords to only add radius to a specific side:

top: Adds border-radius to the top left and right corners.
bottom: Adds border-radius to the bottom left and right corners.
left: Adds border-radius to the top left and bottom left corners.
right: Adds border-radius to the top right and bottom right corners.
diagonal: Adds border-radius to the top left and bottom right corners.
reverse-diagonal: Adds border-radius to top right and bottom left corners.

Just like for other mixins where multiple arguments are accepted, you can combine arguments as necessary, for example:

@include border-radius(xl, top);

To change the default border-radius values, you can override the following CSS variables:

body {
    --w-sm-radius: 2px;
    --w-md-radius: 5px;
    --w-lg-radius: 10px;
    --w-xl-radius: 15px;
}

Layer

Use the layer mixin to set the z-index of the element from a predefine list of stack.

.layer {
    @include layer();
    @include layer(bg);
    @include layer(fg);
    @include layer(overlay);
    @include layer(popup);
    @include layer(top);
    @include layer(header);
    @include layer(modal);
}

.layer {
    z-index: 0;
    z-index: -1;
    z-index: 1;
    z-index: 2;
    z-index: 3;
    z-index: 98;
    z-index: 99;
    z-index: 100;
}

By default, the layer mixin will generate a z-index with the value of 0 if no arguments are specified. You can override the default z-index values using the webcore.config.scss file.

Layout

Use the layout mixin to work with flex, inline-flex, grid, and inline-grid layouts.

.layout {
    @include layout(flex);
    @include layout(grid);

    // Changing direction
    @include layout(row);
    @include layout(column);
    @include layout(row-reverse);
    @include layout(column-reverse);

    // Changing wrap
    @include layout(wrap);
    @include layout(nowrap);
    @include layout(wrap-reverse);
}

.layout {
    display: flex;
    display: grid;

    // Changing direction
    flex-direction: row;
    flex-direction: column;
    flex-direction: row-reverse;
    flex-direction: column-reverse;

    // Changing wrap
    flex-wrap: wrap;
    flex-wrap: nowrap;
    flex-wrap: wrap-reverse;
}

You can call direction and wrap values without specifying flex to avoid generating display: flex if the property is already present. You can also stack properties in a single call:

.layout {
    // Setting one property
    @include layout(row);

    // Setting multiple properties
    @include layout(flex, row, wrap);
}

.layout {
    // Setting one property
    flex-direction: row;

    // Setting multiple properties
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

To change gaps, you can use one of the following values:

.layout {
    @include layout(none);
    @include layout(xxs);
    @include layout(xs);
    @include layout(sm);
    @include layout(md);
    @include layout(default);
    @include layout(lg);
    @include layout(xl);
    @include layout('2xl');
    @include layout('3xl');
    @include layout('4xl');
    @include layout('5xl');
}

.layout {
    gap: 0;
    gap: 2px;
    gap: 5px;
    gap: 10px;
    gap: 15px;
    gap: 20px;
    gap: 25px;
    gap: 30px;
    gap: 35px;
    gap: 40px;
    gap: 45px;
    gap: 50px;
}

You can override spacing values in your webcore.config.scss file.

To work with alignments, you can use the following keywords with the mixin:

.layout {
    // Vertical alignment
    @include layout(v-start);
    @include layout(v-center);
    @include layout(v-end);
    @include layout(v-baseline);
    @include layout(v-stretch);

    // Horizontal alignment
    @include layout(h-start);
    @include layout(h-center);
    @include layout(h-end);
    @include layout(h-between);
    @include layout(h-around);
    @include layout(h-evenly);
    @include layout(h-stretch);

    // Vertical + horizontal
    @include layout(center);
}

.layout {
    // Vertical alignment
    align-items: flex-start;
    align-items: center;
    align-items: flex-end;
    align-items: baseline;
    align-items: stretch;

    // Horizontal alignment
    justify-content: flex-start;
    justify-content: center;
    justify-content: flex-end;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
    justify-content: stretch;

    // Vertical + horizontal
    align-items: center;
    justify-content: center;
}

Media

To use media queries consistent with Webcore components, you can use the media mixin:

@include media(xs) { ... }
@include media(sm) { ... }
@include media(md) { ... }
@include media(lg) { ... }

@media (min-width: 600px) { ... }
@media (min-width: 800px) { ... }
@media (min-width: 1024px) { ... }
@media (min-width: 1200px) { ... }

To override default breakpoints, change your settings in webcore.config.scss.

Position

To set the top, bottom, left, right, and position properties, you can use the position mixin:

.position {
    @include position(relative);
    @include position(absolute);
    @include position(fixed);

    // Setting top, bottom, left, and right values
    @include position(t20px);
    @include position(b20px);
    @include position(l20px);
    @include position(r20px);

    // Setting values in percentage
    @include position('t100%');
    @include position('b100%');
}

.position {
    position: relative;
    position: absolute;
    position: fixed;

    // Setting top, bottom, left, and right values
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;

    // Setting values in percentage
    top: 100%;
    bottom: 100%;
}

To set top, bottom, left, and right values, prefix the value with first letter of the side (t for top, b for bottom, and so on). You can combine arguments similar to other mixins:

.position {
    @include position(absolute, t0, l0);
}

.position {
    position: absolute;
    top: 0;
    left: 0;
}

You can also center elements on the screen using the following keywords:

.position {
    // For centering vertically
    @include position(absolute, v-center);

    // For centering horizontally
    @include position(absolute, h-center);

    // For centering both vertically and horizontally
    @include position(absolute, center);
}

.position {
    // For centering vertically
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    // For centering horizontally
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    // For centering both vertically and horizontally
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Size

Use the size mixin to set the width and height properties of an element:

.size {
    @include size(w10px, h20px);

    // Setting both properties to the same value
    @include size(100%);
}

.size {
    width: 10px;
    height: 20px;

    // Setting both properties to the same value
    width: 100%;
    height: 100%;
}

To set the width property, prefix the value with w. To set the height property, prefix the value with h. You can pass a single value to the mixin to give the same values to both width and height.

Spacing

Use the spacing mixin to set margins and paddings using a predefined set of spacing values:

.spacing {
    @include spacing(m-xs, p-sm);

    // Setting x, y values
    @include spacing(mx-md, py-default);

    // Setting each side
    @include spacing(mt-sm);
    @include spacing(mb-sm);
    @include spacing(ml-sm);
    @include spacing(mr-sm);

    // Removing paddings and margins
    @include spacing(m0);
    @include spacing(p0);

    // Removing both
    @include spacing(0);
}

.size {
    margin: 5px;
    padding: 10px;

    // Setting x, y values
    margin: 0 15px;
    padding: 20px 0;

    // Setting each side
    margin: 10px 0 0 0;
    margin: 0 0 10px 0;
    margin: 0 0 0 10px;
    margin: 0 10px 0 0;

    // Removing paddings and margins
    margin: 0;
    padding: 0;

    // Removing both
    margin: 0;
    padding: 0;
}

To set margins, use one of the following keywords, followed by a dash and the spacing amount:

m: Set margin for all sides.
mt: Set margin-top.
mb: Set margin-bottom.
ml: Set margin-left.
mr: Set margin-right.
my: Set margin-top and margin-bottom.
mx: Set margin-left and margin-right.
auto: Set margin-left and margin-right to auto

The spacing values can be one of the following values:

Keyword	Default value
`none`	0
`xxs`	2px
`xs`	5px
`sm`	10px
`md`	15px
`default`	20px
`lg`	25px
`xl`	30px
`2xl`	35px
`3xl`	40px
`4xl`	45px
`5xl`	50px

You can override spacing values in your webcore.config.scss file. If you need to remove margins, you can use the m0 keyword. You can use the auto keyword to set left and right margins to auto. For example:

@include spacing(auto-default); -> margin: 20px auto;

You can use paddings in the same manner, just replace m with p in the keywords name:

p: Set padding for all sides.
pt: Set padding-top.
pb: Set padding-bottot.
pl: Set padding-left.
pr: Set padding-right.
py: Set padding-top and padding-bottom.
px: Set padding-left and padding-right.

If you need to remove paddings, you can use the p0 keyword. If you need to remove both paddings and margins from an element, simply pass 0 to the mixin.

Transition

Use the transition mixin to generate transition rules with consistent speed and easing:

.transition {
    @include transition();
    @include transition(color);
    @include transition(opacity, .6s);
}

.transition {
    transition: all .3s cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: color .3s cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: opacity .6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

Whenever you can, specify which property you’d like to transition as it can improve CSS performance. On the contrary, try to avoid supplying a custom speed to ensure all animations are created equally with a consistent speed. Because of the same reason, the easing cannot be customized.

Typography

To update typography related CSS properties, such as colors, font types, font sizes, line heights, or text decorations and alignments, use the typography mixin:

.text {
    @include typography(bold, sm, primary, 700, center, underline, normal);
}

.text {
    font-family: Bold;
    font-size: 12px;
    color: var(--w-color-primary);
    font-weight: 700;
    text-align: center;
    text-decoration: underline;
    line-height: normal;
}

To change the font family, use the regular or bold keywords. Colors can take any value from the color palette. You can find the list of available colors here. When specifying colors, make sure you omit the --w-color- prefix. For example, use info instead of --w-color-info. To generate different font-sizes using the mixin, you can use the following keywords:

Keyword	Font size
`xs`	10px
`sm`	12px
`md`	14px
`default`	16px
`lg`	18px
`xl`	21px
`2xl`	24px
`3xl`	28px
`4xl`	32px
`5xl`	36px

The line height can take one of the following keywords:

Keyword	Line height
`normal`	normal
`hmd`	1.5
`hlg`	1.7

You can override font sizes and line height values in your webcore.config.scss file.

For font-weight and text-align, you can use any valid CSS value. For text-decoration you can use one of the following keywords:

'none': none,
'underline': underline,
'overline': overline,
'line-through': line-through,
'dotted': underline dotted,
'dashed': underline dashed,
'double': underline double,
'wavy': underline wavy,
'overline-dotted': overline dotted,
'overline-dashed': overline dashed,
'overline-double': overline double,
'overline-wavy': overline wavy,
'line-through-dotted': line-through dotted,
'line-through-dashed': line-through dashed,
'line-through-double': line-through double,
'line-through-wavy': line-through wavy,
'line-through-underline': underline line-through,
'line-through-overline': overline line-through,
'overunder': underline overline,
'overunder-dotted': underline overline dotted,
'overunder-dashed': underline overline dashed,
'overunder-double': underline overline double,
'overunder-wavy': underline overline wavy,
'overunder-line-through': underline overline line-through,

Visibility

To set the visibility of an element using display, overflow, or opacity properties, use the visibility mixin:

.visibility {
    @include visibility(none);
    @include visibility(hidden);
    @include visibility(0);

    // Using multiple rules at once
    @include visibility(block, scroll, 1);
}

.visibility {
    display: none;
    overflow: hidden;
    opacity: 0;

    // Using multiple rules at once
    display: block;
    overflow: scroll;
    opacity: 1;
}

The mixin generates the properties based on the following criteria:

display: If the passed parameter is a valid display value, it’ll generate a display rule.
overflow: If the passed parameter is a valid overflow value, it’ll generate an overflow rule.
opacity: If the passed parameter is a number, it’ll generate an opacity rule.

API

Mixin	Purpose
`background`	Generate background colors from the active theme's color palette.
`border`	Generate borders using the active theme's color palette.
`border-radius`	Sets the border radius based on the configured radius values.
`layer`	Sets the `z-index` of the element from a predefine list of stack.
`layout`	Use to work with `flex`, `inline-flex`, `grid`, and `inline-grid` layouts.
`media`	Generates media queries consistent with Webcore components.
`position`	Sets the position of an element using `position`, `top`, `bottom`, `left`, and `right` properties.
`size`	Sets the `width` and `height` properties of an element.
`spacing`	Sets margins and paddings based on the spacing configuration defined in `webcore.config.scss`.
`transition`	Applies a `transition` property to an element with a consistent speed and easing.
`typography`	Sets CSS properties related to typography, such as `font-family` or `font-size`.
`visibility`	Sets the visibility of an element, using `display`, `overflow`, or the `opacity` property.

<- Themes Utilities ->

Request improvement for this page