ZeptoCSS
This project is currently a work in progress!
Minimal CSS Framework for semantic HTML.
Zepto.css is a fork of the wonderful CSS Framework Pico.css.
Typography
Headings
Heading 3
Heading 4
Heading 5
Heading 6
Links
Blockquote
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
Misc
Abbr. abbr
Bold strong b
Italic i em cite
Deleted del
Inserted ins
Ctrl + S kbd
Highlighted mark
Strikethrough s
Small small
Text Sub sub
Text Sup sup
Underline u
Layouts
Cluster
See Typography/Links.
Grid
See Typography/Misc.
Reel
See CSS/Colors.
Scroller
See Layouts/Table.
Tables
| # | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 1 | Cell | Cell | Cell | Cell | Cell |
| 1 | Cell | Cell | Cell | Cell | Cell |
| # | Total | Total | Total | Total | Total |
Forms
Buttons
Inputs
Input states
Checkbox
Radio
Select
Switch
Misc
Components
Accordions
See Table of Contents on left side.
Dropdowns
Dropdown
Navs
Stacked vertically
Breadcrumb
Progress
Tooltips
CSS
Theme
Colors
Base
--white
--black
--color
--muted-color
--contrast
--primary
--secondary
Primary
--primary-50
--primary-100
--primary-200
--primary-300
--primary-400
--primary-500
--primary-600
--primary-700
--primary-800
--primary-900
Grey
--grey-50
--grey-100
--grey-200
--grey-300
--grey-400
--grey-500
--grey-600
--grey-700
--grey-800
--grey-900
Amber
--amber-50
--amber-100
--amber-200
--amber-300
--amber-400
--amber-500
--amber-600
--amber-700
--amber-800
--amber-900
Green
--green-50
--green-100
--green-200
--green-300
--green-400
--green-500
--green-600
--green-700
--green-800
--green-900
Red
--red-50
--red-100
--red-200
--red-300
--red-400
--red-500
--red-600
--red-700
--red-800
--red-900