Search documentation v0.6.1

Mixins

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

Source ↗️ Report Issue ↗️

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.

All mixins are available through importing from webcoreui/config:

Add import for using mixins
@import 'webcoreui/config';
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:

Prefer using the first solution
@include border();
@include border(1px, primary);

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

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:

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:

The spacing values can be one of the following values:

KeywordDefault 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:

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:

KeywordFont 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:

KeywordLine 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:

Text decoration keywords and their generated CSS values
'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:

API

MixinPurpose
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.

Request improvement for this page