Share
Kouto Swiss è una fantastica nuova libreria di mix per il preprocessore CSS Stylus, creata dagli sviluppatori Pierre-Antoine Delnatte e Thierry Lagasse di KRKN. Vuole essere il toolkit standard a cui gli sviluppatori Stylus si rivolgono e, dopo aver dato un'occhiata attraverso la sua gamma di funzionalità, posso dire che sarebbe sicuramente degno di quel ruolo.
Se non hai familiarità con Stylus, o con i preprocessori CSS, puoi ottenere un'introduzione tramite il mio articolo Perché scelgo lo stilo (e dovresti farlo).
E mentre ci sei, guarda i primi due video del mio nuovo corso Diventa un supereroe CSS con Stylus. Sono entrambi gratuiti e ti guideranno attraverso ciò che è Stylus e come puoi ottenere il tuo setup per lavorarci facilmente.
Per installare Kouto Swiss, consiglio innanzitutto di installare Node.js, quindi di eseguire il comando npm installa kouto-swiss tramite un terminale o un prompt dei comandi all'interno della cartella del progetto. Ho trovato questo il modo più semplice per garantire che le dipendenze siano soddisfatte.
Quindi aggiungi questa linea nella parte superiore del tuo file Stylus e sei pronto per andare:
@import 'node_modules / kouto-swiss'
"Kouto Swiss" significa "Swiss Army Knife", e nello spirito di quel famoso piccolo emblema di utilità concentrata, questa libreria di mixin ha riempito un sacco di cose utili in un piccolo pacchetto.
Ci sono troppe funzioni in Kouto Swiss per noi per coprirle tutte qui, quindi oggi inizieremo guardando una selezione di sei delle sue funzioni in azione.
Includere Normalize.css nei tuoi progetti è, vorrei suggerire, una necessità.
Quando si utilizza un preprocessore CSS che in genere significa trovare una versione mantenuta attivamente di Normalize.css che è stata riscritta nella lingua scelta, scaricandola nel progetto, importandola, tenendo d'occhio gli aggiornamenti e quindi reimportandoli quando richiesto.
D'altro canto, quando usi Kouto-Swiss, non devi preoccuparti di nessuno di questi passaggi. Basta aggiungere una sola riga al tuo file Stylus:
normalizzare()
Il codice completo di Normalize.css verrà scritto direttamente nel tuo foglio di stile:
Con questo approccio devi solo tenere aggiornato il tuo Kouto-Swiss e Normalize.css si prenderà cura di esso. Nessun file, pacchetto o importazione aggiuntivi di cui preoccuparsi; l'intero processo è gestito tramite quella riga di codice.
Se in realtà non ti piace usare Normalize.css e forse preferisci il reset CSS di Eric Meyer, c'è un "one liner" che puoi usare anche per questo: Meyer-reset ()
A meno che non si rispettino le vecchie proprietà CSS, sarà necessario utilizzare prefissi e fallback specifici del fornitore in più occasioni per generare un codice compatibile con più browser. Tuttavia, mantenere i prefissi e i fallback dei fornitori può essere complicato in quanto i requisiti su dove dovrebbero essere utilizzati cambiano continuamente.
Kouto-Swiss gestisce abilmente questo problema comunicando con il sito web Can I Use per mantenere aggiornati tutti i prefissi e fallback dei fornitori. È possibile aggiungere le proprie impostazioni su quali browser e versioni si desidera supportare, o semplicemente andare con i valori predefiniti provenienti dai consigli "Posso usare".
Non ci sono passaggi speciali per fare in modo che il tuo codice sia automaticamente compatibile con i browser. Basta scrivere il codice Stylus come se tutte le sue proprietà fossero già supportate universalmente:
Il CSS risultante avrà i prefissi dei fornitori corretti e il codice di fallback in atto:
Controlla l'elenco completo delle proprietà CSS supportate dalla funzionalità di prefisso e fallback del fornitore.
La relativamente nuova capacità di generare forme con CSS3 è stata molto utile per aggiungere icone e illustrazioni di base ai siti in modo rapido, facile da colorare e scalabile tramite le sole modifiche del codice.
I triangoli CSS3 sono una delle forme che possono essere create, ma provare a scrivere il codice per stamparle con le dimensioni, il colore e l'angolazione che si desidera può essere complicato.
Kouto-Swiss include un incredibilmente facile da usare triangolo() mixin che prende tutte le prove e gli errori fuori dalla generazione del triangolo, come semplicemente dici in quale direzione vuoi puntare il triangolo, quanto dovrebbe essere grande, e quali saranno il suo primo piano e i colori di sfondo (facoltativi).
Ad esempio, rilascia alcuni triangolo() mixin con alcune variabili di colore predefinite come:
Quindi la creazione del triangolo CSS diventa una passeggiata nel parco:
È sempre buona norma includere a pila di caratteri contro ogni dichiarazione della famiglia di font nel tuo foglio di stile, quindi se il tuo font preferito manca, per qualsiasi motivo, hai alcune alternative in atto. Detto questo, capire quali caratteri siano sufficientemente simili tra loro per formare una buona pila può essere un po 'laborioso e difficile.
Kouto-Swiss include a font-pila () mixin che ottiene le informazioni sullo stack dei font da cssfontstack.com, di Denis Leblanc, e consente di stampare facilmente stack di font basati su famiglie di font popolari.
Ad esempio, il seguente codice Stylus:
genera questi stack di font completi:
Dai un'occhiata alla lista completa dei font coperti da questo mixin.
Kouto Swiss ha funzioni per creare cinque diversi tipi di combinazioni di colori:
Si alimenta la funzione generatrice della combinazione di colori a seme colora e memorizza le informazioni restituite rispetto a una variabile Stylus. Verrà restituito da due a quattro colori, che potrai quindi stampare nel seguente modo:
Nel codice sopra ho usato un colore blu di # 3083bf e lo ha passato attraverso ognuna delle cinque funzioni di generazione dello schema di colori, che ha poi generato questi schemi di colori:
Se il colore seme viene quindi modificato, è possibile generare un nuovo set di combinazioni di colori dallo stesso set di codice. Ad esempio, passando a # 30bfb3 ti dà:
Puoi leggere esattamente ciò che ciascuna delle funzioni di generazione della combinazione di colori fa nella documentazione.
L'animazione CSS, proprio come le forme CSS, è uno dei nuovi strumenti più utili nel nostro arsenale del web design. Elementi che in precedenza avrebbero avuto bisogno di Flash o JavaScript ora possono essere portati in vita con nient'altro che puro CSS.
Al momento però, il codice di animazione CSS cross-browser ha bisogno di a lotto dei prefissi dei venditori. Usando Kouto Swiss @keyframe funzionalità combinata con il prefisso del venditore sopra descritto diventa piuttosto semplice codificare le animazioni. Ad esempio, queste 29 linee di Stylus:
mostra le 232 linee CSS richieste, che penso che sarai d'accordo sarebbe un incubo da scrivere manualmente:
L'animazione risultante assomiglia a questa:
Ancora una volta, controlla i documenti per saperne di più @keyframe animazione in Kouto Swiss.
Kouto Swiss è un'eccellente aggiunta al mondo dello sviluppo di CSS e consiglio vivamente di portarlo a fare un giro di prova.
Ha una lunga lista di funzionalità extra che non abbiamo nemmeno sfiorato, quindi vai su http://kouto-swiss.io per ottenere il resoconto completo.
E ricorda, se hai bisogno di un piccolo aiuto per dare il via allo sviluppo di Stylus, guarda i due video gratuiti del mio corso per imparare come iniziare: Diventa un supereroe CSS con Stylus.
Accentsconagua