About

puff is a micro full-featured CSS framework for quick UI prototyping. puff is based on design tokens. Combining just several tokens gives an almost limitless number of UI combinations.

Features

Install

Installation is straightforward; just include the CSS file into your HTML page in any possible way.

<link rel="stylesheet" href="puff.min.css">

or install it from NPM.

npm install @dknight/puff

Layout

Wrapper

The wrapper centers the content and adds padding to the sides. Usually, a page has one main wrapper that wraps everything, but you are not limited to using multiple wrappers.

Wrapper example

Grid

Classic 12-column layout based on Flexbox. Each grid has a size of 1/12 of the width of the container. If no size is specified, then the grid takes all remaining space. On small screens, grids collapse into column layout.

1 column
11 column
2 column
10 column
3 column
9 column
4 column
8 column
5 column
7 column
6 column
6 column
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, molestiae! Natus ipsum id sit dicta, rem expedita deserunt voluptates. Amet voluptas officia atque laborum nam architecto distinctio magnam! Maiores, cum?

Breakpoints

There is only one breakpoint, which equals the default>.

@media screen and (max-width: 36rem) {
  ...
}

Tokens

Tokens are very small parts of the design. Combining tokens helps achieve a huge amount of design variation.

Spacing tokens

These make it possible to make margins and paddings. There are 4 stops for using the margin. By default, each step has a size 0.5rem.

Examples

mt2 mb2 (margin-top: 2 * 0.5rem; margin-bottom: 2 * 0.5rem)
pv2 ph4 (vertical padding: 2 * 0.5rem; horizontal padding: 4 * 0.5rem)
m4 p1 (margin: 4 * 0.5rem; padding: 1 * 0.5rem)
p0 - resets padding to 0; m0 - resets margins to 0.

List of spacing tokens

Type Classes
Top margins mt1, mt2, mt3, mt4
Bottom margins mb1, mb2, mb3, mb4
All margins m0, m1, m2, m3, m4
Vertical padding pv1, pv2, pv3, pv4
Horizontal padding ph1, ph2, ph3, ph4
All padding p0, p1, p2, p3, p4
Gaps g0, g1, g2, g3, g4

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text

Common paragraph with text. The default font family is sans-serif and can be overridden with --ff CSS custom property. Examples of bold text, italics and underline text. You can mark important things.

Dimmed text used for less imporant information or disclaimers.

Text size

The size of the text is 16px which is the standard for all modern browsers. The line height is a bit higher and equals 1.6. There are some text size tokens: xs, s, l, xl, xxl (plus one more xxxl which is very huge and useful only for the hero component).

Extra-small

Small

Normal

Large

Extra-large

Super extra-large

* Triple X for .xxxl hero component only.

Text alignment

ts - text align start (left)

te - text align end (right)

tc - text align center

Text wrap/nowrap

All words are on line line, useful for headers, brand.

Colors

Text colors

text dimmed text primary secondary tertiary error success invert

Background colors

bg-text
bg-primary
bg-secondary
bg-tertiary
bg-error
bg-success
bg-invert

Border colors

b-primary
b-secondary
b-tertiary
b-error
b-text
invert

Layout

Layout tokens are used for various uncategorized purposes. Sometimes in the CSS world, they might be called modifiers.

Token CSS equivalent
round Adds round corners to the element.
border Adds a border to the element.
w100 width: 100%
vh100 height: 100vh;
reset Resets the element's styles so it looks like a standard unstyled HTML element.
d-block display: block
d-inline display: inline
d-inline-block display: inline-block
d-flex display: flex
d-inline-flex display: inline-flex
f-col flex-direction: column
f-wrap flex-wrap: wrap
f-row flex-direction: row
justify-start justify-content: start
justify-end justify-content: end
justify-center justify-content: center
justify-around justify-content: space-around
justify-between justify-content: space-between
justify-evenly justify-content: space-evenly
align-start align-items: start
align-end align-items: end
align-center align-items: center
hide-small Hide content on the small screen after the breakpoint.

Components

Alerts

The combination of design tokens helps create alert elements.

Thanks for updating your data.

This is the final call to update your data.

Warning! This can be use as warning, but have accessility issues.
At this version isn't recommended to use.

Due to technical reasons, your data cannot be updated.

Please try again later.

Operation successful, you are save to quit.

Badges

Great! Something Hello OK 5

Buttons

Carets

Caret is a small triangle-arrow, which is very useful for dropdowns. Also, they can be added to the links.

Pandora box

Cards

Just random image

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum.

ust random image

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum.

Details

Click to expand

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium expedita quas corrupti tempora veritatis magnam distinctio nam cupiditate totam laudantium.

Dialog

Dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis ab dolorum rerum warn vero laboriosam modi quos quia eaque molestiae. Eaque facilis, voluptas magnam possimus beatae reiciendis sunt doloribus nostrum?

This is an extremely simple dropdown menu. There is also a script on how to open the menu.

Forms

Lists

Lists are very close to the default browser styles.

Ruler

Ruler is just a <hr> tag. It is helpful to separate sections.

Tables

To make tables responsive with horizontal scroll, wrap a table into a div.table container.

Name Region Country Currency
September Holloway Flevoland Germany $60.69
Christen Alvarado North Region Lithuania $72.39
Josiah Mercer Andaman and Nicobar Islands Colombia $52.71
Shaeleigh Bruce Piura Singapore $68.08
Basil Munoz Limón Philippines $56.77
Total $310.64

Hero Component

Centered full width and height component

Customize

There are only several global, customizable custom properties.

Custom properties

Property Value Description
--maxw 60rem Maximum width of the wrapper.
--ff ui-sans-serif, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif Font family with font stack fallbacks.
--fs 18px/1.6 Font size and line height.
--fw 400 Font weight value.
--bw 0.0625rem Border width
--brd var(--bw) solid var(--c-line) Border
--br 0.25rem Border radius for rounded elements.
--s 0.5rem The spacing step is used for padding, margins, and gaps.
--ls 0 Letter spacing.
--img-filter (empty) Filter for images used for dark themeing or images effers.
--grad linear-gradient(45deg, var(--c-pri), var(--c-sec)) Gradient with 45 degree angle, used for decorations and common styling.

Colors properties

Property Light Dark Description / preview
--c-pri #8a00d4 #b86ce4 Primary color
--c-sec #c224a8 #db7ac5 Secondary color
--c-tri #f7b23b #f9c46b Tertiary color. Used only for minor elemets.
--c-err #f33 #ff8672 Error color
--c-suc #007800 #6ba55d Success color
--c-txt #202124 #e8eaed Color for text
--c-dim #4d5156 #bdc1c6 Color for dimmed text
--c-bg #fff #202124 Inverted text color (background) *
--c-line #d3d3d3 #413e46 Color for outline. Used for borders and outlines. *
--c-surf #f3f3f3 #151417 Color for surface. Used for dimmed backgrounds. *
* Inverted background because text has similar or the same color as background.