this is an example page that uses the myspectre.css framework
Open Github ProjectBuilt-in responsiveness
Mobile first fluid grid
Fits any screen sizes
PC Tablet and Mobile
Standard CSS only
Easy to learn
No need for jQuery
No JavaScript library
Paper like design
Bold colors and shadows
Equal across platforms
Equal across devices
Mostriamo ora un esmepio di citazione, in genere si usa il blockquote.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Source
Sono diversi rispetto a quelli proposti da spectre.css, si usa la classe sul tag ancora.
Ma trovi differenze tra button e ancora? Se hanno la classe .btn devono essere indistinguibili .
Perche specificare sempre la classe? Su button non esiste la pseudoclasse :hover e per tanto molti effetti grafici non sarebbero possibili!
I form sono gli stessi di spectre.css; per tanto li mostriamo di seguito e testiamo le regole (quelli del sito)
In questa sezione facciamo vedere la tabella classica, ci si aspetta la tabella di spectre.css
| name | duration | genre | release date |
|---|---|---|---|
| The Shawshank Redemption | 2h 22min | Crime, Drama | 14 October 1994 USA |
| The Godfather | 2h 55min | Crime, Drama | 24 March 1972 USA |
| Schindler's List | 3h 15min | Biography, Drama, History | 4 February 1994 USA |
| Se7en | 2h 7min | Crime, Drama, Mystery | 24 March 1972 USA |
In questo esempio di vede come agisce il tooltip, in genere attivato sui bottoni
In qeusta sezione vediamo come si vedono i badge.
Sono molto utili, spesso si usano per le notifiche di app
In questa sezione vediamo come vengono mostrati i toast
Sono dei container molto flessibili
Chips are complex entities in small blocks.
Yan Zhu
Il concetto di navigation in uso dal framework è basato sui componenti breadcrumb e tab.
Powered by Sergio Guastaferro with myspectre.css .
Remeber to check out our spectre.css reference