The LEAST you need to know about Spectre.css

Preview on GitHub Pages:

https://tomcam.github.io/spectre-book/

This is a book in progress on how to use the remarkable Spectre.css Framework. Spectre.css has a perfectly balanced blend of features. Spectre is

• Small (about 10-20KB gzipped)
• Fast
• Compatible with a wide range of older browsers, dating back at least to Android 4.4 (officially supports last 4 versions of all major browsers but goes back further than that
• Feature-rich, with a huge set of components
• Well-supported
• Stable and nearly bug-free

Free Spectre.css example templates

While this book is in progress, check out the Examples section for usable code from the book.

What makes this book different

This book emphasizes the use of complete HTML files with extensive comments, instead of providing fragments without context. Whenever possible, each concept discussed contains at least one downloadable HTML file you can run as is.

Spectre.css tutorial: Your first Spectre.css project Adding a plain navbar . Multiple columns and the grid model .

Components Cards . Timelines .

Dictionary Colors . Icons .

Reference

Spectre.css source spectre.css . spectre-exp.css (experimentals) . dist directory . spectre.scss . GitHub Issues .

Official docs Elements . Layout . Navbar . Components . Tabs . Utilities . Colors, both semantic and named background colors . Horizontal and vertical dividers . Positioning for layout, float, margins . Shaped divs . Text .

Notes to self

• Validate code before uploading
• My early examples
• eBooks seem to prefer about a 60-character line length:

60-character ruler for code

012345678901234567890123456789012345678901234567890123456789
1        10        20        30        40         50      60