Share
Vad du ska skapaMedan Bootstrap har tagit över en stor del av webben kan den lägga lite prestationsbelastning på webbplatser som kanske inte är nödvändiga för ditt nästa projekt. Pure.css är Yahoos responsiva ram Det erbjuder ett minimalistiskt, väl dokumenterat och flexibelt alternativ.
I den här handledningen kommer jag att presentera dig för ren, "en uppsättning små, lyhörda CSS-moduler som du kan använda i varje webbprojekt." Vi granskar funktionen och fördelarna med att använda rena och sedan gå igenom ett visst exempelexempel.
Om du har några förfrågningar om framtida handledning eller frågor och kommentarer om dagens, vänligen skicka dem nedan. Du kan också nå mig på Twitter @reifman direkt.
Ren erbjuder alla de gemensamma funktionerna du behöver i en standard webbdesign ram. Så om du bygger ett tema för WordPress eller en egen webbplats, kan det vara ett bra alternativ.
För projektledare är det vanligtvis kritiskt att klientprojekt byggs med standardverktyg som lätt kan förstås och underhållas, och viktigast av allt är att det är lätt att rekrytera talang som kommer med erfarenhet i din plattform. Bootstrap är perfekt för detta. Ren verkar enkelt för mig att det också kan vara en bra utgångspunkt.
Här är en sammanfattning av Pures fördelar och funktioner. Det ger:
Accentsconagua
Men mest imponerande, Pure.css är super liten, bara 4,5KB minifierad + gzipped. Här är hur mycket utrymme de olika komponenterna i Pure tar upp i din produktionsmiljö:
Ren är också väl testad och fungerar i IE 8+, Firefox, Chrome, Safari, iOS 6-8 och Android 4.x.
Och du kan fortfarande använda den med element i Bootstrap, lägga till dem där du behöver. Jag ska visa ett exempel på detta nedan.
Ren är byggd på Normalize.css, vilket standardiserar rammens prestanda över webbläsare. Normalisera ger en standard CSS-återställning som:
Pures hemsida är byggt med sina ramar, så dess minimalistiska, välutvecklade kod leder till en enkel navigering, lättanvänd guide. Här är ett exempel på Pure's lefthand-meny i aktion:
Du kan lägga till ren på din sida via Yahoos gratis CDN. Lägg bara till följande element i din sida , innan ditt projekt stilark:
För att initiera den mottagliga bredden på din webbplats, ange en metakod för visningsporten till enhetens bredd:
På sidan Layouts erbjuder Pure ett urval av nedladdningar för olika exempelsidor för vanliga applikationsbehov:
Du kan bläddra och ladda ner någon av dem som du vill experimentera med eller lägga till i din ansökan. Dessa inkluderar:
Bas sidan ger en kort bakgrund på grunden under den rena ramen, främst Normalize.css:
Normalize.css är en liten CSS-fil som ger bättre cross-browser konsistens i standard styling av HTML-element. Det är ett modernt, HTML5-klart alternativ till den traditionella CSS-återställningen.
Du kan också ladda Normalisera separat med Yahoos CDN för oberoende användning:
Och det finns andra små grundfunktioner som klasser för att berätta för ren att ladda bilder på ett responsivt sätt genom viewport:
Men nu, låt oss ta en titt på några av de exempellayouter som Pure tillhandahåller.
Grids är en viktig aspekt av webbsidor som Pure gör ganska enkelt. Här är ett snabbt exempel på ett rena nät med fyra kolumner på en skrivbordsdisplay:
Och här är hur det minskar på en tablettstorleksvy i halv:
Och äntligen en enda kolumn på en smartphone:
Ren Grids består av två typer av klasser: galler och enheter. Barnelement i nätdivisioner måste vara unit divs. Ditt innehåll går in i enheterna. Enhetsklasser heter för att representera deras bredder. Till exempel har ren-u-1-4 en bredd på 25%.
Här är koden för den responsiva fjärde ovan:
Lorem Ipsum
Lorem ipsum dolor sitta amet, konsekventa adipisicing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Ut enim ad minim veniam.
Dolor Sit Amet
Quis nostrud övning ullamco laboris nisi ut aliquip ex ea commodo följaktligen. Duis aute irure dolor i reprehenderit in voluptate velit esse.
Proident laborum
I culpa qui officia är deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim minimal vänskapsmässig, oavgjort träning ullamco.
Praesent consectetur
Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. I feugiat tortor vid turpis rhoncus tincidunt. Duis sed porttitor ante, egen venenatis lectus.
Som du kan se ovan,
Du kan lära dig mer om rena gridar här.
formulär
Ren har stöd för att anpassa inmatningsfält inom formulär och för att utforma specialiserade fält, till exempel:
- Inline former
- Staplade former
- Formulär med två kolumner
- Formulär med flera kolumner (visat ovan)
- Grupperade ingångar
- Erforderliga ingångar
- Inaktiverade ingångar
- Läs endast ingångar
- Avrundade ingångar
- Kryssrutor och radioapparater
Du kan se allt detta beskrivet här. Låt oss undersöka en formulär med två kolumner, vilken ren hänvisar till som en riktad blankett:
Genom att använda
ren-formen-linjeklass medren-kontroll-grupp (er), Ren säkerställer att varje uppsättning fält är korrekt placerad som visas ovan.form>Det är ett ganska enkelt sätt att bygga en mycket användbar, välformad form.
tabeller
Ren gör byggnad och formatering bord ganska enkelt också. Här är ett exempel på ett horisontellt randigt bord:
Du kan se tabellen ovan kodad genom att helt enkelt lägga till
ren-table-uddaklass rader växelvis genom din kod för att ändra striping:
# Göra Modell År 1 Honda Bevilja 2009 2 Toyota Camry 2012 3 Hyundai Elantra 2010 4 Vadställe Fokus 2008 5 Nissan Sentra 2011 6 BMW M3 2009 7 Honda Medborgerlig 2010 8 Kia Själ 2010 Det finns ett antal andra tabellexempel som visas här.
menyer
Menyer i rena är också lätt att underlätta, inklusive:
- Vertikal meny
- Horisontell Meny
- Valda och inaktiverade föremål
- menyerna
- Vertikal meny med undermenyer
- Rullningsbar horisontell meny
- Scrollbar vertikal meny
- Responsiv vertikal meny
- Responsive Horisontal-Scrollbar Meny
- Responsiv horisontell till vertikal meny
Se alla menyer som illustreras här. Så här kodar du en dropdown-meny:
I grund och botten är det bara en
ren-menu-horisontell'sren-menu-listaochren-meny-objekt ren-meny-har-barn ren-meny-tillåten-svängareoch sedan en lista över barn menyalternativ:
- Hem
- Kontakta
- E-post
- Tumblr Blog
Ren ger JavaScript för att implementera ytterligare tillgänglighetsfunktioner i menyerna.
Går längre
Pures hemsida ger några utmärkta guider för att bygga på ramen:
- Använda verktyg med ren som Bower och Grunt
- Anpassa Ren och använda skivor av kodbasen på egen hand
- Utöka rena funktioner och klasser
Och du kan utforska att kombinera bitar med Pure med Bootstrap och JavaScript. Om du vill börja med Pures lilla fotavtryck och minimalistiska stil kan du fortfarande utnyttja olika Bootstrap-funktioner, bara ladda vad du behöver.
Här är ett exempel på en Bootstrap modal dialog ovanpå Pure, som du kan se på Pures förlängningssida:
I stängning
Bootstrap blir IBM av webbramar. Det är lyhörd, det är en standard, och du kan inte sparkas för att välja den (på ett nyligen kontrakt måste vi faktiskt avfyra en temabutiker för att inte genomföra Bootstrap korrekt). Men om du vill ha något mindre, snabbare och enklare, kolla Pure.css.
Om du ger det ett försök, var snäll och låt mig veta om din erfarenhet i kommentarerna nedan. Du kan också nå mig på Twitter @ reifman direkt. Och du kan också bläddra i min Envato Tuts + instruktörssida för att läsa mina andra handledning.
relaterade länkar
- Den rena bloggen
- Ren på GitHub
- Ren: Vad, Varför, och hur? (Envato Tuts +)
- Jämför med Bootstrap
