Share
Wat je gaat creërenHoewel Bootstrap een groot deel van het web heeft overgenomen, kan het een beetje een prestatielast zijn voor sites die mogelijk niet nodig zijn voor uw volgende project. Pure.css is het responsieve framework van Yahoo; het biedt een minimalistisch, goed gedocumenteerd en flexibel alternatief.
In deze tutorial ga ik je laten kennismaken met Pure, "een set kleine, responsieve CSS-modules die je kunt gebruiken in elk webproject." We zullen de functies en voordelen van het gebruik van Pure opnieuw bekijken en vervolgens een aantal eenvoudige voorbeelden bekijken.
Als je in de toekomst nog vragen hebt over toekomstige tutorials of vragen en opmerkingen, kun je deze hieronder plaatsen. Je kunt me ook op Twitter bereiken @reifman direct.
Pure biedt alle gebruikelijke functies die u nodig hebt in een standaard webontwerpraamwerk. Dus, of u nu een thema aan het bouwen bent voor WordPress of een eigen eigen website, het zou een goede optie kunnen zijn.
Voor projectmanagers is het meestal van cruciaal belang dat clientprojecten worden gebouwd met standaardhulpmiddelen die gemakkelijk kunnen worden begrepen en onderhouden, en vooral dat het gemakkelijk is om talent te werven dat ervaring heeft met uw platform. Bootstrap is hiervoor perfect. Puur lijkt me eenvoudig genoeg om ook een goed startpunt te zijn.
Hier is een samenvatting van de voordelen en functies van Pure. Het zorgt voor:
Accentsconagua
Het meest indrukwekkend is echter dat Pure.css super klein is 4,5 KB verkleind + gzipped. Hier is hoeveel ruimte de verschillende componenten van Pure in beslag nemen in uw productieomgeving:
Pure is ook goed getest en werkt in IE 8+, Firefox, Chrome, Safari, iOS 6-8 en Android 4.x.
En je kunt het nog steeds gebruiken met elementen van Bootstrap, en deze toevoegen waar je maar wilt. Ik zal hieronder een voorbeeld hiervan laten zien.
Pure is gebouwd op Normalize.css, dat de prestaties van het framework in browsers standaardiseert. Normaliseren biedt een standaard CSS-reset die:
Pure's website is gebouwd met zijn framework, dus de minimalistische, goed ontwikkelde code leidt tot een eenvoudig te navigeren, eenvoudig te gebruiken gids. Hier is een voorbeeld van het linker menu van Pure in actie:
Je kunt Pure toevoegen aan je pagina via Yahoo's gratis CDN. Voeg gewoon het volgende toe element in uw pagina's , voor de stijlbladen van uw project:
Als u de responsieve breedte van uw website wilt initialiseren, stelt u een metatag in voor het kijkvenster op de breedte van uw apparaat:
Op de pagina Lay-outs biedt Pure een steekproef van downloads voor verschillende voorbeeldpagina's voor algemene toepassingsbehoeften:
U kunt ze doorbladeren en downloaden waarmee u wilt experimenteren of die u aan uw toepassing wilt toevoegen. Waaronder:
De Base-pagina biedt een korte achtergrond over de foundation onder het Pure-framework, met name Normalize.css:
Normalize.css is een klein CSS-bestand dat zorgt voor een betere consistentie tussen de browsers in de standaardstijl van HTML-elementen. Het is een modern, HTML5-gereed alternatief voor de traditionele CSS-reset.
Je kunt ook Normalize apart laden met behulp van Yahoo's CDN voor onafhankelijk gebruik:
En er zijn nog andere kleine funderingsfuncties, zoals klassen om Pure te laten reageren door een viewport:
Maar laten we nu eens kijken naar enkele van de voorbeeldlay-outs die Pure biedt.
Grids zijn een belangrijk aspect van website-indelingen die Pure vrij eenvoudig maakt. Hier is een snel voorbeeld van een Pure Pure-raster met vier kolommen op een desktopscherm:
En hier is hoe het op een tablet-formaat viewport doormidden vermindert:
En als laatste een enkele kolom op een smartphone:
Pure Grids bestaan uit twee soorten klassen: roosters en eenheden. Onderliggende elementen van rasterdivs moeten unit-divs zijn. Je inhoud gaat naar de unit divs. Eenheidsklassen worden genoemd om hun breedte weer te geven. Zo heeft pure-u-1-4 een breedte van 25%.
Hier is de code voor de bovenstaande antwoordende vierde:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Veniam.
Dolor Sit Amet
Quis nostrud uitoefening ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
Proident laborum
In culpa qui officia deserunt mollit anim id est laborum. onverzettelijke ut labore et dolore magna aliqua. Ut enim ad minim Veniam, quis nostrud exercitation ullamco.
Praesent consectetur
Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor bij turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
Zoals je hierboven kunt zien,
Je kunt hier meer lezen over Pure Grids.
vormen
Pure heeft ondersteuning voor het afstemmen van invoervelden binnen formulieren en voor het opmaken van gespecialiseerde velden, zoals:
- Inline formulieren
- Gestapelde formulieren
- Formulieren met twee kolommen
- Meerdere kolomformulieren (hierboven weergegeven)
- Gegroepeerde ingangen
- Vereiste ingangen
- Uitgeschakelde invoer
- Alleen ingangen lezen
- Afgeronde ingangen
- Selectievakjes en radio's
Je kunt dit alles hier beschreven zien. Laten we een tweekolomsvorm verkennen, die door Pure wordt aangeduid als een uitgelijnde vorm:
Door de
-Zuivere vorm uitgelijndles metpure-controlegroep (s), Pure zorgt ervoor dat elke reeks velden correct wordt gepositioneerd zoals hierboven weergegeven.form>Het is een vrij eenvoudige manier om een zeer bruikbare, goed aangelegde vorm te bouwen.
tabellen
Pure maakt het bouwen en opmaken van tabellen ook heel gemakkelijk. Hier is een voorbeeld van een horizontaal gestreepte tafel:
U kunt de bovenstaande tabel zien door eenvoudigweg toe te voegen
pure-table onevendeel rijen afwisselend door uw code om de striping te wijzigen:
# Maken Model Jaar 1 Honda Overeenstemming 2009 2 Toyota Camry 2012 3 Hyundai Elantra 2010 4 doorwaadbare plaats Focus 2008 5 Nissan Sentra 2011 6 BMW M3 2009 7 Honda burgerlijk 2010 8 Kia Ziel 2010 Er zijn een aantal andere tabelvoorbeelden die hier worden getoond.
menu's
Menu's in Pure kunnen ook gemakkelijk worden gefaciliteerd, waaronder:
- Verticaal menu
- Horizontaal menu
- Geselecteerde en uitgeschakelde items
- dropdowns
- Verticaal menu met submenu's
- Schuifbaar Horizontaal Menu
- Scrollable Vertical Menu
- Responsief verticaal menu
- Responsief Horizontaal Scrollable Menu
- Responsief horizontaal-naar-verticaal menu
Bekijk alle hier geïllustreerde menu's. U kunt als volgt een vervolgkeuzemenu coderen:
Kortom, het is gewoon een
pure-menu-horizontaal'spure-menu-listenpure-menu-item pure-menu-heeft-kinderen pure-menu-allow-hoveren vervolgens een lijst met onderliggende menu-items:
- Huis
- Contact
- tjilpen
- Tumblr Blog
Pure biedt voorbeeld-JavaScript voor het implementeren van extra toegankelijkheidsfuncties in uw menu's.
Verder gaan
De website van Pure biedt een aantal uitstekende handleidingen voor het bouwen op het framework:
- Tools gebruiken met Pure zoals Bower en Grunt
- Pure aanpassen en segmenten van de codebase op zichzelf gebruiken
- Uitbreiden van Pure-functies en -klassen
En u kunt ontdekken hoe u Pure combineert met Bootstrap en JavaScript. Als je wilt beginnen met Pure's kleine voetafdruk en minimalistische stijl, kun je nog steeds verschillende Bootstrap-functies gebruiken, alleen laden wat je nodig hebt.
Hier is een voorbeeld van een Bootstrap-modaal dialoogvenster bovenop Pure, dat u kunt zien op de uitbreidingspagina van Pure:
In Closing
Bootstrap wordt de IBM van web frameworks. Het is responsief, het is een standaard en je kunt niet ontslagen worden omdat je het hebt gekozen (op een recent contract moesten we eigenlijk een thema-ontwikkelaar ontslaan omdat Bootstrap niet correct werd geïmplementeerd). Maar als je iets kleiner, sneller en eenvoudiger wilt, kijk dan eens naar Pure.css.
Als je het eens probeert, laat het me weten over je ervaringen in de onderstaande opmerkingen. Je kunt me ook rechtstreeks op Twitter @reifman bereiken. En je kunt ook bladeren door mijn Envato Tuts + instructeur-pagina om mijn andere tutorials te lezen.
Gerelateerde Links
- The Pure Blog
- Pure op GitHub
- Pure: wat, waarom en hoe? (Envato Tuts +)
- Vergelijk met Bootstrap
