Package detail

nord

arcticicestudio2.3k(Apache-2.0 AND CC-BY-SA-4.0)0.2.1

A arctic, north-bluish color palette

nord, arctic, north, bluish, clean, minimal, flat, ui, syntax

readme

A arctic, north-bluish color palette.

Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax highlighting and UI. It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful ambiance.

The color palette it divided into four named components to represent the different color effects.

Nord Palette Overview

Nord colors are numbered from nord0 to nord15 where each component contains a different amount of colors:

Polar Night nord0 - nord3
Snow Storm nord4 - nord6
Frost nord7 - nord10
Aurora nord11 - nord15

This naming convention allows an uncomplicated use for terminals and preserves the compatibility to similar projects like base16.

Usage

To show a list of all available Gulp tasks run gulp or gulp help.

CSS

The CSS specification supports the usage of primitive value types to define custom properties which can be used to create e.g. color variables.
Nord provides the template-css.scss template file to compile a nord.css stylesheet.

The generated file contains all Nord color variables prefixed with -- inside the :root pseudo-class.
The :root pseudo-class represents an element that is the root of the document.
This is always the HTML (<html>) element which allows to use the Nord color variables for the whole document.

The nord.css stylesheet can be compiled via Gulp:

npm install
gulp compile-css-template

Sass

Copy the nord.scss file into your project and import it in your Sass files:

@import "nord";

The .scss file extension is optional.

SassDoc

Nord Sass sources are documented using the SassDoc documentation syntax which can be compiled to a HTML documentation via Gulp:

npm install
gulp sassdoc

The Sassdoc theme can be changed by editing the .sassdocrc configuration file.

LESSCSS

Copy the nord.less file into your project and import it in your LESSCSS files:

@import "nord";

Information about how the @import statement handles imports with different file extensions can be found in the official LESSCSS documentation.

KSS

Nord LESSCSS sources are documented using the KSS documentation syntax.
Information about the generation of a styleguide can be found in the official KSS documentation.

Color Swatches

Nord is available in various native formats:

.aco Adobe Photoshop Palette
.ase Adobe Swatch Exchange
.gpa Gpick Palette
.gpl GIMP/Inkscape/CinePaint/Krita Palette
.mtl Alias/WaveFront Material

A list of detailed information about each file format can be found here.

Port Projects

Forks

Nordisk by @kamwitsta

Development

Contribution

Please report issues/bugs, feature requests and suggestions for improvements to the issue tracker.

changelog

0.2.0 (2016-11-22)

Features

Project Assets

Added new SVG variations of the color palette components.
Can be used for showcases or any kind of branding concepts. (@arcticicestudio, 78ef70b8)

Polar Night Snow Storm Frost Aurora

Toolbox

Created Travis CI (.travis.yml) and Circle CI (circle.yml) configuration files for continuous builds against the Gulp tasks compile-css-template and sassdoc. (@arcticicestudio, #4, 00beff7d)

Improvements

Native Formats

The "Adobe Photoshop Color Palette" nord.ase is now fully compatible to Adobe Photoshop CS6.
The original file has been created via Gpick and has been recreated using Adobe Photoshop CS6 to be fully compatible to the vendor format. (@arcticicestudio, #5, 30ae2f4b)

Design Documentation

Switched the color definitions for nord8 and nord14.
The accent color nord8 is now used for methods and functions while strings and attribute values are now colored by nord14 instead. This is design has already been implemented in all port projects before, but is now officially stated with this release version. (@arcticicestudio, #1, 2a95e4c0)

Switched the color of punctuations and variables/constants.
The nord4 color is now used for variables and constants while punctuations are now colored by nord6 instead.
This design has also already been implemented in all port projects before, but is now officially stated with this release version. (@arcticicestudio, #2, f8231acd)

nord13 is now used to colorize all kind of regular expressions. (@arcticicestudio, #3, adfcac5c)

Project Documentation

Added new official port projects. (@arcticicestudio, eacf9078, 51f46d1b, d51a995b)

Added NPM registry badges to show the latest published version and amount of downloads. (@arcticicestudio, 2c061e15)

0.1.0 (2016-09-04)

Nord Palette Overview

Features

Sass

Implemented the nord.scss stylesheet
Implemented the template-css.scss stylesheet.
This template can be compiled to a nord.css stylesheet via Gulp:
```
npm install
gulp compile-css-template
```

Sassdoc

Nord Sass sources are documented using the Sassdoc documentation syntax which can be compiled to a HTML documentation via Gulp:

npm install
gulp sassdoc

The Sassdoc theme can be changed by editing the .sassdocrc configuration file.

LESSCSS

Implemented the nord.less stylesheet

KSS

Nord LESSCSS sources are documented using the KSS documentation syntax.
Information about the generation of a styleguide can be found in the official KSS documentation.

Color Swatches

Added various native color palette files:

Adobe Photoshop: nord.aco (binary)
Adobe Swatch Exchange: nord.ase (binary)
Gpick Palette: nord.gpa (binary)
GIMP/Inkscape/CinePaint/Krita Palette:nord.gpl
Alias/WaveFront Material: nord.mtl

0.0.0 (2016-09-04)

Project Initialization