ZURB Foundation: CSS-framework voor gebruikersinterface voor een responsieve front-end

In 2010 heeft ontwerpbureau ZURB een CSS framework gecreëerd met als doel een dienst te starten voor het maken van prototypes vergemakkelijken e ontwikkeltijden verkorten. Hiervoor werden de beste snippets, patronen en templates gekozen om ze samen te brengen in Foundation, het framework dat in 2011 als open source project werd gepubliceerd en dat sindsdien gratis blijft voor het publiek.

Foundation is een responsive front-end framework, bestaande uit efficiënte HTML- en CSS-componenten voor UI-configuratie (User Interface), verschillende fragmenten en sjablonen, maar ook tal van optionele JavaScript-extensies. Het webframework heeft een modulestructuur en is ontworpen voor het configureren van projecten die toegankelijk zijn vanaf verschillende apparaten; wordt gedistribueerd met de MIT-licentie en kan worden gedownload van beide officiële startpagina beide aan GitHub. Vanaf de Foundation versie 4.0 geldt het werkuitgangspunt "Mobiel eerst", dus sindsdien hebben we met behulp van verschillende nieuwe modules gewerkt om de prestaties te optimaliseren en de grootte van bestanden binnen het raamwerk te verlichten. Naast de standaardversie van Foundation heeft ZURB ook andere varianten uitgebracht voor het ontwikkelen van e-mailnieuwsbrieven (Stichting voor e-mails) en één pagina-sites (Basis voor apps).

Foundation, het responsieve webframework dat wordt gekenmerkt door zijn modulaire structuur, profiteert vooral van flexibiliteit. U heeft de mogelijkheid om voor het downloaden te beslissen welke componenten u wel en niet kiest: op deze manier kunt u uw eigen variant van de webcodeverzameling samenstellen zonder dat u gedwongen wordt modules te downloaden die u niet nodig heeft. En mocht het gebeuren dat je je realiseert dat je een component nodig hebt die je op het moment van downloaden niet had geselecteerd, dan kun je deze later eenvoudig aan het framework toevoegen. Op dezelfde manier is het ook mogelijk om modules te verwijderen die niet langer nuttig voor u zijn: zo bent u altijd verzekerd van de mogelijkheid om alleen de functies te hebben die u echt nodig acht voor de realisatie van uw webproject.

Voor Foundation 6.0 heb je de keuze uit meer 40-componenten die behoren tot de volgende zeven sectoren:

• Raster: Het beslissende onderdeel voor responsive webdesign is de flexibele lay-out van de Grid, met een standaardbreedte van 1200 pixels. U kunt deze module ook deselecteren, maar het systeem vormt de basis voor het ontwerpen van een webproject dat toegankelijk is vanaf verschillende apparaten en compatibel is met verschillende resolutieschalen. Daarnaast is er vanaf versie 6.0 ook de mogelijkheid om te kiezen voor de module "Flex Grid", die een nog flexibelere positionering van de elementen mogelijk maakt door te werken op basis van het CSS flexbox-model (zoals een horizontale of verticale organisatie van objecten).

• Algemeen: Onder de algemene modules (waar officieel ook Grid deel van uitmaakt) zijn er in de eerste plaats de lessen drijven e zichtbaarheid, waardoor je dat kunt defigedragsregels definiëren met betrekking tot de positionering en zichtbaarheid van afzonderlijke elementen; Daarnaast vindt u in dit gebied ook een component voor het maken van formulieren, evenals de drukkerijmodule met daarin de basisformaten voor schrijven en tekst.

• Controle: Hier vindt u alle essentiële interactieve elementen van uw webproject. Dit zijn bijvoorbeeld knoppen die de gebruiker met een klik ergens anders naartoe leiden of die geselecteerde elementen sluiten. Er zijn ook modules waarmee je sliders en knoppen met aan/uit-modus.

• Navigatie: In de configuratie van de front-end mogen navigatie-elementen zeker niet ontbreken, dus ook voor uw project uit te voeren met Stichting ZURB heeft u een grote verscheidenheid aan modules om mee in te stellen menubalken en menu's (vervolgkeuzelijst, vervolgkeuzelijst, drilldown), voeg navigatiepaden (broodkruimels) toe of voeg het nummer toe aan de pagina's.

• Containers: Containers zijn een fantastische kans om verschillende elementen zoals tekst, afbeeldingen of video's in een gemeenschappelijke ruimte op te nemen. Hier vindt u stijlen voor klassieke inhoudswidgets zoals vervolgkeuzemenu's, tabbladen, trapsgewijze sectoren of modale dialoogvensters.

• Media: In de sectie "Media" vindt u de kadermodules die nuttig zullen zijn voor de integratie van multimedia-elementen. De component "Flex Video" ondersteunt u bijvoorbeeld bij hetvideo's invoegen en zorgt ervoor dat de inhoud wordt aangepast aan verschillende schermformaten en resolutietypes. Daarnaast zijn er ook componenten voor voorbeeldafbeeldingen en handige tips voor het gebruik van de tools.

• Inpluggen: Eindelijk kun je een aantal zeer handige extensies voor ZURB Foundation kiezen die het voor jou gemakkelijker maken om met het webframework te werken. Met de bibliotheek "Motion UI" heb je bijvoorbeeld de mogelijkheid om een ​​zeer nuttige bibliotheek te downloaden, zelfs als alleen beschikbaar voor de Sass-variant, waardoor het maken van UI-passages en animaties een fluitje van een cent is.

Ook kunt u voor het downloaden kiezen of defimaak wat af standaardinstellingen voor het raamwerk. Deze omvatten opties voor het wijzigen van het aantal of de dikte van kolommen en de maximale breedte van het rastersysteem, evenals verschillende kleurinstellingen en het bepalen van de richting van de tekst (links naar rechts of rechts naar links). Als je eerst het framework wilt testen zonder de werking van de afzonderlijke modules te bestuderen, kun je Foundation ook als volledige versie downloaden (Volledige) of alternatief als lichtere basisvariant (essentieel).

Als u tevreden bent met de mogelijkheden die CSS biedt en vervolgens eenvoudig de stijlen op het gedownloade CSS-bestand overschrijft, heeft u zeker de juiste beslissing genomen. Het Foundation-framework heeft echter nog een speciaal kenmerk: de basis van de CSS-code is geschreven in de Sass-stijlbladtaal (Syntactisch geweldige stylesheets), een zogenaamde preprocessor voor CSS. Sass maakt het voor jou mogelijk om aan stylesheets te werken .scss die vervolgens kunnen worden gecompileerd of getranscribeerd in populaire .css-bestanden en die vervolgens door browsers worden gelezen en geïnterpreteerd.

Als je de Sass-variant van het ZURB-framework gebruikt, geniet je van de volgende voordelen:

• Vereenvoudigde syntaxis (Sass of CSS), wat het schrijven van stylesheets gemakkelijker maakt

• De mogelijkheid van defiontkennen van modellen (Mixins) om terugkerende formaten centraal op te slaan en naar believen te integreren

• Eenvoudige combinatie van verschillende stylesheets om HTTP-verzoeken te minimaliseren

• Gebruik van variabelen en functies om centraal kleuren, afstanden, lettertypen enzovoort uit te wisselen

• De code kan eenvoudig worden gestructureerd dankzij: Nesting in hiërarchische volgorde, zodat u schoner kunt werken zonder al te veel codestrings

De Sass-compiler is oorspronkelijk geschreven in Ruby. Als u deze programmeertaal echter niet gebruikt, bent u niet verplicht om deze voor Sass te installeren, want met LibSass heeft u een alternatief geschreven in C. LibSass werkt met alle besturingssystemen die in gebruik zijn en kan eenvoudig worden geïnstalleerd op een Node.js workflow, dat wil zeggen, om wijzigingen aan te brengen in de code in Sass en deze automatisch te vertalen naar CSS.

Met de overgang van versie 5 naar Foundation 6.0 heeft ZURB de bestandsgrootte van het gehele framework opnieuw verkleind: met zijn 60 KB CSS en 84 KB JavaScript geniet Foundation de reputatie een een van de meest gestroomlijnde ontwikkelplatforms en lees dat die er is. Dankzij de eerder genoemde modulaire opbouw en een zekere mate van maatwerk ben je zelfs in staat om het raamwerk verder te verkleinen. In combinatie met het flexibele Grid en de verschillende attributenARIA (bijvoorbeeld voor de omzetting van een effectieve toetsenbordnavigatie) geïmplementeerd door ZURB, kunnen de basisvoorwaarden, onmisbaar voor de realisatie van een webproject dat compatibel is op verschillende platforms en apparaten, als volledig vervuld worden beschouwd. ARIA-kenmerken zijn het best gedocumenteerd en zijn beschikbaar waar u de toegankelijkheid van uw website aanzienlijk wilt optimaliseren.

Als u met de Sass-versie van het framework werkt, zorg er dan voor dat u uw opties voor het configureren van de ontwerpelementen en lay-outs die u invoegt uitbreidt. Het gebruik van deze speciale stylesheets is voor beginners zeker niet eenvoudig en vereist een bepaalde leerperiode, die over het algemeen ook geldt voor het platform. Ik ook'integratie van externe componenten, evenals modules en Foundation-projecten in een ander framework of in een CMS is erg ingewikkeld. De kleine zwakke punten die Stichting ZURB laat zien in vergelijking met andere CSS-frameworks, zoals Twitter Bootstrap, zijn de beperkte verscheidenheid aan sjablonen en het gebrek aan ondersteuning voor oudere versies van Internet Explorer.

Stichting ZURB begeleidt ontwikkelaars vanaf het eerste prototype tot de kant-en-klare website en kenmerkt zich vooral door een eigen rendement. Als je merkt dat sommige componenten overbodig zijn, heb je de mogelijkheid om ze te deselecteren zonder de functionaliteit van andere elementen aan te tasten. Concluderend wordt het CSS-framework gekenmerkt door een bijzonder slanke code die het door ZURB gekozen leidmotief "Mobile First" benadrukt. Samen met extreem flexibel Grid-systeem, die u optioneel kunt aanpassen met Sass, is het raamwerk ideaal om te ontwikkelen responsieve front-end die het voordeel hebben dat ze een hoge snelheid hebben bij het laden van gegevens en een goede toegankelijkheid, en zich ook aanpassen aan verschillende schermformaten.

Je kunt het ZURB-framework ook gebruiken voor het maken van op maat gemaakte en misschien complexere webprojecten, maar dit gaat gepaard met een aanzienlijke overbelasting van energie en vereist een goed begrip van de snippets.