ZURB Foundation: CSS-rammeverk for brukergrensesnitt for en responsiv grensesnitt

I 2010 laget designbyrået ZURB et CSS-rammeverk med mål om å starte en tjeneste for legge til rette for å lage prototyper e forkorte utviklingstiden. For å gjøre dette ble de beste utdragene, mønstrene og malene valgt for å samle dem i Foundation, rammeverket som ble publisert som et åpen kildekode-prosjekt i 2011 og som siden den gang fortsetter å være gratis for publikum.

Foundation er et responsivt grensesnitt, bestående av effektive HTML- og CSS-komponenter for UI-konfigurasjon (Brukergrensesnitt), forskjellige utdrag og maler, men også en rekke valgfrie JavaScript-utvidelser. Nettrammeverket har en modulstruktur og har blitt designet for å konfigurere prosjekter tilgjengelig fra forskjellige enheter; deles ut med MIT-lisens og kan lastes ned fra begge offisiell hjemmeside være på GitHub. Fra Foundation versjon 4.0 gjelder arbeidspremisset "Mobil først", så siden den gang har vi jobbet ved hjelp av flere nye moduler for å optimere ytelsen og lette størrelsen på filer innenfor rammeverket. I tillegg til standardversjonen av Foundation har ZURB også publisert andre varianter for utvikling av nyhetsbrev på e-post (Stiftelsen for e-post) og nettsteder på én side (Foundation for apper).

Foundation, det responsive nettrammeverket preget av sin modulære struktur, drar fremfor alt fordeler av fleksibilitet. Du har muligheten til å bestemme før nedlastingen hvilke komponenter du skal velge og hvilke som ikke: på denne måten kan du komponere din egen variant av nettkodesamlingen uten å bli tvunget til å laste ned moduler du ikke trenger. Og hvis det skjer at du innser at du trenger en komponent du ikke hadde valgt på nedlastingstidspunktet, kan du enkelt legge den til rammeverket senere. På samme måte er det også mulig å fjerne moduler som ikke lenger er nyttige for deg: slik at du alltid er garantert muligheten til kun å ha de funksjonene du anser som virkelig nødvendige for realisering av webprosjektet ditt.

For Foundation 6.0 har du et valg mellom flere 40 komponenter som tilhører følgende syv sektorer:

• Grid: Den avgjørende komponenten for responsiv webdesign er den fleksible utformingen av Grid, med en standard-kompatibel bredde på 1200 piksler. Du kan også velge bort denne modulen, men systemet danner grunnlaget for å designe et nettprosjekt som er tilgjengelig fra forskjellige enheter og kompatibelt med forskjellige oppløsningsskalaer. I tillegg til dette er det fra og med versjon 6.0 også muligheten til å velge "Flex Grid"-modulen, som tillater en enda mer fleksibel plassering av elementene ved å operere på basis av CSS flexbox-modellen (som en horisontal eller vertikal organisering av objekter).

• general: Blant de generelle modulene (som offisielt også Grid er en del av) er det først og fremst timene flyte e synlighet, takket være det kan du defidefinere atferdsregler angående plassering og synlighet av enkeltelementer; I tillegg finner du i dette området også en komponent for å lage skjemaer, samt trykkerimodulen som inneholder de grunnleggende formatene for skriving og tekst.

• Kontroll: Alle de viktigste interaktive elementene i nettprosjektet ditt finnes her. Dette er for eksempel knapper som veileder brukeren andre steder med et klikk eller som lukker valgte elementer. Det finnes også moduler som du kan integrere glidere og puls anti med av/på-modus.

• Navigasjon: I konfigurasjonen av frontend kan navigasjonselementer absolutt ikke mangle, så selv for prosjektet ditt som skal utføres med ZURB Foundation har du et stort utvalg av moduler du kan stille inn med menylinjer og menyer (rullegardin, nedtrekksliste, drilldown), legg til navigasjonsstier (brødsmuler) eller legg til nummeret på sidene.

• Container: Beholdere er en fantastisk mulighet til å inkludere ulike elementer som tekst, bilder eller videoer i et felles rom. Her finner du stiler for klassiske innholdswidgets, som rullegardinmenyer, faner, overlappende sektorer eller modale dialoger.

• Media: Inne i «Media»-delen finner du rammemodulene som vil være nyttige for inkorporering av multimedieelementer. "Flex Video"-komponenten, for eksempel, støtter deg isette inn videoer og sørger for at innholdet er tilpasset ulike skjermstørrelser og typer oppløsning. I tillegg er det også komponenter for forhåndsvisningsbilder samt nyttige tips for bruk av verktøyene.

• Plugg inn: Til slutt kan du velge noen svært nyttige utvidelser for ZURB Foundation som gjør det lettere for deg å jobbe med nettrammeverket. Med "Motion UI"-biblioteket, for eksempel, har du muligheten til å laste ned et veldig nyttig bibliotek, selv om det bare er tilgjengelig for Sass-varianten, noe som gjør opprettelsen av UI-passasjer og animasjoner til en lek.

Før du laster ned, kan du også velge om defifullføre noen standardinnstillinger for rammeverket. Disse inkluderer alternativer for å endre antall eller tykkelse på kolonner og maksimal bredde på Grid-systemet, samt ulike fargeinnstillinger og bestemme retningen til teksten (venstre til høyre eller høyre til venstre). Hvis du først vil teste rammeverket uten å studere funksjonen til de enkelte modulene, kan du også laste ned Foundation som en fullversjon (Komplett) eller alternativt som en lettere basisvariant (Viktig).

Hvis du er fornøyd med mulighetene som tilbys av CSS og deretter bare transkribere stilene på den nedlastede CSS-filen, har du helt sikkert tatt den riktige avgjørelsen. Grunnlaget har imidlertid en spesiell funksjon: grunnlaget for CSS-koden er skrevet på Sass-stilarkspråket (Syntaktisk fantastiske stilark), som er en såkalt preprosessor for CSS. Sass gjør det mulig for deg å jobbe med stilark .scss som senere kan kompileres eller transkriberes til populære .css-filer og som deretter leses og tolkes av nettlesere.

Hvis du bruker Sass-varianten av ZURB-rammeverket, vil du nyte følgende fordeler:

• Forenklet syntaks (Sass eller CSS), som gjør det lettere å skrive stilark

• Muligheten for defibli ferdig av modeller (Mixins) for å lagre tilbakevendende formater sentralt og integrere dem etter eget ønske

• Enkel kombinasjon av forskjellige stilark for å minimere HTTP-forespørsler

• Ved hjelp av variabler og funksjoner å utveksle farger, avstander, fonter og så videre sentralt

• Koden kan enkelt struktureres takket være nesting i hierarkisk rekkefølge, slik at du kan jobbe renere uten for mange strenger med kode

Sass-kompilatoren er opprinnelig skrevet i Ruby. Men hvis du ikke bruker dette programmeringsspråket, er du ikke tvunget til å installere det for Sass fordi med LibSass vil du ha et alternativ skrevet i C. LibSass fungerer med alle operativsystemer som er i bruk og kan enkelt installeres på en Node.js arbeidsflyt, det vil si å gjøre endringer i koden i Sass og automatisk oversette dem til CSS.

Med overgangen fra versjon 5 til Foundation 6.0 har ZURB nok en gang redusert filstørrelsen på hele rammeverket: med sine 60 KB CSS og 84 KB JavaScript nyter Foundation ryktet om å være en en av de mest strømlinjeformede utviklingsplattformene og les at det er det. Takket være den nevnte modulære strukturen og en viss tilpasningsfrihet kan du til og med redusere størrelsen på rammeverket ytterligere. I kombinasjon med det fleksible Grid og det annerledes attributterARIA (for eksempel for transponering av en effektiv tastaturnavigasjon) implementert av ZURB, kan de grunnleggende betingelsene, uunnværlige for realiseringen av et nettprosjekt som er kompatibelt på forskjellige plattformer og enheter, anses som fullstendig tilfredsstilte. ARIA-attributter er best dokumentert og er tilgjengelige der du har tenkt å optimalisere tilgjengeligheten til nettstedet ditt betydelig.

Hvis du jobber med Sass-versjonen av rammeverket, sørg for at du utvider alternativene for å konfigurere designelementene og oppsettene du setter inn. Å bruke disse spesielle stilarkene er på ingen måte lett for nybegynnere og krever en viss læringsperiode, noe som vanligvis gjelder for plattformen også. Jeg også'integrering av eksterne komponenter, samt moduler og Foundation-prosjekter i et annet rammeverk eller i et CMS er veldig komplisert. De små svakhetene som ZURB Foundation viser sammenlignet med andre CSS-rammeverk, som Twitter Bootstrap, er det begrensede utvalget av maler og mangelen på støtte for eldre versjoner av Internet Explorer.

ZURB Foundation følger utviklere fra den første prototypen til den ferdige nettsiden og kjennetegnes fremfor alt av sin egen effektivitet. Hvis du finner ut at noen komponenter er overflødige, har du muligheten til å velge bort dem uten å påvirke funksjonaliteten til andre elementer. Avslutningsvis er CSS-rammeverket preget av en spesielt slank kode som fremhever ledemotivet valgt av ZURB "Mobile First". Sammen med ekstremt fleksibelt gittersystem, som du eventuelt kan tilpasse med Sass, er rammeverket ideelt for å utvikle responsiv frontend som har fordelen av å ha høy hastighet i datalasting og stor tilgjengelighet, samt tilpasse seg ulike skjermstørrelser.

Du kan også bruke ZURB-rammeverket for å lage tilpassede og kanskje mer komplekse nettprosjekter, men dette er forbundet med en betydelig overbelastning av energi og krever en god forståelse av utdragene.