Een Whistle-Stop-rondleiding door het UIkit-framework

Hoewel Bootstrap en Foundation misschien wel de twee meest populaire front-end frameworks zijn bij webontwerpers, introduceer ik in dit artikel de functies van UIkit, een lichtgewicht en modulair front-end framework dat ik gebruik in bijna al mijn projecten.

Notitie: In dit artikel wordt ervan uitgegaan dat u bekend bent met hoe front-end frameworks werken. Ook is het belangrijkste doel van dit artikel niet om uitgebreid afzonderlijke delen van dit raamwerk te dekken (bijvoorbeeld het rastersysteem). In plaats daarvan concentreren we ons op het kort presenteren van verschillende nuttige UIkit-functies. 

Ermee beginnen

UIkit is gebouwd en wordt onderhouden door YOOtheme, een Duits bedrijf dat is gespecialiseerd in het bouwen van thema's en toepassingen voor het web.

Hoe UIkit te downloaden

Er zijn een paar verschillende opties beschikbaar voor het opnemen van UIkit in uw projecten. U kunt een pakketbeheerder gebruiken zoals Bower, een Content Delivery Network zoals cdnjs, of u kunt het handmatig downloaden van zijn GitHub-pagina. Merk op dat UIkit jQuery vereist, dus zorg ervoor dat je dat in je projecten hebt opgenomen.

Voor deze tutorial gebruiken we cdnjs om de vereiste UIkit-bestanden naar onze CodePen-demo's te halen. Meestal zullen we voor de eenvoud de uikit.min.css en uikit.min.js bestanden. In de laatste twee voorbeelden voegen we echter ook enkele extra bestanden toe die niet zijn opgenomen in het kernraamwerk. Houd er rekening mee dat UIkit modulair is, waardoor we alleen de bestanden kunnen laden die echt nodig zijn. 

Je kunt op deze pagina meer lezen over de structuur van UIkit. 

UIkit aanpassen

Het raamwerk is volledig aanpasbaar. Voordat we kunnen downloaden, kunnen we de standaardstijlen overschrijven en onze eigen stijlen toepassen. Als we bijvoorbeeld de standaard breekpunten willen wijzigen, kunnen we de aanpassingspagina bezoeken en de Geavanceerde modus keuze. Vanaf daar vinden we de breekpunten sectie en voeg onze nieuwe breekpunten toe. Vervolgens krijgen we het nieuw gegenereerde CSS-bestand.

Browserondersteuning

UIkit werkt in alle recente browsers, met name: 

Handige UIkit-functies 

Het is nu tijd om enkele nuttige UIkit-functies te verkennen die u misschien zou willen gebruiken in een van uw aankomende projecten! 

Flexbox en roosters

UIkit biedt zijn Grid en Flex-componenten voor het bouwen van responsieve lay-outs. Om een ​​beter begrip te krijgen van hoe deze componenten werken, maken we een eenvoudige lay-out. Voordat we dat doen, moeten we het toevoegen uikit.min.css bestand naar ons voorbeeld. 

Dit zijn de vereisten:

• Op kijkers tot 767px breed worden alle kolommen verticaal gestapeld.
• Op kijkers die breder zijn dan 767 px, zijn de breedten van de eerste en derde kolom 25% van de bovenliggende breedte, terwijl de breedte van de tweede kolom 50% van de bovenliggende breedte is.

 De opmaak ziet er zo uit:

Let op de .kaart elementen binnen onze kolommen. Om stilistische redenen passen we enkele basisstijlen toe:

.kaart background: # e0e0e0; opvulling: 10px; margin-top: 35px; 

Hier is de demo van Codepen:

Zoals je kunt zien in de bovenstaande demo (wanneer de breedte van het kijkvenster groter is dan 767px), is de .kaart elementen vullen de volledige hoogte van de ouder niet. Laten we aannemen dat we dat willen laten gebeuren. 

Een snelle oplossing zou kunnen zijn om doelelementen te geven hoogte: 100%, rechts? Dit werkt echter niet in sommige browsers (bijvoorbeeld Safari), dus we moeten die benadering verlaten en zoeken naar een alternatief. Een truc is om de kolommen te definiëren als flexibele containers door ze de klasse te geven uk-flex. Dus als we de pagina opnieuw testen, zien we dat het .kaart elementen nemen de bovenliggende hoogte over. Als u meer informatie wilt over waarom die oplossing werkt, raad ik u aan om naar deze Stack Overflow-thread te kijken.

Hier is de bijgewerkte demo:

Creatie van op scrollen gebaseerde animaties

Als je fan bent van op scrollen gebaseerde animaties, zul je de Scrollspy-component van UIkit zeker waarderen. Met dit onderdeel kunnen we animaties en gebeurtenissen activeren terwijl we de pagina op en neer scrollen. Laten we een levend voorbeeld bekijken om te begrijpen hoe het werkt.

Voor dit voorbeeld nemen we de uikit.min.css en uikit.min.js bestanden in ons project. 

De codestructuur is vergelijkbaar met het vorige voorbeeld. Ons doel hier is om verschillende animaties te activeren wanneer de elementen met de klasse van blauw (in totaal vijf elementen) voer de viewport in. Om dit gedrag te implementeren, voegen we de data-uk-scrollspy attribuut aan de doelelementen; hun waarde is een configureerbaar object dat de eigenlijke animatie bestuurt. Bijvoorbeeld, de cls objecteigenschap slaat het animatietype op:

svg width: 100px; hoogte: auto; invullen: kastanjebruin; 

div.uk-cover-background background-image: url (IMAGE_PATH);