niduscss-lib-mixins v1.4.0

niduscss-lib-mixins

Common mixins for niduscss framework.

Installation

$ npm install niduscss-lib-mixins

Usage

Import styles:

styles.css:

/* Libraries
   ========================================================================== */
@import "niduscss-lib-mixins";

/* Other styles */

Note: Be sure that the import is before all styles to use the mixins

Align mixins

/* Container */
.Container {
  @mixin u-alignContainer;

  /* Import the vertical centering ghost mixin */
  &::before {
    @mixin u-alignGhost;
  }
}

Link mixins

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;
}

outline mixins

Remove outline of a element:

button {
  @mixin removeOutline;
}

Responsive mixins

/* Define the custom media querie */
@custom-media --small-viewport (min-width: 37.5rem);

/* Import the mixin */
@mixin respondTo --small-viewport {
  height: 2rem;
}

Shadow mixins

header {
  /* Import the mixin */
  @mixin u-shadowBottom;
}

Text mixins

label {
  /* import ellipsis hack mixin */
  @mixin u-textEllipsis;
}

Changelog