Njord (Njörðr)

Njörðr is a collection of SCSS helpers and mixins I use in the majority of my projects. It's provided as-is and is available on GitHub and npm. I usually use (a selection of) these in combination with Bourbon.io. Your mileage may vary.

Documentation

The documentation is generated using SassDoc. It's then deployed to Github pages.

Every module (file) of the framework can be used on it's own, and should be self-contained and portable.

Helpers

The most broadly named module encompasses a wide range of - well, erm - helpers. Everything from small functions and silent classes to large mixins.

Media queries

This is my preferred implementation of a media query mixin, taken from an older version of inuitcss. It supports both mobile and desktop first, and uses device name abstractions (tabletV, mobileH etc.), to make coding easy. I get that screen size isn't the same as device type, but I feel that it provides a good metaphor.

Typography

A bunch of typography related mixins to support vertical rythm, originally ported from Compass when I started to use LibSass. In combination with Bourbon's modular scale it's pretty neat.

Grid

I dislike CSS grid systems, as they mostly encourage implementation through classes in your markup, which in turn leads to confusion about when a module looks like what (breaking the seperation of concerns across your codebase). Secondly, I find a lot of them way too opinionated. So, for the odd event that I really need a grid system, I tend to roll my own. This is it.

Contact, attribution & contribution

All code here is either created by me or shamelessly stolen from other great libraries. I've tried to attribute authors whenever relevant. Contribute by simply forking your own repository and commit away.

I will review pull requests as quickly as I can.

If anything leaves a bad taste in your mouth, contact info can be found at ljd.dk.

License

Njörðr is licensed under WTFPL.

Name

Njörðr is a God from old Norse mythology. It's also the old form of the name of my nephew, who's currently the sweetest boy alive.

Helpers

placeholders

hide-text

%hide-text { ... }

Description

Basic text hider.

Example

Basic usage

.hide-text {
	@extend %hide-text;
}

Basic usage output

.hide-text {
	text-indent: 200%;
	white-space: nowrap;
	overflow: hidden;
}

sr-only

%sr-only { ... }

Description

Screen reader only content - See the explanation on A11Y Project

Example

Basic usage

.sr-only {
	@extend %sr-only;
}

Basic usage output

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

pseudo-block

%pseudo-block { ... }

Description

Create layout elements from pseudo elements with no content.

Example

Basic usage

.pseudo-block:after {
	@extend %pseudo-block;
}

Basic usage output

.pseudo-block:after {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	content: '';
	display: block;
}

list-helper

%list-helper { ... }

Description

List helper (because you do this all the time).

Example

Basic usage

.nav-list {
	@extend %list-helper;
}

Basic usage output

.nav-list {
	display: block;
	padding: 0;
	margin: 0;
	list-style: none;
}

clearfix

%clearfix { ... }

Description

Standard clearfix

Example

Basic usage

.float-container:after {
	@extend %clearfix;
}

Basic usage output

.float-container:after {
	content: "";
	display: table;
	clear: both;
}

Requires

[mixin] clearfix

Used by

[mixin] grid-row

mixins

clearfix

@mixin clearfix() { ... }

Description

Standard clearfix as an include for more effortless (but bloatier) coding

Parameters

None.

Example

Basic usage

.float-container:after {
	@include clearfix;
}

Basic usage output

.float-container:after {
	content: "";
	display: table;
	clear: both;
}

Used by

[placeholder] clearfix
[mixin] grid-row

poly-before

@mixin poly-before() { ... }

Description

Polyfills for before elements (for IE7 and IE8 if JS changes needed). Be aware that you need to use JS to add (preferably via JS) to get the benefit of these polyfill styles.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

poly-after

@mixin poly-after() { ... }

Description

Polyfills for after elements (for IE7 and IE8 if JS changes needed). Be aware that you need to use JS to add (preferably via JS) to get the benefit of these polyfill styles.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

link-active

@mixin link-active() { ... }

Description

Active styles for link-type elements

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Example

Basic usage

a {
	text-decoration: none;

	@include link-active {
		text-decoration: underline;
	}
}

Basic usage output

a {
	text-decoration: none;
}
a:focus,
a:active,
.no-touchevents a:hover {
	text-decoration: underline;
}

scrolling-shadows

@mixin scrolling-shadows($direction: Y, $background-color: rgba(255, 255, 255), $shadow-intensity: 0.2, $shadow-color: 0.2, $cover-size: 40px, $shadow-size: 14px) { ... }

Description

Mixin for scrolling shadows. Codepen example.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	Determines scroll direction. Should be `Y` or `X`.	`Letter`	`Y`
`$background-color`	Container background color.	`Color`	`rgba(255, 255, 255)`
`$shadow-intensity`	Shadow opacity.	`Number`	`0.2`
`$shadow-color`	Shadow color.	`Color`	`0.2`
`$cover-size`	Set the size of the shadow covering gradient.	`Pixels`	`40px`
`$shadow-size`	Set the size of the shadow.	`Pixels`	`14px`

Example

Basic usage

div {
	overflow: auto;
	height: 300px;
	@include scrolling-shadows();
}

arrow

@mixin arrow($direction, $color, $size) { ... }

Description

CSS Arrows mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	Arrow direction. Should be `'top'`, `'right'`, `'bottom'`, `'left'`, `'top-left'`, `'top-right'`, `'bottom-left'` or `'bottom-right'`.	`String`	— none
`$color`	Arrow color.	`Color`	— none
`$size`	Arrow size.	`Size`	— none

Example

Basic usage

.arrow-up {
	@include arrow('top', black, 10px);
}

Author

bpainter

experimental

@mixin experimental($property, $value) { ... }

Description

Experimental support mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	— none		— none
`$value`	— none		— none

Example

Basic usage

.box-sizing {
	@include experimental(box-sizing, border-box);
}

Requires

[variable] experimental-support-for-webkit
[variable] experimental-support-for-khtml
[variable] experimental-support-for-mozilla
[variable] experimental-support-for-microsoft
[variable] experimental-support-for-opera

Author

Compass

Media queries

variables

mq-desktop

$mq-desktop: 1200px !default;

Description

Desktop width

Type

Size

Used by

[mixin] media
[mixin] media

mq-tablet-horizontal

$mq-tablet-horizontal: 1024px !default;

Description

Tablet horizontal width

Type

Size

Used by

[mixin] media
[mixin] media

mq-tablet-vertical

$mq-tablet-vertical: 768px !default;

Description

Tablet vertical width

Type

Size

Used by

[mixin] media
[mixin] media

mq-mobile-horizontal

$mq-mobile-horizontal: 568px !default;

Description

Mobile horizontal width

Type

Size

Used by

[mixin] media
[mixin] media

mq-mobile-vertical

$mq-mobile-vertical: 320px !default;

Description

Mobile vertical width

Type

Size

Used by

[mixin] media
[mixin] media

mixins

media

@mixin media($point, $max-width: false) { ... }

Description

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$point`	Should be either `print`, `retina`, `desktop`, `tabletH`, `tabletV`, `mobileH`, `mobileV` or a width measurement.		— none
`$max-width`	If set to true, generates `max-width` media queries, e.g. desktop first.	`Bool`	`false`

Content

This mixin allows extra content to be passed (through the @content directive).

Example

Basic usage

.module { // The mixin could be used outside selectors as well.
	@include media(tabletV) {
		// Tablet and up styles go here
	}
}

Requires

[variable] mq-desktop
[variable] mq-tablet-horizontal
[variable] mq-tablet-vertical
[variable] mq-mobile-horizontal
[variable] mq-mobile-vertical
[variable] mq-desktop
[variable] mq-tablet-horizontal
[variable] mq-tablet-vertical
[variable] mq-mobile-horizontal
[variable] mq-mobile-vertical

Typography

variables

em-base

$em-base: 18px !default;

Description

Base font size

Type

Size

Used by

[mixin] adjust-font-size-to

base-line-height

$base-line-height: 30px !default;

Description

Base line height

Type

Size

Used by

[function] lines
[mixin] establish-baseline
[mixin] establish-baseline
[mixin] adjust-font-size-to
[function] lines-for-font-size
[function] lines-for-font-size
[function] lines-for-font-size

min-line-padding

$min-line-padding: 2px !default;

Description

Minimum line padding

Type

Bool

Used by

[function] lines-for-font-size

round-to-nearest-half-line

$round-to-nearest-half-line: true !default;

Description

Round vertical rhythm to nearest half line height

Type

Bool

Used by

[function] lines-for-font-size
[function] lines-for-font-size

functions

lines

@function lines() { ... }

Description

Get lines in EM based on context

Parameters

None.

Requires

[variable] base-line-height

mixins

establish-baseline

@mixin establish-baseline($font-size, $relative-font-size) { ... }

Description

Establish baseline

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$font-size`	Optional. In pixels.	`Size`	— none
`$relative-font-size`	Optional.	`Bool`	— none

Requires

[function] lines-for-font-size
[variable] browser-default-font-size
[variable] base-line-height
[variable] base-line-height

adjust-font-size-to

@mixin adjust-font-size-to($to-size, $lines, $from-size) { ... }

Description

Adjust font size and line height to modular scale point

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$to-size`	Font size in EMs.	`Integer`	— none
`$lines`	Optional. Number of lines.	`Integer`	— none
`$from-size`	Optional. Context font size in EMs.	`Size`	— none

Requires

[function] strip-units
[function] lines-for-font-size
[function] strip-units
[variable] em-base
[variable] base-line-height

Grid system

variables

grid-gutter

$grid-gutter: 30px !default;

Description

Grid gutter definition. Overwrite this in your own project if needed.

Type

Size

Used by

[mixin] grid-row-margin
[mixin] grid-row-margin
[mixin] grid-col-padding
[mixin] grid-col-padding

grid-columns

$grid-columns: 8 !default;

Description

Grid column count. Overwrite this in your own project if needed.

Type

Int

Used by

[function] grid-col-width

mixins

grid-col

@mixin grid-col($cols: 1, $padding: true, $hoist: false) { ... }

Description

Grid column mixin for easy usage in projects.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$cols`	Number of columns	`Integer`	`1`
`$padding`	Add padding	`Bool`	`true`
`$hoist`	Determines if padding should be hoisted via silent classes. Off by default, but produces bloatier code. If used, be sure to only use outside @media queries.	`Bool`	`false`

Example

Basic usage

.my-column {
	@include grid-col(1);
}

Basic usage output

.my-column { // Some styles are mixed in directly, so they can be easily overwritten in @media queries.
	float:left;
	width: 12.5%; // 1 column default width
	box-sizing: border-box;
	padding-left: 15px;
	padding-right: 15px;
}

Requires

[mixin] grid-col-padding
[function] grid-col-width
[placeholder] grid__col--padding

grid-push

@mixin grid-push($cols: 1) { ... }

Description

Push grid column N amount of columns. Could theoretically be used to pull columns by passing negative `$cols

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$cols`	Number of columns	`Integer`	`1`

Example

Basic usage

.my-column {
	@include grid-push(1);
}

Basic usage output

.my-column { // Some styles are mixed in directly, so they can be easily overwritten in @media queries.
	margin-left: 12.5%; // 1 column default width
}

Requires

[function] grid-col-width

grid-row

@mixin grid-row($margin: true, $clearfix: true, $hoist: true) { ... }

Description

Grid row container. Clears float and adds negative margin to allow for grid gutters. Clears via %clearfix in Helpers, so remember to include or create that if you use the modules by themselves. Uses silent classes, so should only be used outside media queries.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin`	Add negative margin	`Bool`	`true`
`$clearfix`	Add clearfix	`Bool`	`true`
`$hoist`	Determines if padding should be hoisted via silent classes. On by default, but turn it on to use this mixin inside @media queries. This will produce bloatier code.	`Bool`	`true`

Example

Basic usage

.my-row {
	@include grid-row;
}

Basic usage output

.my-row:after { // Clearfix is hoisted via silent class in Helpers.
	display: block;
	content: '';
	clear: both;
	height: 0;

	font-size: 0;

	visibility: hidden;
}
%grid__row, .my-row { // Margin is hoisted via silent classes. This allows for easier overwrites.
	margin-left: -15px;
	margin-right: -15px;
}

Requires

[mixin] grid-row-margin
[mixin] clearfix
[placeholder] grid__row
[placeholder] clearfix

Internals

functions

grid-col-width

@function grid-col-width($cols) { ... }

Description

Internal helper for creating grid widths

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$cols`	Number of columns	`Integer`	— none

Returns

Percentage —

Column width

Requires

[variable] grid-columns

Used by

[mixin] grid-col
[mixin] grid-push

strip-units

@function strip-units($number) { ... }

Description

Strip units - see StackOverflow for details.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$number`	— none	`Size`	— none

Returns

Number

lines-for-font-size

@function lines-for-font-size() { ... }

Description

Calculate amount of vertical lines needed for given font-size

Parameters

None.

mixins

grid-row-margin

@mixin grid-row-margin() { ... }

Description

Grid row styles as an include for more effortless (but bloatier) coding

Parameters

None.

Example

Basic usage

.grid__row {
	@include grid-col-padding;
}

Basic usage output

.grid__row {
	margin-left: -15px;
	margin-right: -15px;
}

Requires

[variable] grid-gutter
[variable] grid-gutter

Used by

[mixin] grid-row
[placeholder] grid__row

grid-col-padding

@mixin grid-col-padding() { ... }

Description

Grid row padding styles as an include for more effortless (but bloatier) coding

Parameters

None.

Example

Basic usage

.grid__col--padding {
	@include grid-col-padding;
}

Basic usage output

.grid__col--padding {
	box-sizing: border-box;
	padding-left: 15px;
	padding-right: 15px;
}

Requires

[variable] grid-gutter
[variable] grid-gutter

Used by

[mixin] grid-col
[placeholder] grid__col--padding

placeholders

grid__row

%grid__row { ... }

Description

Grid row styles that can be hoisted without problems

Example

Basic usage

.grid__row {
	@extend %grid__row;
}

Basic usage output

.grid__row {
	margin-left: -15px;
	margin-right: -15px;
}

Requires

[mixin] grid-row-margin

Used by

[mixin] grid-row

grid__col--padding

%grid__col--padding { ... }

Description

Grid row padding styles that can be hoisted without problems

Example

Basic usage

.grid__col--padding {
	@extend %grid__col--padding;
}

Basic usage output

.grid__col--padding {
	box-sizing: border-box;
	padding-left: 15px;
	padding-right: 15px;
}

Requires

[mixin] grid-col-padding

Used by

[mixin] grid-col

variables

experimental-support-for-mozilla

$experimental-support-for-mozilla: true !default;

Description

Experimental support for Mozilla

Type

Int

Used by

[mixin] experimental

experimental-support-for-webkit

$experimental-support-for-webkit: true !default;

Description

Experimental support for Webkit

Type

Bool

Used by

[mixin] experimental

experimental-support-for-opera

$experimental-support-for-opera: true !default;

Description

Experimental support for Opera

Type

Bool

Used by

[mixin] experimental

experimental-support-for-microsoft

$experimental-support-for-microsoft: true !default;

Description

Experimental support for Microsoft

Type

Bool

Used by

[mixin] experimental

experimental-support-for-khtml

$experimental-support-for-khtml: false !default;

Description

Experimental support for KHTML

Type

Bool

Used by

[mixin] experimental

browser-default-font-size

$browser-default-font-size: 16px !default;

Description

Browser default font size

Type

Size

Used by

[mixin] establish-baseline

Njord (Njörðr)

Documentation

Contents

Helpers

Media queries

Typography

Grid

Contact, attribution & contribution

License

Name

Helpers

placeholders

Description

Example

Description

Example

Description

Example

Description

Example

Description

Example

Requires

Used by

mixins

Description

Parameters

Example

Used by

Description

Parameters

Content

Description

Parameters

Content

Description

Parameters

Content

Example

Description

Parameters

Example

Description

Parameters

Example

Author

Description

Parameters

Example

Requires

Author

Media queries

variables

Description

Type

Used by

Description

Type

Used by

Description

Type

Used by

Description

Type

Used by

Description

Type

Used by

mixins

Description

Parameters

Content

Example

Requires

Typography

variables

Description

Type

Used by

Description