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
:
webcore.config.scss
file. Background
Use the background
mixin to create background colors with the current theme’s color palette.
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:
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.
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:
The border
mixin also comes with the following custom keywords you can use:
top
: Generates aborder-top
rule.bottom
: Generates aborder-bottom
rule.left
: Generates aborder-left
rule.right
: Generates aborder-right
rule.x
: Generates aborder-top
andborder-bottom
rules.y
: Generates aborder-left
andborder-right
rules.
Border Radius
Use the border-radius
mixin to generate rounded borders consistent with radius levels set in your config.
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
: Addsborder-radius
to the top left and right corners.bottom
: Addsborder-radius
to the bottom left and right corners.left
: Addsborder-radius
to the top left and bottom left corners.right
: Addsborder-radius
to the top right and bottom right corners.diagonal
: Addsborder-radius
to the top left and bottom right corners.reverse-diagonal
: Addsborder-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:
To change the default border-radius
values, you can override the following CSS variables:
Layer
Use the layer
mixin to set the z-index
of the element from a predefine list of stack.
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.
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:
To change gaps, you can use one of the following values:
webcore.config.scss
file. To work with alignments, you can use the following keywords with the mixin:
Media
To use media queries consistent with Webcore components, you can use the media
mixin:
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:
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:
You can also center elements on the screen using the following keywords:
Size
Use the size
mixin to set the width
and height
properties of an element:
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:
To set margins, use one of the following keywords, followed by a dash and the spacing amount:
m
: Set margin for all sides.mt
: Setmargin-top
.mb
: Setmargin-bottom
.ml
: Setmargin-left
.mr
: Setmargin-right
.my
: Setmargin-top
andmargin-bottom
.mx
: Setmargin-left
andmargin-right
.auto
: Setmargin-left
andmargin-right
toauto
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:
You can use paddings in the same manner, just replace m
with p
in the keywords name:
p
: Set padding for all sides.pt
: Setpadding-top
.pb
: Setpadding-bottot
.pl
: Setpadding-left
.pr
: Setpadding-right
.py
: Setpadding-top
andpadding-bottom
.px
: Setpadding-left
andpadding-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:
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:
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 |
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:
Visibility
To set the visibility of an element using display
, overflow
, or opacity
properties, use the visibility
mixin:
The mixin generates the properties based on the following criteria:
display
: If the passed parameter is a valid display value, it’ll generate adisplay
rule.overflow
: If the passed parameter is a valid overflow value, it’ll generate anoverflow
rule.opacity
: If the passed parameter is a number, it’ll generate anopacity
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. |
Request improvement for this page