Test Elements

Welcome

Neue Kit (German for new, said like "noya") is a performance focused, ITCSS based scaleable front-end kit. It's built for the modern web and only supports modern browsers although we are dragging IE11 along too! It includes a flex based fluid grid, common comprehendible JavaScript plugins and a minimalist style for all your friendly neighbourhood web elements.

Installation

There are 2 routes to get going with Neue Kit, you can either spin up a clean project with the Neue Kit structure or you can simply add the Neue Kit NPM package to your existing project.

Starter Kit


                            
                                npm install -g degit
                                degit neuekit/neuekit-starter yourprojectfolder
                                npm install
                                npm start

NPM Package


                            
                                npm install neuekit --save
                                npm start

Compatibility

Neue Kit really is built for the modern web and as such only supports the cool kid browsers... and that kid who sits in the corner and eats flies.

Of course you can adjust the supported browsers by filling in the package.json browserlist config. Both the CSS and JS are configurable in this manner. See our default config on browserl.ist

Chrome 49+
Safari 12+
iOS Safari 11+
Firefox 63+
Samsung 4+
Opera 56+
Edge 17+
Internet Explorer 11+
UC Browser 11.8+

ITCSS methodology

What?

Inverted triangle CSS is a way to architect your styles. It focusses on organising your styles in order of reach and specificity, which makes your stylesheets easier to deal with. It aims to fix a classic CSS problem, coming back to a previous project or inheriting one and not knowing where new styles should go in the stylesheet. This is most commonly solved by adding them to the end of the sheet, which is less than desirable.

Why?

How?

Settings

Tools

Generic

Elements

Objects

Grid

The grid system is simple to use, can create a wide range of layouts and utilises a mixture of settings and utilities to allow ultimate flexibility. Oh they are infinitely nest-able too!

Basic usage

The Neue Kit grid system is built with flex and with our handy utilities we can make use of all of the benefits that flex has to offer.

Here is a super simple grid declaration with a single full width column. By default a single column will try to take up 100% of the width of the parent.

                        
                            <div class="o-grid">
                                <div class="o-grid__item"></div>
                            </div>

                        
                            <div class="o-grid  o-grid--item"></div>

Let's take a look at a grid with a few columns and an alignment class for good measure. This declaration will define 4 columns, centre aligned (see alignment utilities).

On mobile each column will be 100%, on tablets it will change to 50% per column and on desktop 25% per column. There are 12 size classes in the default setup, which can be changed to any number, along with gutter sizes too.

                        
                            <div class="o-grid  u-alignCenter@l">
                                <div class="o-grid__item  u-size-6@m  u-size-3@l"></div>
                                <div class="o-grid__item  u-size-6@m  u-size-3@l"></div>
                                <div class="o-grid__item  u-size-6@m  u-size-3@l"></div>
                                <div class="o-grid__item  u-size-6@m  u-size-3@l"></div>
                            </div>

Modifier classes

There are a whole heap of classes you can use to customise the grid to your liking, these are added top level alongside your o-grid class:

o-grid--item This can be used if you only need a single column, which saves a div 😁
o-grid--max This removes the max-width restriction on the grid, making it fill the screen.
o-grid--edge This strips the gutters from your columns, enabling them to go edge-to-edge.
o-grid—-unnest This doubles the negative margin which may be needed to reverse nested grid padding.
o-grid--nest This does the opposite of the above and allows a nested grid to be inset visually.
o-grid--items-2 Adding items plural and specifying a number sets the columns at the parent level...

Top-level definition

You can layout your grid at the parent level if your columns are all the same width, you can even do this for each breakpoint. This can be especially helpful if you don't know the number of columns you have to display, if they are pulled dynamically for example.

                        
                            <div class="o-grid  o-grid--items-6@m  o-grid--items-3@l">
                                <div class="o-grid__item"></div>
                                <div class="o-grid__item"></div>
                                <div class="o-grid__item"></div>
                                <div class="o-grid__item"></div>
                            </div>

Using size utilities

As shown above the grid makes use of the size utility classes, which are not restricted to the grid. You can customise the number of size classes in the settings layer. (See size utilities) Here's a broad example of the default available size classes and how you may apply them to the grid.

                        
                            <div class="o-grid">
                                <div class="o-grid__item  u-size-6@s  u-size-3@m  u-size-2@l  u-size-1@xl"></div>
                                <div class="o-grid__item  u-size-6@s  u-size-3@m  u-size-2@l  u-size-1@xl"></div>
                                <!-- Repeat -->
                            </div>

                            <div class="o-grid">
                                <div class="o-grid__item  u-size-4"></div>
                                <div class="o-grid__item  u-size-auto"></div>
                                <div class="o-grid__item  u-size-auto"></div>
                            </div>

u-size-auto fills the remaining space and if you use more than one the space is divided up and shared equally among them.

Using flex utilites

One of the strengths of pulling helpers out into utilities is that we can use them with anything. Neue Kit comes with utilities for all sorts of things, and flex utilities come in handy when defining your layouts.

                        
                        <div class="o-grid  u-alignCenter  u-between  u-justifyCenter@l">
                            <div class="o-grid__item  u-size-6  u-size-2@m">
                            <div class="o-grid__item  u-size-4@m">
                            <div class="o-grid__item  u-size-6  u-size-2@m">
                        </div>

Head over to the utilities section to see the full range of helpers on offer and how you can use them in your project.

Using offset utilities

Sometimes if your designer is feeling particularly edgy they may create a wonderful arymetric page layout with areas that are being pulled and pushed outside the confines of the grid.. and you need to somehow create this using a grid system 😳

This is where the offset utility can help you out!

                        
                            <div class="o-grid">
                                <div class="o-grid__item  u-size-8@l u-outsetLeft-2@l"></div>
                                <div class="o-grid__item  u-size-6@l"></div>
                            </div>

                            <div class="o-grid">
                                <div class="o-grid__item  u-size-4@l  u-inset-2@l"></div>
                                <div class="o-grid__item  u-size-7@l  u-outsetRight-1@l"></div>
                            </div>

Including the mixin

Usage of the grid mixin is simple, you can import it like so:

                        
                            @include nu-object__grid();

Or you can go anonymous and import the guts of the object without the parent class name, this is super useful when you want to make serious changes to a Neue Kit mixin.

                        
                            .mySuperGrid {
                                @include _nu-object__grid();
                            }

Configuring the mixin

Parameter	Type	Default	Description
$gutter	Pixel Value	8px	Sets the gap between grid items
$gutterSmall	Pixel Value	8px	Enables a different gap on mobile
$mediumBreakpoint	String	m	The point at which the gutter change happens
$maxWidth	Pixel Value	1380px	Sets the maximum width of the grid container

Components

Utilities

The utility layer is home to many small css classes, that ordinarily take on a single simple task. This layer edges towards the end sharper point of the itcss triangle and as such it is not uncommon for classes to be doubled to ensure they are more specific than nest classes.

Colours

This utility creates simple potentially helpful classes that you can use to set the background colour or text colour of any element. These are created based on the colour variables set out in the settings layer.

                        
                            <figure class="u-bgNoir">
                                <img src="michael.jpg" alt="Michael Scott">
                                <figcaption class="u-colourSnow">You don't know how high I can fly</figcaption>
                                </figure>

As mentioned the utility relies on a scss map declared as $palette see the following example for how to declare said map.

                        
                            $palette: (
                                'primary':      $primary,
                                'secondary':    $secondary,
                                'tertiary':     $tertiary,
                                'quaternary':   $quaternary
                            );

Configuring the mixin

Parameter	Type	Default	Description
$palette	Setting Var	$palette	Passes in the project colour palette map
$lightnessTolerance	Integer	50	Sets threshold for the level of darkness a background colour must have before setting the text to a light colour
$lightnessColour	String	white	Colour to apply to text on dark background colours
$utilities	Map	(background, colour)	Map defining which classes to create

flex

There are a fair few flex helpers to help you create a wide variety of layouts.

Initialise flex:

u-flex Adds display: flex to any element
u-inflex Adds display: inline-flex to any element

Parent flex utilities

Available in breakpoint format eg. u-row@xs, u-row@s, u-row@m, u-row@l, u-row@xl

u-row adds flex-direction: row
u-column adds flex-direction: column
u-rowRevers adds flex-direction: row-reverse
u-columnReverse adds flex-direction: column-reverse
u-justifyStart adds justify-content: flex-start
u-justifyCenter adds justify-content: center
u-justifyEnd adds justify-content: flex-end
u-alignStart adds align-items: flex-start
u-alignCenter adds align-items: center
u-alignEnd adds align-items: flex-end
u-around adds justify-content: space-around
u-between adds justify-content: space-between
u-wrap adds flex-wrap: wrap
u-nowrap adds flex-wrap: nowrap

Child flex utilities

Available in breakpoint format eg. u-grow@xs, u-grow@s, u-grow@m, u-grow@l, u-grow@xl

u-grow adds flex-grow: 1
u-noGrow adds flex-grow: 0
u-shrink adds flex-shrink: 1
u-noShrink adds flex-shrink: 0
u-alignSelfStart adds align-self: flex-start
u-alignSelfCenter adds align-self: center
u-alignSelfEnd adds align-self: flex-end
u-first adds order: -1
u-last adds order: 1

Configuring the mixin

Parameter	Type	Default	Description
$responsive	Map	(up, only)	Sets the responsive rules for class generation

Offsets

Offsets enable you to pull and push items around, especially useful when you need to create artistic layouts with the grid. Although these can be used anywhere.

Available in breakpoint format eg. u-inset-1@xs, u-inset-1@s, u-inset-1@m, u-inset-1@l, u-inset-1@xl

Classes end in a number, 1-12 by default, reflective of the number of columns configured

u-inset-1 applies a positive left margin as a percentage to any element
u-outsetLeft-1 applies a negative left margin as a percentage to any element
u-outsetRight-1 applies a negative right margin as a percentage to any element

Configuring the mixin

Parameter	Type	Default	Description
$responsive	Map	(up, only)	Sets the responsive rules for class generation

Sizes

A size class sets the flex basis property of a flex child. It can be used to set the width of any element also. Typically this is matched with the grid, but is not limited to the gird.

Available in breakpoint format eg. u-size-1@xs, u-size-1@s, u-size-1@m, u-size-1@l, u-size-1@xl

Classes end in a number, 1-12 by default, reflective of the number of columns configured

u-size-auto applies flex grow to the element, filling the available space
u-size-1 applies flex basis as a percentage to any flex child element

Configuring the mixin

Parameter	Type	Default	Description
$responsive	Map	(up, only)	Sets the responsive rules for class generation

Spacing

The need for declarative margin and padding helpers comes around for more frequently than we would like to admit. Neue Kit has a mixin that can create the classes for you.

Safe area

To start there a few non-breakpoint classes for the safe padding area, often required for devices like the iPhone X as a way to deal with the notch.

u-safeArea-l applies padding left using the safe-area-inset-left value
u-safeArea-r applies padding right using the safe-area-inset-right value
u-safeArea-t applies padding top using the safe-area-inset-top value
u-safeArea-b applies padding bottom using the safe-area-inset-bottom value
u-safeArea-h combines both u-safeArea-l and u-safeArea-r
u-safeArea-v combines both u-safeArea-t and u-safeArea-b

Margin

Available in breakpoint format eg. u-mL-4@xs, u-mL-4@s, u-mL-4@m, u-mL-4@l, u-mL-4@xl

u-mL-a applies margin left auto
u-mR-a applies margin right auto
u-mT-a applies margin top auto
u-mB-a applies margin bottom auto
u-mH-a combines both u-mL-a and u-mR-a
u-mV-a combines both u-mT-a and u-mB-a
u-mL-4 applies margin left at the specified size using the rem unit
u-mR-4 applies margin right at the specified size using the rem unit
u-mT-4 applies margin top at the specified size using the rem unit
u-mB-4 applies margin bottom at the specified size using the rem unit
u-mH-4 combines both u-mL-4 and u-mR-4
u-mV-4 combines both u-mT-4 and u-mB-4

Padding

Available in breakpoint format eg. u-pL-4@xs, u-pL-4@s, u-pL-4@m, u-pL-4@l, u-pL-4@xl

u-pL-4 applies padding left at the specified size using the rem unit
u-pR-4 applies padding right at the specified size using the rem unit
u-pT-4 applies padding top at the specified size using the rem unit
u-pB-4 applies padding bottom at the specified size using the rem unit
u-pH-4 combines both u-pL-4 and u-pR-4
u-pV-4 combines both u-pT-4 and u-pB-4

Configuring the mixin

Parameter	Type	Default	Description
$attrs	Map	(padding, margin)	Declares spacing types to create
$dash	String	'-'	Set the character between the classname and the unit
$rem	Boolean	true	Toggle for pixels or rem values
$responsive	Map	(up, only)	Sets the responsive rules for class generation
$steps	Map	(0, 4, 8, 12, 16, 20, 24, 32, 40, 48)	List of spacing sizes to create
$directions	Map	(top, bottom, left, right, vertical, horizontal)	List of directions to create

Text

There are many available text utility classes ready for use in the kit. By default the mixin includes them all but you can cherry pick the ones you actually using. 😁

First the non-breakpoint classes

u-textBolder applies font-weight: bolder
u-textLighter applies font-weight: lighter
u-textStrong applies font-weight: 600
u-textSuccess applies color: $success
u-textWarn applies color: $warn
u-textError applies color: $error
u-textDisabled applies color: $disabled
u-textLower applies text-transform: lowercase
u-textUpper applies text-transform: uppercase
u-textCaps applies text-transform: capitalize

Available in breakpoint format eg. u-pL-4@xs, u-pL-4@s, u-pL-4@m, u-pL-4@l, u-pL-4@xl

u-textStart applies text-align: start with a fallback to text-align: left
u-textCenter applies text-align: center
u-textEnd applies text-align: end with a fallback to text-align: right
u-textJustify applies text-align: justify
u-textGrow applies font-size: 125%
u-texthrink applies font-size: 75%
u-textNowrap applies white-space: nowrap
u-h1 enables the h1 element styling to be applied to any element
u-h2 enables the h2 element styling to be applied to any element
u-h3 enables the h3 element styling to be applied to any element
u-h4 enables the h4 element styling to be applied to any element
u-h5 enables the h5 element styling to be applied to any element
u-h6 enables the h6 element styling to be applied to any element
u-s1 applies a size between h1 and h2
u-s2 applies a size between h2 and h3
u-s3 applies a size between h3 and h4
u-s4 applies a size between h4 and h5
u-s5 applies a size between h5 and h6
u-s6 applies a size below h6

Configuring the mixin

Parameter	Type	Default	Description
$responsive	Map	(up, only)	Sets the responsive rules for class generation
$utilities	Map	( text-start, text-center, text-end, text-grow, text-shrink, text-bolder, text-lighter, text-strong, text-justify, text-success, text-warn, text-error, text-disabled, text-lower, text-upper, text-caps, text-nowrap )	Declares the types of classes to create

Visibility

Quick access to classes enabling you to hide, show, lock and position all or parts of elements can be found here. By default you get all of these when including the mixin but again you can cherry pick the ones you are actually using.

Available in breakpoint format eg. u-hide@xs, u-hide@s, u-hide@m, u-hide@l, u-hide@xl

u-hide applies display: none
u-block applies display: block
u-inblock applies display: inline-block
u-locked applies overflow: hidden
u-sticky applies position: sticky along required properties for the polyfill
u-radius applies border-radius: $radius
u-pointerNone applies pointer-events: none

Configuring the mixin

Parameter	Type	Default	Description
$responsive	Map	(up, only)	Sets the responsive rules for class generation
$utilities	Map	( hide, block, inblock, locked, radius, sticky, pointer )	Declares the types of classes to create