nix guide

Getting started

Download Nix from repository or install the package aurum-nix:

yarn add aurum-nix

and import into your project:

<link rel="stylesheet" type="text/css" href="node_modules/aurum-nix/dist/nix.min.css" />

Usage

Write the classes as you would write css properties and values separating with _ between properties and the values.

By default, the classes have a prefix nix- that you should apply before the class name.

You can use the responsive classes with the suffix --xs for screens up to 768px (mobile), --sm for screens up to 1024px (tablets and small screens), --md for screens up to 1200px (medium screens) and --lg for screens up to 1600px (large screens).

Customization

You can customize it for your own project, change the values of variables then import the Nix file node_modules/aurum-nix/nix in your Sass file.

Prefix variable

Change the prefix name to your preferred:

$prefix: 'nix-'; // nix- is default

In this example, your class will be nix-diplay_block.

or set the prefix to a blank value:

$prefix: '';

With this example, your class name will be diplay_block.

Breakpoints variables

$xs: 768px; // screens up to 768px (mobile)
$sm: 1024px; // screens up to 1024px (tablet/small desktops)
$md: 1200px; // screens up to 1200px (medium desktops)
$lg: 1600px; // screens up to 1600px (large desktops)

Sizes variables

These sizes are used for margins and paddings:

$int-size: 5; // every 5px
$max-size: 100; // up to 100px

$int-size is the interval variable to sizes, and $max-size is the max size to generate.

Generate your custom values

1. Clone the Nix repository;
2. Run yarn to install dependencies;
3. Run yarn build:nix to build or yarn watch:nix to watch the changes;