Ren Vad, Varför, och hur?

Denna handledning kommer att introducera dig till Pure, ett CSS-bibliotek av små moduler, som kan hjälpa dig att skriva helt responsiva layouter, på ett mycket snabbt och enkelt sätt. Under vägen leder jag dig genom att skapa en enkel sida för att lyfta fram hur du kan använda några av bibliotekets komponenter.

Varför skapa responsiva layouter?

Under de senaste åren i webbutveckling, tre Ord som studsar om och om igen är: Responsive Web Design (RWD). Vid den här tiden borde du redan veta vad det är, men bara om du missade det, här finns några resurser för att fylla i luckorna:

• Artiklar på WebDesign Tuts+
• Kurser på Tuts + Premium
• Responsive Web Design av Ethan Marcotte

Men frågan är: Varför är du lyhörd? Svaret är att vi inte har någon kontroll över vilken upplösning nästa enhet kommer att använda när de besöker vår hemsida. Inte längre kan vi bara visa meningar som "Mest visade vid 1024x768 upplösning" (även om du fortfarande kan hitta dem på webben). En av de främsta orsakerna till detta fenomen var från tillväxten i bredd av PC-skärmar och även från spridningen av mobila enheter som är anslutna till Internet. Dessutom baseras på StatCounter, för närvarande ~ 16% av användarna är anslutna via en mobil enhet. Nu säger jag inte det RWD handlar bara om att optimera en webbplats för en viss skärmstorlek. Vad jag menar är att vi skapar en bra upplevelse för användare som besöker vår webbplats oavsett vilka enheter de använder.

Med det sagt är det också klart att inte alla vi arbetar för ett företag där varje person har en enskild roll (formgivare, utvecklare, testare osv.). Så, låt oss säga att du är en soloutvecklare, arbetar som frilansare och du vet inte mycket om webbdesign. Det finns många bibliotek tillgängliga som kan påskynda ditt arbetsflöde. De mest kompletta är säkert Boostrap och Foundation, men ibland kan de bli överkill och du kanske behöver något mindre. I dessa fall har ett nytt intressant projekt lanserats av Yahoo som vi kan använda, kallat Pure.

Vad är rent?

Att citera den rena webbplatsen är det en uppsättning små, lyhörda CSS-moduler som du kan använda i varje webbprojekt. Som sagt tidigare är det fullständiga biblioteket riktigt lätt, det är bara 4,2 kB minifierat och gzipped, men för att hålla din webbplats jämnare, kan du bara inkludera några av de tillgängliga modulerna. I princip består den av följande moduler:

• Bas
• Rutnät
• formulär
• Knappar
• tabeller
• menyer

En av de saker jag verkligen uppskattar om ren är att den bygger på Normalize.css, ett välkänt bibliotek som gör elementen mer konsekvent och i linje med moderna standarder och fungerar också i äldre webbläsare. Eftersom det är väldigt litet, erbjuder det inte en komplett lösning på alla dina problem, men det har flera förbyggda gemensamma UI-element som du kan hitta på många webbplatser på webben. En annan intressant egenskap hos Ren är att den är mycket utdragbar och anpassningsbar. Författarna använde SMACSS för att bygga den och alla sina klasser börjar med ren-, så att du enkelt kan känna igen dem.

Även om rent är ett intressant projekt att titta på, kom ihåg att det är riktigt nytt och kanske inte passar bra för stora projekt. Faktum är att den nuvarande versionen (0.2.0 vid tidpunkten för detta skrivande) har flera problem som du förmodligen inte skulle hitta i mer mogna ramar och dess dokumentation kan också förbättras. Ändå tyckte jag om det och var en föregångare, du har fördelen att studera och lära ren, från första början, vilket kan bli det nästa kända projektet på webben.

Låt oss se rena i åtgärd

De säger att en bild är värd tusen ord. För oss, som utvecklare och designers, är en demo som vi kan leka med ännu bättre. Så, för att se vad Pure kan göra för oss, låt oss skapa en grundläggande demo-app. Vår demo kommer att bestå av en enkel hemsida som innehåller lite information om mig själv (ibland skrämmer min fantasi mig). Bilden nedan visar vad slutresultatet ska se ut på en stor skärm:

Och följande bild visar istället hur den ska se ut på en smartphone:

Steg 1: Skapa den horisontella menyn

Som sagt har Pure flera förbyggda gemensamma element som du kan hitta på många webbplatser på webben. En horisontell meny är säkert en av dem och ger oss chansen att ta en titt på några av klasserna i menymodulen.

För att skapa detta med hjälp av HTML5 har vi vanligtvis en