Share
Kouto Swiss är ett fantastiskt nytt mixin-bibliotek för CSS preprocessor Stylus, skapad av utvecklare Pierre-Antoine Delnatte och Thierry Lagasse från KRKN. Det syftar till att vara det standardverktyg som Stylus-utvecklare vänder sig till och efter att ha tagit en bra titt genom sin mängd funktionalitet kan jag säga att det verkligen skulle vara värt den rollen.
Om du inte är bekant med Stylus eller CSS preprocessorer kan du få en intro via min artikel Varför väljer jag Stylus (och du borde också).
Och medan du är på det, titta på de första två videon av min nya kurs Bli en CSS Superhero med Stylus. De är båda fria och kommer att gå igenom vilken Stylus som är och hur du kan få dig själv att installera för att arbeta med det enkelt.
För att installera Kouto Swiss rekommenderar jag att du installerar Node.js först och kör sedan kommandot npm installera kouto-swiss via en terminal eller kommandotolk i din projektmapp. Jag har funnit det här för att vara det enklaste sättet att säkerställa att beroenden är uppfyllda.
Lägg sedan till den här raden högst upp i din Stylus-fil och du är redo att gå:
@import 'node_modules / kouto-swiss'
"Kouto Swiss" betyder "Swiss Army Knife", och i andan av det kända lilla emblemet med koncentrerad användbarhet har detta mixin-bibliotek packat en hel del användbara saker i ett litet paket.
Det finns alltför många funktioner i Kouto Swiss för att vi ska täcka dem alla här, så idag ska vi börja med att titta på ett urval av sex av dess funktioner i aktion.
Inklusive Normalize.css i dina projekt är, skulle jag föreslå en nödvändighet.
När du använder en CSS preprocessor som vanligtvis innebär att hitta en aktivt underhållen version av Normalize.css som har skrivits om till ditt eget språk, laddar du det in i ditt projekt, importerar det, håller koll på uppdateringar och sedan importerar det igen när det behövs.
När du använder Kouto-schweizare å andra sidan behöver du inte oroa dig för något av dessa steg. Lägg bara till en enda rad i din Stylus-fil:
normalisera()
Den fullständiga koden för Normalize.css kommer att skrivas direkt in i ditt stilark:
Med detta tillvägagångssätt behöver du bara hålla din Kouto-schweizare uppdaterad och Normalize.css kommer att tas hand om rätt tillsammans med den. Inga extra filer, paket eller import att oroa dig för; hela processen hanteras via den ena koden.
Om du inte gillar att använda Normalize.css och kanske föredrar Eric Meysers CSS-återställning, finns det en "en liner" som du kan använda för det också: meyer-återställning ()
Om du inte håller fast vid äldre CSS-egenskaper måste du använda leverantörsspecifika prefix och fallbacks vid flera tillfällen för att kunna skriva ut korsläsarekompatibel kod. Att behålla dina leverantörs prefix och fallbacks kan dock vara svårt eftersom krav på var de ska användas ändras alltid.
Kouto-Swiss hanterar detta problem genom att kommunicera med webbplatsen Kan jag använda webbplatsen för att hålla alla dina leverantörs prefix och fallbacks uppdaterade för dig. Du kan lägga till egna inställningar för vilka webbläsare och versioner du vill stödja, eller bara gå med standardinställningarna som kommer från rekommendationerna "Kan jag använda".
Det finns inga speciella steg för att få din kod automatiskt gjort kompatibel med webbläsaren. Skriv bara din Stylus-kod som om alla dess egenskaper redan stöddes universellt:
Den resulterande CSS kommer att ha rätt leverantörs prefix och återgångskod på plats:
Kolla in hela listan över CSS-egenskaper som stöds av leverantörens prefix och fallback-funktionalitet.
Den relativt nya förmågan att generera former med CSS3 har varit super användbar för att lägga till ikoner och grundläggande illustrationer på webbplatser på ett sätt som laddar snabbt, är lätt att färga och kan skalas via kodändringar ensam.
CSS3-trianglarna är en av de former som kan skapas, men försöker skriva koden för att mata ut dem med den storlek, färg och vinkel du vill kan vara knepigt.
Kouto-Swiss innehåller en otroligt enkel att använda triangel() mixin som tar alla försök och fel ut ur triangeln generationen, eftersom du bara berätta vilken riktning du vill att triangeln ska peka, hur stor det borde vara och vad dess förgrund och (valfria) bakgrundsfärger ska vara.
Till exempel, släpp några triangel() mixins med några fördefinierade färgvariabler som så:
Därefter blir din CSS-triangelskap en promenad i parken:
Det är alltid bra att inkludera en typsnittstapel mot varje typsnittfamiljdeklaration i ditt stylesheet så om du föredrar typsnittet saknar, av vilken anledning som helst, du har några alternativ på plats. Med detta sagt, utse vilka teckensnitt som är tillräckligt liknade för att bilda en bra stapel kan det vara lite mödosamt och svårt.
Kouto-schweizisk inkluderar a font-stapeln () mixin som får sin fontstackinformation från cssfontstack.com, av Denis Leblanc, och låter dig enkelt skriva ut teckensnittsstackar baserat på populära typsnittsfamiljer.
Till exempel följande Stylus-kod:
genererar dessa kompletta typsnittstaplar:
Ta en titt på hela listan över typsnitt som omfattas av denna mixin.
Kouto Swiss har funktioner för att skapa fem olika typer av färgscheman:
Du matar upp färgfunktionen som genererar funktion a utsäde färg och lagra informationen som returneras mot en Stylus-variabel. Mellan två till fyra färger kommer att returneras, som du sedan kan mata ut på följande sätt:
I koden ovan har jag använt en blå färg på # 3083bf och passerade den genom var och en av de fem färgschemat generationsfunktionerna, som sedan genererat dessa färgscheman:
Om fröfärgen ändras kan en helt ny uppsättning färgscheman genereras från samma uppsättning kod. Till exempel byta till # 30bfb3 ger dig:
Du kan läsa om exakt vad varje färgfunktionsgenerering fungerar i dokumentationen.
CSS-animering, som CSS-former, är ett av de mest användbara nya verktygen i vårt webbdesignarsenal. Element som tidigare behövde Flash eller JavaScript kan nu tas till liv med ingenting annat än rent CSS.
För närvarande behöver cross-browser CSS-animeringskoden en massa av leverantörs prefix. Genom att använda Kouto Swiss @keyframe funktionalitet i kombination med leverantörs prefix som vi beskrivit ovan blir det ganska rakt fram för att koda upp dina animeringar. Till exempel, dessa 29 linjer av Stylus:
mata ut de nödvändiga 232 linjerna av CSS, som jag tror du håller med skulle vara en mardröm att skriva manuellt:
Den resulterande animationen ser så här ut:
Återigen, kolla in dokumenten för att läsa mer om @keyframe animering i Kouto Swiss.
Kouto Swiss är ett utmärkt tillskott till CSS-utvecklingsvärlden och jag rekommenderar starkt att ta det ut för en provkörning.
Den har en lång lista över extrafunktioner som vi inte ens har rört på så gå vidare till http://kouto-swiss.io för att få den fulla rundan.
Och kom ihåg, om du behöver lite hjälp med att sparka din Stylus-utveckling, kolla de två gratis videon från min kurs för att lära dig hur du kommer igång: Bli en CSS-superhjälte med Stylus.
Accentsconagua