nakDS

Design system for a beatiful web

Getting Started

npm version badge Github size badge License badge

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

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
Flex item
Flex item
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
Flex item
Flex item
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
Grid item
Grid item
Grid item

.nk-grid-3

Grid item
Grid item
Grid item

.nk-grid-4

Grid item
Grid item
Grid item
Grid item

.nk-grid-5

Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item

.nk-grid-6

Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item

Responsive columns

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

Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item
Grid item

Gap

.nk-gap--small

Grid item
Grid item
Grid item
Grid item
Grid item
Grid item

.nk-gap

Grid item
Grid item
Grid item
Grid item
Grid item
Grid item

.nk-gap--large

Grid item
Grid item
Grid item
Grid item
Grid item
Grid item

Components

Avatar


                  <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

Badge

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

Card

                    
            <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

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!

Cover

nakDS

Easy and beautiful

Dimmer


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

Drawer


                  <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.

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-button

Timeline


                  <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

slider


                      <: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

Next
  • List items.
  • List items.
  • List items.
  • List items.
Back Next

nakDS

Easy and beautiful

Back Next

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

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.

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

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

Motion

Shapes

Circle

Heart

Experimental

Hokane by Keldor

Art

Assets

Attributions

Attributions

Library to highlight the code: highlight.js

By Keldor Gerrikagoitia
By Keldor Gerrikagoitia