Getting Started

CDN

You can consume the minified stored file at:

https://nakds.s3.eu-west-3.amazonaws.com/nakDS.min.css

                
      <head>
        ...
        <link rel="stylesheet" href="https://nakds.s3.eu-west-3.amazonaws.com/nakDS.min.css" />
        ...
      </head>

NPM

Or install it via NPM

            
      npm i nakds

Principles

Easy (clear)
Standard
Flexible
Expressive
Scalable

Accesibility

Color tokens

Color palettes

Theme C

.nk-theme--c

--color--lighter: #6db5ba;

--color: #5ca9ad;

--color--darker: #529393;

--color--complementary: #d5ad26;

Theme M

.nk-theme--m

--color--lighter: #d17a9c;

--color: #c44f7a;

--color--darker: #bb2a5c;

--color--complementary: #5ca9ad;

Theme Y

.nk-theme--y

--color--lighter: #e5cc70;

--color: #d5ad26;

--color--darker: #c19a2b;

--color--complementary: #5ca9ad;

Scale k

--color--k-1: ;

--color--k-2: ;

--color--k-3: ;

--color--k-4: ;

--color--k-5: ;

--color--k-6: ;

--color--k-7: ;

--color--k-8: ;

--color--k-9: ;

--color--k-10: ;

Sizing tokens

--none: 0;

--x-small: 0.25rem; /* 4px */

--small: 0.5rem; /* 8px */

--medium: 1rem; /* 16px */

--large: 2rem; /* 32px */

--x-large: 3rem; /* 48px */

--huge: 4rem; /* 64px */

--x-huge: 6rem; /* 96px */

Layout

Patterns

Sidebar

Default

Inside a container

Right

Sidebar double

Double

Containers

.nk-container

Horizontal padding for fullpage sections.

.nk-container--content

Horizontal padding for generic content.

.nk-container--text

Horizontal padding for readable column width. Use it for you blog posts, for example.

.nk-section

Vertical padding for sections.

Flex

.nk-flex

Use @sm, @md, @lg sufix to control the display in different sizes. E.g. .nk-flex@md

Flex item

.nk-flex--column

Use @sm, @md, @lg sufix to control the display in different sizes. E.g. .nk-flex--column@md

Flex item

Grid

Add .nk-grid class to create a grid container.
Use .nk-grid-n to create columns, up to 6. (Can be a standalone class, not need to apply .nk-grid)
Use .nk-grid-n@sm, .nk-grid-n@md or .nk-grid-n@lg to create responsive columns.

.nk-grid-2

Grid item

.nk-grid-3

Grid item

.nk-grid-4

Grid item

.nk-grid-5

Grid item

.nk-grid-6

Grid item

Responsive columns

.nk-grid-2 nk-grid-3@md nk-grid-4@lg

Grid item

Gap

.nk-gap--small

Grid item

.nk-gap

Grid item

.nk-gap--large

Grid item

Components


                  <img class="nk-avatar--small" src="..." alt="">
                  <img class="nk-avatar" src="..." alt="">
                  <img class="nk-avatar--large" src="..." alt="">

.nk-avatar--small

.nk-avatar, .nk-avatar--medium

.nk-avatar--large

                    
            <div class="nk-badge">badge</div>

badge

                    
            <div class="nk-card">
            <img class="nk-card__image--full" src="..." alt="">
            <div class="nk-card__body">
              ...
            </div>
            </div>

.nk-card

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus dolorem debitis soluta vero cum! Tenetur voluptas fugit rem corporis ut dolores.

.nk-card

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus dolorem debitis soluta vero cum! Tenetur voluptas fugit rem corporis ut dolores, itaque ea fuga minus facere deleniti. Recusandae, quis natus explicabo laboriosam earum officia in veritatis dignissimos exercitationem ab perspiciatis!

.nk-card

Cover

nakDS

Easy and beautiful


                  <img class="nk-dimmer--small" src="..." alt="">


                  <img class="nk-drawer--small" src="..." alt="">

Use the drawer to show sidebar menus, or aside information.

.nk-card

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus dolorem debitis.


                  <img class="nk-gallery--small" src="..." alt="">

Heading

.nk-heading--1

.nk-heading--2

.nk-heading--3

.nk-heading--4

.nk-heading--5

.nk-heading--6

List

.nk-list

List item
List item
List item
List item

.nk-list--horizontal

List item
List item
List item
List item

.nk-loader

Attribution

.nk-button


                  <img class="nk-timeline--small" src="..." alt="">

HTML/CSS

Lorem ipsum dolor sit amet consectetur.

28/10/2016-12/11/2016

PostCSS

Workshop online for...

18/04/2016-22/04/2016

CSS

Workshop online ...

18/04/2016-22/04/2016


                      <:section class="nk-slider">
                        <:article class="nk-slider">
                          ...
                          <:a class="nk-slider__back" href="#0">Back<:/a>
                          <:a class="nk-slider__next" href="#1">Next<:/a>
                        <:/article>
                      <:/section>

nak Slider

Back Next

I am a slide

Back Next

List items.
List items.
List items.
List items.

Back Next

nakDS

Easy and beautiful

Back Next

Back

Styling

Typography

.nk-font--light

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque animi earum totam similique ex maxime iure, pariatur repudiandae temporibus voluptatem!

.nk-font--regular

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque animi earum totam similique ex maxime iure, pariatur repudiandae temporibus voluptatem!

.nk-font--bold

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque animi earum totam similique ex maxime iure, pariatur repudiandae temporibus voluptatem!

Variable fonts

Here some types (open source) you can import in your project to use with variable fonts:

Montserrat

Ilargiak erakusten duen aurpegiaren aurrean eskatzen diet oihukatuz izar galduei

376KB Github

Hero

Create beautiful hero sections

Background

.nk-bg--k-1

.nk-bg--k-2

.nk-bg--k-3

.nk-bg--k-4

.nk-bg--k-5

.nk-bg--k-6

.nk-bg--k-7

.nk-bg--k-8

.nk-bg--k-9

.nk-bg--k-10

.nk-bg--color

.nk-bg--c

.nk-bg--c-lighter

.nk-bg--m

.nk-bg--y

Gradients

Background gradients based on color tokens

Replace with your own tokens and get your custom gradients based on your color palette.

.nk-gradient-1

.nk-gradient-2

.nk-gradient-3

.nk-gradient-4

.nk-gradient-5

.nk-gradient-6

.nk-gradient-7

.nk-gradient-8

Filters

Grayscale

Blend mode

The blend mode defines the formula that must be used to mix the colors with the backdrop.

Normal

.nk-blend--multiply

.nk-blend--screen

.nk-blend--overlay

.nk-blend--darken

.nk-blend--lighten

.nk-blend--color-dodge

.nk-blend--color-burn

.nk-blend--hard-light

.nk-blend--soft-light

.nk-blend--difference

.nk-blend--exclusion

.nk-blend--hue

.nk-blend--saturation

.nk-blend--color

.nk-blend--luminosity

Hải Bùi

Motion

Shapes

Circle

Heart

Experimental

Art

Assets

.nk-icon

Handmade icons

Sizes

.nk-icon--small

.nk-icon

.nk-icon--large

Published at TheNounProject.com (Not the social media icons)

Images

Rikki Chan

Getting Started

CDN

NPM

Principles

Principles

Accesibility

Color tokens

Theme C

.nk-theme--c

Theme M

.nk-theme--m

Theme Y

.nk-theme--y

Scale k

Sizing tokens

Layout

Patterns

Sidebar

Default

Inside a container

Right

Sidebar double

Double

Containers

.nk-container

.nk-container--content

.nk-container--text

.nk-section

Flex

.nk-flex

.nk-flex--column

Grid

.nk-grid-2

.nk-grid-3

.nk-grid-4

.nk-grid-5

.nk-grid-6

Responsive columns

.nk-grid-2 nk-grid-3@md nk-grid-4@lg

Gap

.nk-gap--small

.nk-gap

.nk-gap--large

Components

Avatar

Badge

Card

.nk-card

.nk-card

.nk-card

Cover

nakDS

Dimmer

Drawer

.nk-card

Gallery

Heading

.nk-heading--1

.nk-heading--2

.nk-heading--3

.nk-heading--4

.nk-heading--5

.nk-heading--6

List

.nk-list

.nk-list--horizontal

.nk-loader

Menu

.nk-menu

.nk-menu--row

Modal

.nk-button

Timeline

HTML/CSS

PostCSS

CSS

slider

I am a slide

nakDS

Styling