This site is no longer maintained

This is the documentation for version 0 of the design system and will no longer be updated. Please see the new Design System site on nice.org.uk for the most up-to-date documentation.

Design System documentation

Alpha NICE Design System is in development. This means it is not feature complete and there may be issues. Find any? Please, let us know!

Helpers

SASS helper classes, mixins and functions

Mixins

element

element 

@mixin element (...) { ... }
Parameters
Name Description Type Default value
$element

Element's name

 String —

modifier

modifier 

@mixin modifier (...) { ... }
Parameters
Name Description Type Default value
$modifier

Modifier's name

 String —

clearfix

clearfix 

@mixin clearfix (...) { ... }

text-truncate

text-truncate 

@mixin text-truncate (...) { ... }

center-block

center-block 

@mixin center-block (...) { ... }

when-is

when-is 

@mixin when-is (...) { ... }
Parameters
Name Description Type Default value
$element-selector

Element selector

 String —

portrait

portrait 

@mixin portrait (...) { ... }

landscape

landscape 

@mixin landscape (...) { ... }

invisible

invisible 

@mixin invisible (...) { ... }

invisible-off

invisible-off 

@mixin invisible-off (...) { ... }

Placeholders

clearfix 

				%clearfix {}

Selectors

Variables

$nice-glyphs

nice-glyphs 

$nice-glyphs: (
  bullet: '2022',
  copyright: '00a9',
  greater-than: '003e',
  hyphen-minus: '002d',
  left-double-quotation-mark: '201C',
  less-than: '003c',
  plus: '002b',
  punc-space: '02008',
  zero-width-space: '0200B'
  // Add more entity codes here as and when they're needed
);
Map structure
Name Description Type Value
bullet

Bullet (•)

 String 2022
copyright

Copyright symbol (©)

 String 00a9
greater-than

Greater than symbol (>)

 String 003e
hyphen-minus

Hyphen minus (-)

 String 002d
left-double-quotation-mark

Left double quotation mark (“)

 String 201C
less-than

Less than symbol (<)

 String 003c
plus

Plus sign (+)

 String 002b
punc-space

Punctuation space (small, width of a comma)

 String 02008
zero-width-space

Zero width space

 String 0200B

Function

get-glyph

get-glyph 

@function get-glyph (...) { ... }
Parameters
Name Description Type Default value
$names

The name(s) of the glyph(s) to get

 argList —

first

first 

@function first (...) { ... }

last

last 

@function last (...) { ... }

last-index

last-index 

@function last-index (...) { ... }
Parameters
Name Description Type Default value
$list

list to search

 List —
$value

value to be searched for

 Any —

strip-unit

strip-unit 

@function strip-unit (...) { ... }
Parameters
Name Description Type Default value
$num

The number whose units you wish to strip.

 Number —

em

em 

@function em (...) { ... }
Parameters
Name Description Type Default value
$pixels

The px-value you wish to convert to ems. No px unit necessary (e.g. 20 is fine, so is 20px). Passing a list will result in a list of em values (see examples).

 Number —
$base

A base-value with which to calculate the em-value

 Number $nice-base-font-size

rem

rem 

@function rem (...) { ... }
Parameters
Name Description Type Default value
$pixels

The px-value you wish to convert to rems. No px unit necessary (e.g. 20 is fine, so is 20px). Passing a list will result in a list of rem values (see examples).

 Number —
$base

A base-value with which to calculate the em-value

 Number $nice-base-font-size

Edit on GitHub