Framework senza classi HTML5/CSS3

Question

Qualcuno sa di un semplice framework HTML5/CSS3 che applica un minimo di formattazione senza necessità di nomi di classi personalizzati? Idealmente, occorrerebbe solo HTML5 correttamente impostato e posizionerebbe gli elementi con un minimo di flessibilità, utilizzando regole comuni per, ad esempio, le larghezze della barra laterale e simili.

con HTML5 c'è molto meno bisogno di nomi di classi personalizzate, con elementi come header, nav o aside, ma non ho ancora visto un inquadramento sfruttare appieno questo. Qualche idea?

Chiarimento: Ho passato tutti i soliti sospetti (Bootstrap, HTML% Boilerplate, Shim e simili), e nessuno di loro mi graffia il prurito. E quel prurito è una semplice combo di semplice struttura HTML5 che non assume nulla del design ma definisce tutto semanticamente, con un semplice foglio di stile CSS3 che definisce il layout reale. Posso immaginarlo usando diversi fogli di stile, con uno di base che definisce il layout degli elementi e separa uno (i) per il design attuale. Sarebbe usato come un semplice punto di partenza per vari progetti, che potrebbero essere successivamente personalizzati individualmente.

A quanto pare, potrei aver bisogno di andare nella direzione proposta da Wesley e scrivere uno io ...

Answer 1

Sembra che ciò che si vuole non è un framework CSS, ma solo un semplice foglio di stile personalizzato.

Non scoraggiare i tuoi sforzi nella ricerca di qualcosa che esiste già, ma è meglio scrivere da solo. Forse iniziare con uno dei tanti esistenti reset.css. Gli stili predefiniti senza la possibilità di eseguire il hook-in (o out) tramite i nomi delle classi non sono molto flessibili.

Non dovresti davvero evitare le lezioni, dovresti approfittarne. Nessun framework saprà dove e come i tuoi elementi HTML sono nidificati o come dovrebbero essere basati sul solo nome del tag, questo è uno dei motivi per cui di solito usiamo le classi.

Se presti molta attenzione alla semantica dei nuovi elementi HTML5, vedrai che header non significa sempre "la parte superiore della pagina con il tuo logo", footer non è solo un elemento per la parte inferiore di l'intera pagina e aside non equivale sempre a "barra laterale".

Answer 2

Potete iniziare la vostra applicazione HTML5 con l'HTML5 Boilerplate.

Dan Wahlin postato un buon post sul blog su come ottenere da esso istituito:

http://weblogs.asp.net/dwahlin/archive/2011/06/05/getting-started-using-html5-boilerplate.aspx

Answer 3

Non ho molta esperienza con me stesso, ma è possibile trovare utile Twitter Bootstrap. Usa un sistema a griglia che ti permette di posizionare facilmente gli elementi sulla pagina. Questo può essere particolarmente utile per creare aree per le barre laterali e altre funzionalità comuni nelle pagine.

Tuttavia, è un po 'l'opposto di quello che stai suggerendo in quanto utilizza le classi piuttosto pesantemente. Da quello che ho visto, però, le classi sono trattate in maniera molto strutturata, quindi potrebbero essere vicine a ciò che state cercando.

Answer 4

https://github.com/herrshuster/style.css

questo è il mio progetto attuale. Non è ancora pronto per l'implementazione, ma è esattamente quello che stai cercando. Mi piacerebbe avere qualche suggerimento o se volessi parlarne. This is a test page where you can see the semantic layout

Answer 5

Per chiunque sia interessato a questo argomento, vi consiglio di leggere il articles by Heydon Pickering, che ha costruito his blog tema senza l'utilizzo di tutte le classi.

---

Consiglio anche il check-out my project che mira a creare un fundamental classless HTML template per blog e siti web di blog-simile (ogni sito web con un titolo e un autore, con pagine, post e sezioni) e aggiungere temi CSS puro sulla parte superiore di esso. Il modello fa un uso intenso del sezionamento HTML5, intestazioni e piè di pagina e ipotesi minuscole di in quale sezione si dovrebbe mettere ogni contenuto del sito web. Le themes sono porte di altri temi specifici del framework su Internet.

C'è uno playground in cui è possibile testare i temi su varie pagine HTML in base al modello fondamentale (basta scrivere il nome del tema sulla scatola o incollare un URL CSS). C'è anche uno bad old article che ho scritto mentre cercavo di pensare all'argomento.

Answer 6

ho trovato un bisogno molto simile e ha finito per fare il mio progetto: https://github.com/oxalorg/sakura

Hai solo bisogno di cadere in sakura.css e si sta bene ad andare, nessuna modifica necessaria in HTML.

Ecco un demo: https://oxal.org/projects/sakura/demo/