Met een CSS Framework kun je een consistente, beknopte en effectieve CSS binnen WordPress bouwen voor de structuur van je webpagina's. Bekijk de beste Frameworks.
IN DEZE HANDLEIDING:
Wat is een CSS framework?
CSS-frameworks zijn tools die door UI-ontwikkelaars worden gebruikt om hun werk te vergemakkelijken. In plaats van het wiel opnieuw uit te vinden elke keer als er een nieuw project opduikt. Frameworks geven ontwikkelaars de tools om snel spin-up gebruikersinterfaces te draaien die kunnen worden aangepast en geïtereerd gedurende een project in plaats van tijd te besteden aan het starten van een blanco document. Ze zijn ook nuttig in grote teams en helpen degenen onder ons die een thema moeten maken voor gebruik in meer dan één project.
Vaak zijn CSS-raamwerkwebsites zoals Bootstrap Studio een beetje geheimzinnig voor beginners. Gevuld met technische codes en woorden en beschrijvingen die alleen meer senior ontwikkelaars zullen begrijpen, en het is moeilijk voor beginners om te vertellen wanneer en welk raamwerk ze moeten beginnen te leren.
In zijn eenvoudigste vorm is een CSS-raamwerk een verzameling CSS-stijlschriften die zijn voorbereid en klaar voor gebruik. Ze zijn op maat gemaakt voor gebruik in veel voorkomende situaties, zoals het opzetten van navigatiebalken en typografie.
Voordelen CSS frameworks en CSS
Tijdsbesparing is niet het enige voordeel van het gebruik van CSS-frameworks. Teams met meerdere ontwikkelaars, vooral grotere, kunnen de standaarden die de frameworks aan de tafel brengen echt waarderen. In plaats van dat elke ontwikkelaar zijn eigen smaak van class names naar een project brengt, standaardiseren frameworks de lay-outs en laten ze de ene ontwikkelaar toe om gemakkelijk de code van een andere ontwikkelaar te lezen.
Dit bespaart tijd, maar zorgt ook voor een soepeler ontwikkelcyclus met minder bugs en eenvoudiger teamcommunicatie. Als je ooit in het diepe bent gegooid van een bijna compleet project en je wordt verteld dat je de UI moet repareren, dan weet je welke pijn de frames kunnen verzachten.
Het is belangrijk om te onthouden dat het gebruik van frameworks als een newbie niet aan te raden is. Soms willen mensen gewoon zo snel mogelijk aan de slag, en ze zien kaders als een manier om te springen beginnen hun doelen. Hoewel dat waar is voor spinning up projecten, kan het schadelijk zijn voor je lange termijn carrière, omdat je dan de basisvaardigheden mist die over de hele linie kunnen worden toegepast.
Door bijvoorbeeld eerst CSS in zijn pure vorm te leren, kunt u eenvoudig de documentatie van een framework doorzoeken om te zien hoe u de meeste dingen die u met pure CSS deed, kunt doen. Het stelt u ook in staat om gemakkelijk problemen binnen uw syntax te identificeren en kan leiden tot eenvoudigere aanpassingen wanneer u het framework dat u gebruikt moet aanpassen.
Beste CSS frameworks voor CSS op een rij
Er zijn veel dingen die in overweging worden genomen. Dus hier is een lijst van de meest voorkomende en meest prominente CSS-Frameworks die beschikbaar zijn om te gebruiken:
Twitter Bootstrap
Het is een front-end framework dat helpt bij het ontwerpen van websites of een web-applicatie die het op een verantwoorde manier leesbaar maakt op elk schermformaat. Er zijn vele soorten schermen die een gebruiker gebruikt zoals mobiel, pads en laptops en om de inhoud goed aan te passen aan de schermgrootte van het apparaat is wat Twitter Bootstrap Studio het beste doet.
Afbeelding voor post
Semantische UI
Dit raamwerk staat bekend om zijn eenvoudige en elegante ontwerpen en verbluffende thema-effecten. Het meest interessante feit is dat het 3000+ thema variabelen biedt, 50+ UI en 5000+ commits. Met dit framework hoef je alleen maar een keer je UI te ontwikkelen en dan kun je later overal dezelfde code inzetten.
Nadeel: te lange codes
https://semantic-ui.com/elements/header.html
Foundation
Dit raamwerk werd gecreëerd door Zurb en is een zeer geavanceerd en responsief front-end raamwerk. De basis is semantisch, leesbaar, flexibel en een volledig aanpasbaar raamwerk. Top online marketeers zoals Facebook, eBay en Mozilla hebben gebruik gemaakt van de mogelijkheden van dit framework vanwege de grotere flexibiliteit tijdens het werken met de stichting.
Afbeelding voor post
get.foundation/sites/docs/typography-base.html
zurb.com/university/foundation-intro?
Materialize CSS
Materialize CSS is een modern, responsief front-end raamwerk met een uitgebreid framework. Ideaal voor verfijnde animaties en overgangen en biedt een soepele ervaring voor Android Framework-ontwikkelaars.
UIKit
Dit raamwerk is licht van gewicht, extreem aanpasbaar en een modulair front-end raamwerk. Het werkt goed met geavanceerde gebruikersinterfaces die gebruik maken van componenten zoals nestbaar. UIkit is een all-inclusive verzameling van HTML, CSS en JS gebaseerde kleine, responsieve componenten. UIKit framework maakt gebruik van betrouwbare en conflictvrije naamgevingsconventies. De nadruk op de kwaliteit ligt op het feit dat het eenvoudig te gebruiken is, gemakkelijk aan te passen en te schalen.
getuikit.com/docs/heading
Tailwind
Tailwind CSS is een zeer aanpasbaar, low-level CSS-framework dat je alle bouwstenen geeft die je nodig hebt om op maat gemaakte ontwerpen te bouwen zonder vervelende eigenzinnige stijlen die je moet bestrijden om te overstemmen.
tailwindcss.com/docs/font-size
Tailwind proberen
codepen.io/team/codepen/pen/oVrErE
Beste Frameworks voor CSS op medium.com
Kritiek
Meer handleidingen over het ontwerpen van grids, rasters en layouts in WordPress
- Galerij grid afbeeldingen maken WordPress Beaver builder module
- Justified Image Grid plugin fotogalerij maken met afbeeldingen in WordPress
- Grid stramien maken WordPress website webdesign vormgeving
- Essential Grid Plugin Portfolio maken in WordPress
- Grid rasterindeling met CSS zonder achtergrondafbeelding
- Grid Template Areas css html div wordpress
<!-- Full width column --></code>
<div class="flex mb-4">
<div class="w-full bg-gray-300 h-12"></div>
</div>
<!-- Two columns -->
<div class="flex mb-4">
<div class="w-1/2 bg-gray-500 h-12"></div>
<div class="w-1/2 bg-gray-300 h-12"></div>
</div>
<!-- Three columns -->
<div class="flex mb-4">
<div class="w-1/3 bg-gray-500 h-12"></div>
<div class="w-1/3 bg-gray-300 h-12"></div>
<div class="w-1/3 bg-gray-500 h-12"></div>
</div>
<!-- Four columns -->
<div class="flex mb-4">
<div class="w-1/4 bg-gray-300 h-12"></div>
<div class="w-1/4 bg-gray-500 h-12"></div>
<div class="w-1/4 bg-gray-300 h-12"></div>
<div class="w-1/4 bg-gray-500 h-12"></div>
</div>
<!-- Five columns -->
<div class="flex mb-4">
<div class="w-1/5 bg-gray-300 h-12"></div>
<div class="w-1/5 bg-gray-500 h-12"></div>
<div class="w-1/5 bg-gray-300 h-12"></div>
<div class="w-1/5 bg-gray-500 h-12"></div>
<div class="w-1/5 bg-gray-300 h-12"></div>
</div>
<!-- Six columns -->
<div class="flex">
<div class="w-1/6 bg-gray-500 h-12"></div>
<div class="w-1/6 bg-gray-300 h-12"></div>
<div class="w-1/6 bg-gray-500 h-12"></div>
<div class="w-1/6 bg-gray-300 h-12"></div>
<div class="w-1/6 bg-gray-500 h-12"></div>
<div class="w-1/6 bg-gray-300 h-12"></div>
</div>