Share
Kouto Swiss er et fantastisk nytt mixin-bibliotek for CSS preprocessor Stylus, laget av utviklere Pierre-Antoine Delnatte og Thierry Lagasse fra KRKN. Det tar sikte på å være standard verktøykasse som Stylus utviklere vender seg til, og etter å ha tatt en god titt gjennom sin rekke funksjonalitet kan jeg si at det sikkert ville være verdt den rollen.
Hvis du ikke er kjent med Stylus eller CSS preprocessors, kan du få en intro via artikkelen min Hvorfor jeg velger Stylus (og du bør også).
Og mens du er på det, se de to første videoene av mitt nye kurs Bli en CSS Superhero med Stylus. De er begge gratis, og vil gå deg gjennom hva Stylus er og hvordan du kan få deg til å sette opp for å jobbe med det enkelt.
For å installere Kouto Swiss anbefaler jeg først å installere Node.js, og deretter kjører kommandoen npm installer kouto-swiss via en terminal eller ledetekst i prosjektmappen din. Jeg har funnet dette til å være den enkleste måten å sikre avhengigheter er oppfylt.
Legg deretter til denne linjen øverst på Stylus-filen, og du er klar til å gå:
@import 'node_modules / kouto-swiss'
"Kouto Swiss" betyr "Swiss Army Knife", og i ånden av det berømte lille symbolet med konsentrert brukervennlighet, har dette mixin-biblioteket pakket mange nyttige ting inn i en liten pakke.
Det er alt for mange funksjoner i Kouto Swiss for å dekke dem alle her, så i dag skal vi begynne med å se på et utvalg av seks av funksjonene i handling.
Inkludert Normalize.css i prosjektene dine er, vil jeg foreslå en nødvendighet.
Når du bruker en CSS preprocessor som vanligvis betyr å finne en aktivt vedlikeholdt versjon av Normalize.css som har blitt omskrevet på ditt eget språk, laster du det ned i prosjektet, importerer det, holder øye med oppdateringer og reimporterer det når det kreves.
Når du bruker Kouto-Swiss på den annen side, trenger du ikke å bekymre deg for noen av disse trinnene. Bare legg til en enkelt linje i Stylus-filen din:
normal ()
Den fulle koden til Normalize.css vil bli skrevet direkte inn i stilarket ditt:
Med denne tilnærmingen trenger du bare å holde din Kouto-Swiss oppdatert og Normalize.css vil bli tatt vare på rett sammen med den. Ingen ekstra filer, pakker eller import for å bekymre deg for; hele prosessen håndteres via den ene linjen med kode.
Hvis du ikke liker å bruke Normalize.css og kanskje foretrekker Eric Meyers CSS reset, er det en "en liner" du kan bruke for det også: meyer-tilbakestilling ()
Med mindre du holder fast i eldre CSS-egenskaper, må du bruke leverandørspesifikke prefiks og fallbacks ved flere anledninger for å kunne utføre kryss-kompatibel kode. Men å opprettholde leverandørens prefiks og fallbacks kan være vanskelig som krav til hvor de skal brukes, endrer seg alltid.
Kouto-Swiss håndterer dette problemet ved å kommunisere med nettstedet "Kan jeg bruke" for å holde alle leverandørens prefiks og fallbacks oppdatert for deg. Du kan legge til dine egne innstillinger for hvilke nettlesere og versjoner du vil støtte, eller bare gå med standardinnstillingene som kommer fra "Kan jeg bruke" anbefalinger.
Det er ingen spesielle skritt for å få koden din automatisk gjort kryssbrowser kompatibel. Bare skriv Stylus-koden din som om alle egenskapene allerede var universelt støttet:
Den resulterende CSS vil ha riktig leverandør prefiks og tilbakekallingskode på plass:
Sjekk ut hele listen over CSS-egenskaper støttet av leverandørens prefikserings- og fallback-funksjonalitet.
Den relativt nye muligheten til å generere figurer med CSS3 har vært super nyttig for å legge til ikoner og grunnleggende illustrasjoner på nettsteder på en måte som laster raskt, er lett å farge og kan skaleres via kodeendringer alene.
CSS3-trekanter er en av figurene som kan opprettes, men prøver å skrive koden for å sende dem ut med størrelsen, fargen og vinkelen du vil ha, kan være vanskelig.
Kouto-Swiss inneholder en utrolig enkel å bruke triangel() mixin som tar all prøve og feil ut av trekanten generasjon, som du bare fortelle hvilken retning du vil ha trekanten til å peke, hvor stor den skal være, og hva forgrunnen og (valgfri) bakgrunnsfarger skal være.
For eksempel, slipp noen triangel() mixins med noen forhåndsdefinerte fargevariabler som slik:
Da blir CSS-trekanten din en tur i parken:
Det er alltid god praksis å inkludere en font stack mot hver skriftfamilieerklæring i stilarket ditt, så hvis den ønskede skrifttypen mangler, uansett grunn, har du noen alternativer på plass. Når det er sagt, finne ut hvilke fonter som er tilstrekkelig lik hverandre til å danne en god stabel, kan det være litt arbeidskrevende og vanskelig.
Kouto-Swiss inkluderer a skrift-stabel () mixin som får sin fontstackinformasjon fra cssfontstack.com, av Denis Leblanc, og lar deg enkelt skrive ut fontstabler basert på populære fontfamilier.
For eksempel, følgende stilkode:
genererer disse komplette fontstablene:
Ta en titt på hele listen over skrifter som omfattes av denne mixin.
Kouto Swiss har funksjoner for å skape fem forskjellige typer fargeskjemaer:
Du bruker fargeskjema genererer funksjon a frø farge og lagre informasjonen som returneres mot en Stylus-variabel. Mellom to til fire farger vil bli returnert, som du deretter kan sende ut på følgende måte:
I koden ovenfor har jeg brukt en blå farge på # 3083bf og passerte det gjennom hver av de fem fargevalgsgenereringsfunksjonene, som da har generert disse fargeskjemaene:
Hvis frøfargen endres, kan et helt nytt sett med fargeskjemaer genereres fra samme sett med kode. For eksempel bytter til # 30bfb3 gir deg:
Du kan lese om nøyaktig hva hver av fargevalgsgenereringsfunksjonene gjør i dokumentasjonen.
CSS-animasjon, i likhet med CSS-former, er et av de mest nyttige nye verktøyene i vårt webdesign arsenal. Elementer som tidligere ville ha behov for Flash eller JavaScript, kan nå bringes til liv med ingenting annet enn rent CSS.
For øyeblikket skjønner kors nettleser CSS animasjonskode a mye av leverandør prefiks. Ved å bruke Kouto Swiss @keyframe funksjonalitet kombinert med leverandør prefixing vi beskrevet ovenfor blir det ganske rett frem for å kode opp animasjonene dine. For eksempel, disse 29 linjene av Stylus:
utdatere de nødvendige 232 linjene i CSS, som jeg tror du vil være enig i, ville være et mareritt å skrive manuelt:
Den resulterende animasjonen ser slik ut:
Igjen, sjekk ut dokumentene for å lese mer om @keyframe animasjon i Kouto Swiss.
Kouto Swiss er et utmerket tillegg til CSS-utviklingsverdenen, og jeg anbefaler på det sterkeste å ta det ut for en prøvekjøring.
Den har en lang liste over ekstra funksjoner som vi ikke engang har rørt på, så gå over til http://kouto-swiss.io for å få det fulde utslaget.
Og husk, hvis du trenger litt hjelp med å sparke Stylus-utviklingen, se de to gratis videoene fra kurset mitt for å lære hvordan du kommer i gang: Bli en CSS-superhelt med Stylus.
Accentsconagua