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
- 🪶 Lightweight ~2kb (minified + gzipped)
- 🚀 Easy to install and launch
- 🚂 No dependencies
- 🌐 Supports all modern browsers
- 📐 Classic 12-column grid
- 🧱 Design tokens based
- 🔩 Customize with CSS custom properties
- 🌙 Dark them included
- 💬 Dialog and dropdown out-of-box
- 🟩 Valid semantics
- 👨👩👦👦 Accessible
- 🖨️ Sustainable printing
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/puffLayout
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.
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.
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
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
Background colors
Border colors
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
Buttons
Carets
Caret is a small triangle-arrow, which is very useful for dropdowns. Also, they can be added to the links.
Cards
Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum.
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
Dropdown menu
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.
- First Item
- Second Item
- Sub Item 1
- Sub Item 2
- Third Item
Navbar
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. | |||