Share
Kouto Swiss este o fantastică bibliotecă mixin pentru preprocesorul CSS Stylus, creat de dezvoltatorii Pierre-Antoine Delnatte și Thierry Lagasse de la KRKN. Obiectivul său este de a fi setul standard de instrumente pe care îl fac dezvoltatorii Stylus și, după ce am privit bine prin multitudinea de funcționalități, pot spune că ar fi cu siguranță demn de acest rol.
Dacă nu sunteți familiarizați cu Stylus sau preprocesoarele CSS, puteți obține un intro prin articolul meu De ce am ales Stylus (și tu ar trebui prea).
Si in timp ce esti la asta, vizioneaza primele doua videoclipuri ale noului meu curs. Devii un Superhero CSS cu Stylus. Ambele sunt libere și vă vor îndruma cu privire la ceea ce este stilul Stylus și cum vă puteți ajuta să lucrați cu el cu ușurință.
Pentru a instala programul Kouto Swiss recomand să instalați Node.js mai întâi, apoi să rulați comanda npm instalare kouto-swiss printr-un terminal sau un prompt de comandă în dosarul proiectului. Am descoperit că aceasta este cea mai ușoară cale de a asigura că sunt îndeplinite dependențele.
Apoi, adăugați această linie în partea superioară a fișierului Stylus și sunteți gata să mergeți:
@import 'node_modules / kouto-swiss'
"Kouto Swiss" înseamnă "cuțitul armatei elvețiene" și, în spiritul celebrului emblem mic de utilitate concentrată, această bibliotecă mixin a umplut o mulțime de lucruri utile într-un pachet mic.
Există prea multe caracteristici în Kouto Swiss pentru a le acoperi pe toate aici, deci astăzi vom începe prin a privi o selecție de șase dintre funcțiile sale în acțiune.
Includerea Normalize.css în proiectele dvs. este, aș sugera, o necesitate.
Când utilizați un preprocesor CSS care înseamnă în mod obișnuit găsirea unei versiuni de Normalize.css întreținută în mod activ, care a fost rescrisă în limba dorită, descărcându-l în proiect, importându-l, ținând cont de actualizări, apoi reimportându-l când este necesar.
Atunci când utilizați Kouto-Swiss, pe de altă parte, nu trebuie să vă faceți griji cu privire la acești pași. Doar adăugați o singură linie în fișierul Stylus:
normaliza()
Codul complet al Normalize.css va fi scris direct în foaia dvs. de stil:
Cu această abordare trebuie doar să țineți la îndemână Kouto-Swiss și Normalize.css va fi grijă de ea împreună. Nu aveți alte fișiere, pachete sau importuri care să vă îngrijoreze; întregul proces este tratat prin acea singură linie de cod.
Dacă nu doriți să utilizați Normalize.css și probabil preferați resetarea CSS a lui Eric Meyer, există un "liner" pe care îl puteți folosi și pentru acest lucru: meyer-reset ()
Cu excepția cazului în care vă lipiți de proprietăți CSS mai vechi, va trebui să utilizați prefixe specifice și furnizori în mai multe rânduri pentru a afișa codul compatibil cu browserul încrucișat. Cu toate acestea, menținerea prefixelor furnizorilor și a rezervelor de rezervă poate fi dificilă, deoarece cerințele privind locul unde ar trebui utilizate sunt mereu în schimbare.
Kouto-elvețian abil se ocupă de această problemă prin comunicarea cu site-ul Can I Use pentru a păstra toate prefixele furnizorilor dvs. și backbacks la curent pentru tine. Puteți să vă adăugați propriile setări pentru browserele și versiunile pe care doriți să le acceptați sau pur și simplu să mergeți cu setările prestabilite din recomandările "Pot să folosesc".
Nu există pași speciali pentru a vă face automat codul compatibil cu browserul încrucișat. Doar scrieți-vă codul Stylus ca și cum toate proprietățile sale ar fi fost deja acceptate universal:
CSS rezultatul va avea prefixele corecte ale furnizorilor și codul de rezervă în loc:
Consultați lista completă a proprietăților CSS susținute de funcția de prefixare a furnizorilor și de funcționalitatea de rezervă.
Abilitatea relativ nouă de a genera forme cu CSS3 a fost foarte utilă pentru adăugarea icoanelor și a ilustrațiilor de bază către site-uri într-un mod care se încarcă rapid, este ușor de colorat și poate fi redimensionat numai prin modificări de cod.
Triunghiurile CSS3 sunt una dintre formele care pot fi create, dar încercarea de a scrie codul pentru a le transmite cu dimensiunea, culoarea și unghiul dorit poate fi dificil.
Kouto-Swiss include un incredibil de ușor de utilizat triunghi() mixin care ia toate încercările și erorile din generația de triunghiuri, deoarece îi spui pur și simplu direcția pe care doriți să o indicați triunghiul, cât de mare ar trebui să fie și ce culori în fundal și (opțional) ar trebui să fie.
De exemplu, renunță la câteva triunghi() mixins cu unele variabile predefinite de culoare cum ar fi:
Apoi, crearea de triunghi CSS devine o plimbare în parc:
Este întotdeauna o bună practică să includeți o font stiva împotriva fiecărei declarații de tip font-familie în foaia dvs. de stil, așa că dacă lipsește fontul preferat, din orice motiv, aveți anumite alternative. Acestea fiind spuse, imaginind care fonturi sunt suficient de asemănătoare unul cu altul pentru a forma un bun stiva poate fi un pic cam laborios și dificil.
Kouto-Swiss include a font-stack () mixin care primește informații despre stackul fontului de la cssfontstack.com, de Denis Leblanc, și vă permite să scoateți cu ușurință stive de fonturi bazate pe familii de fonturi populare.
De exemplu, următorul cod Stylus:
generează aceste stive de fonturi complete:
Uitați-vă la lista completă a fonturilor acoperite de acest mixin.
Kouto Swiss are funcții pentru a crea cinci tipuri diferite de scheme de culori:
Alimentați funcția de generare a schemei de culoare a sămânță și stocați informațiile returnate împotriva unei variabile Stylus. Între două până la patru culori vor fi returnate, pe care apoi le puteți expedia în felul următor:
În codul de mai sus am folosit o culoare albastră # 3083bf și a trecut-o prin fiecare dintre cele cinci funcții de generare a schemei de culori, care a generat apoi aceste scheme de culori:
Dacă culoarea semințelor este apoi modificată, se poate genera un set complet de scheme de culori din același set de cod. De exemplu, trecerea la # 30bfb3 iti da:
Puteți citi exact despre ceea ce face fiecare dintre funcțiile de generare a schemelor de culoare în documentație.
Animația CSS, asemănătoare cu formele CSS, este unul dintre cele mai utile instrumente noi în arsenalul nostru de design web. Elementele care anterior ar fi avut nevoie de Flash sau JavaScript pot fi acum aduse la viață doar cu CSS pur.
În momentul de față, însă, codul de animație CSS încrucișat în browser are nevoie de a mult din prefixele furnizorilor. Prin utilizarea lui Kouto Swiss @keyframe funcționalitate combinată cu prefixul vânzătorului pe care l-am descris mai sus, devine destul de drept să codificăm animațiile. De exemplu, aceste 29 de linii de Stylus:
ieșiți la 232 de linii CSS necesare, ceea ce cred că veți fi de acord că ar fi un coșmar pentru a scrie manual:
Animația rezultată arată astfel:
Din nou, verificați documentele pentru a citi mai multe despre @keyframe animație în Kouto Swiss.
Kouto Swiss este un plus excelent în lumea dezvoltării CSS și recomand să-l scoatem pentru un test drive.
Are o lungă listă de caracteristici suplimentare pe care nu le-am atins nici măcar așa încât să ne îndreptăm spre http://kouto-swiss.io pentru a obține întreaga rundown.
Și amintiți-vă că, dacă aveți nevoie de un pic de ajutor pentru a vă distrage dezvoltarea Stylus, vizionați cele două videoclipuri gratuite din cursul meu pentru a afla cum să începeți: Deveniți un super-erou CSS cu Stylus.
Accentsconagua