Sono stanco del noioso, semplice HTML e del CSS sempre lungo? Incontra Skeleton, la perfetta, leggera, aggiunta CSS al resto del codice boilerplate che già includi come punto di partenza di ogni progetto.
Il codice boilerplate è qualsiasi codice ripetitivo che si ripresenta ancora e ancora per ottenere qualche risultato che sembra dovrebbe essere molto più semplice. E semplice, lo stile di base dell’HTML dovrebbe essere molto più semplice.
La maggior parte delle librerie o framework di stile front-end operano impostando stili su classi che richiedono all’utente di ricordare i nomi delle classi per aggiungere stile agli elementi HTML. Skeleton funziona applicando la maggior parte dello stile direttamente ai tag HTML. Tabelle, moduli, elenchi, pulsanti, lo nomini e lo stilizzi.
Iniziare
Skeleton ti raccomanda di andare sul loro sito web e scaricare il file CSS convenientemente annotato, non minato e pronto a partire, così puoi dare un’occhiata tu stesso sotto il cappuccio. Skeleton ammonta a meno di 400 linee di codice! C’è anche un comodo link CDN per una configurazione ancora più veloce quando la personalizzazione non è critica per il tuo progetto. Comunque tu scelga di includerlo, una volta che hai il foglio di stile collegato all’inizio del tuo documento, sei pronto a partire!
La griglia a 12 colonne
Il successo di Skeleton sta nel prendere gli attributi che altri framework CSS forniscono e renderli semplici come la morte. Usando il sistema a griglia, il layout del browser rimane fluido e si adatta automaticamente alle dimensioni della finestra. Per utilizzare le colonne, usa un numero e una classe di ‘column’ o ‘columns’, o un metodo abbreviato di ‘one-third,’ ‘one-half,’ etc.
Skeleton imposta la max-width a 960px, che si adatta automaticamente a schermi grandi, piccoli e medi. Se vuoi, puoi cambiare la max-width con una linea di CSS, e tutte le colonne si ridimensioneranno di conseguenza!
Typography
Type in Skeleton è impostato su rems per essere dimensionato in modo reattivo sulla base di una singola proprietà <html> font-size. Il font di base è Raleway, impostato a 15rem su una line-height di 1.6 (15px e 24px rispettivamente).
I titoli hanno il loro dimensionamento distinto con interlinea, line-height e margini specifici.
I pulsanti hanno due opzioni. Lo stile standard dei pulsanti esiste intrinsecamente per il tag <button> (e qualsiasi altro elemento appropriato del modulo), mentre la seconda opzione, più vivace, può essere applicata con una classe ‘.button-primary’.
Quando dovrei usare Skeleton?
Skeleton è una libreria CSS leggera, reattiva e altamente personalizzabile costruita pensando ai cellulari. Non è necessaria alcuna compilazione o installazione, e funziona bene con fogli di stile CSS aggiuntivi e Framework front-end. Usa lo scheletro per un CSS veloce e funzionante, ottimo per demo o MVP. E poiché è meno di 12kb per la versione minificata, è anche perfetto per quando la velocità conta di più. Ricorda, Skeleton è, nel suo nucleo, uno scheletro di componenti puri e stile. Con un solo link puoi trasformare il noioso HTML in una pagina completamente stilizzata senza dover sacrificare la velocità o memorizzare una libreria di nomi di classi.
