Common mixins for niduscss framework.
$ npm install niduscss-lib-mixinsImport styles:
styles.css:
/* Libraries
========================================================================== */
@import "niduscss-lib-mixins";
/* Other styles */Note: Be sure that the import is before all styles to use the mixins
/* Container */
.Container {
@mixin u-alignContainer;
/* Import the vertical centering ghost mixin */
&::before {
@mixin u-alignGhost;
}
}Use the mixin homogenizeLink to homogenize a link element. To change color use a parent element of the link:
/* Change the color of link */
nav {
color: salmon;
}
/* Homogenize the link elements inside a nav */
nav a {
@mixin homogenizeLink;
}Remove outline of a element:
button {
@mixin removeOutline;
}/* Define the custom media querie */
@custom-media --small-viewport (min-width: 37.5rem);
/* Import the mixin */
@mixin respondTo --small-viewport {
height: 2rem;
}header {
/* Import the mixin */
@mixin u-shadowBottom;
}label {
/* import ellipsis hack mixin */
@mixin u-textEllipsis;
}