PostCSS Mixins

PostCSS Mixins

The source/style/mixin directory contains PostCSS mixins that are in your own Style sheets can be used.

The mixins should ensure that the individual components are as simple and can be made uniform.

How to use

The mixins can be used in your own PostCSS files via IMPORT.


The button mixin is obviously for buttons. All standard button definitions are included here. button $color: var(--monster-btn-color, black), $bgColor: var(--monster-btn-bg-color, white)

@import "@schukai/component-style/source/style/mixin/button.pcss";

button {
    @mixin button;


There are some media queries that are used in the Monster UI Framework. These are also available as mixins.

In the following table, the media queries are listed with the corresponding mixin.

viewport0<= 480px
viewport4> 480px
viewport7> 768px
viewport9> 992px
viewport12> 1200px
@import "@schukai/component-style/source/style/mixin/media.pcss";

@mixin viewport0 {
    color: red;

@mixin viewport4 {
    color: green;

@mixin viewport7 {
    color: blue;

@mixin viewport9 {
    color: yellow;

@mixin viewport12 {
    color: yellow;


The typography mixin contains the typography definitions of the Monster UI Framework.

Basically, the mixin is used to set the font size, line height and padding of the element h1 to h6 and p.

@import "@schukai/component-style/source/style/mixin/typography.pcss";

h1 {
    @mixin h1;

h2 {
    @mixin h2;

h3 {
    @mixin h3;

h4 {
    @mixin h4;

h5 {
    @mixin h5;

h6 {
    @mixin h6;

p {
    @mixin paragraph;