enuff.css

enuff.css

Basic CSS typography and components

Showing desktop styles Showing mobile styles

Typography

.text-e, text-w, .text-y, .text-i, .text-n, a.fit, .icon
Text Italic Bold Code Kbd Sub Mark Sub Abbr No link Link Visited Link Error Warning Success Info Lite Link icon Icon

Blocks

.bg-e, bg-w, .bg-y, .bg-i, .bg-n,
.fit, .bg, .pad, .bord, .shade, .mar,
.wrap, .l, .r, .c, .center,
.hide, .hide-print, .hide-mobile, .hide-desktop

Paragraph

Pre
Pre code
Blockquote

Blockquote paragraph

Picture
Caption

Error

Warning

Success

Info

Lite

Table

.roll table.let.bord.fit.pad
Table caption
ColumnHeaderValue
1z0
2yy10
3xxx100
4overflowwwwwwwwwwwwwwwwwwwwwwwwwwww!1000
Total31110

Lists

ul.fit, ol, dl
  1. Alpha
    1. One
    2. Two
  2. Beta
  3. Gamma
Term
Def
Term 2
Def 1
Def 2

Grid

.row.flip.let.mar.fit > :is(*, .col-0, .col-2, .col-3)
0
1
2
3
Flip A
Flip B
Flip C
Flip D
Wrap 00000000000000
Wrap 11111111111111
Wrap 22222222222222
Wrap 33333333333333

Forms

button, [type="submit"], .btn

form > input ~ button

ok wrong Link

Link 

form > p > label + br + input


form > div.row.flip > label + div > input
Fieldset

Components

ul.nav.row.flip.let.fit

Target

a[href="#id"]; .target[id]
a[href="#id"].hide-desktop; .target-mobile[id]
a[href="#id"].hide-mobile; .target-desktop[id]
Show target
Target
≡
Show on desktop, toggle on mobile
.pop > * ~ div
.pop > a[href="#id"] ~ div[id]
Open
popup ↓
Popup
block. 
a[href="#id"]; .dlg[id]
Open modal dialog
✕

Modal dialog

Link

↑ Top