How is it fashionable?

Nude is like underpants for the web. Sometimes you need to get things done really fast, and I designed nude to fulfill that need. It is exactly what you want but no more than you need. Read more below to get started!

Get Started

It's really easy to get started with nude. Install it, @import it, build it and ship it.

Install with npm

$ npm install nude-scss

Install with yarn

$ yarn install nude-scss

Typography

The framework supplies you with a great typography scale.

Heading 1 <h1> 4.0rem

Heading 2 <h2> 3.2rem

Heading 3 <h3> 2.4rem

Heading 4 <h4> 2.0rem

Heading 5 <h5> 1.8rem
Heading 6 <h6> 1.6rem

Lists

Ul's, ol's, dl's – it's all in the package!

  • One
    • Two
    • Three
  • Four
  1. One
    1. Two
    2. Three
  2. Four

Buttons

Nude doesn't want to get in the way of your coding. Never worry about line-height or coding again.

Blockquotes

For when you're tired of producing content yourself.

Hey, what's up?

Tables

Name Age Height Location
Adam Bertil 39 1,92 Denmark
Caroline Davids 25 2,03 Sweden

Grid

The most powerful part is the grid. It's built on flexbox and supports gutter, nesting, gridding and so on.

Ungapped columns

.column
.column
.column
.column

Gapped columns

.column
.column
.column
.column

Gridded columns

.column.is-three
.column.is-three
.column.is-three
.column.is-three
.column.is-three
.column.is-three
.column.is-three
.column.is-three
.column.is-three
.column.is-three
.column.is-three
.column.is-three

Nesting

.column
.column
.column
.column
.column.is-six
.column
.column
.column
.column
.column.is-six

nude is licensed under MIT.