Ren Hva, hvorfor, og hvordan?

Denne veiledningen vil introdusere deg til Pure, et CSS-bibliotek laget av små moduler, som kan hjelpe deg med å skrive helt responsive layouter, på en veldig rask og enkel måte. Underveis vil jeg veilede deg gjennom etableringen av en enkel side for å markere hvordan du kan bruke noen av bibliotekets komponenter.

Hvorfor Opprett Responsive Layouts?

I løpet av de siste årene i webutvikling, tre Ord som hopper rundt, igjen og igjen, er: Responsive Web Design (RWD). På dette tidspunktet bør du allerede vite hva det er, men bare hvis du savner det, er det noen ressurser for å fylle ut hullene:

• Artikler på WebDesign Tuts+
• Kurs på Tuts + Premium
• Responsive Web Design av Ethan Marcotte

Men spørsmålet er: Hvorfor gå responsivt? Svaret er at vi ikke har noen kontroll over hvilken oppløsning den neste enheten skal bruke når de besøker nettstedet vårt. Ikke lenger kan vi bare vise setninger som, "Best viewed at 1024x768 resolution" (selv om du fortsatt kan finne dem på nettet). En av hovedårsakene til dette fenomenet var fra veksten i bredden på PC-skjermer og også fra spredningen av mobile enheter som er koblet til Internett. I tillegg, basert på StatCounter, er for tiden ~ 16% av brukerne koblet til via en mobil enhet. Nå sier jeg ikke det RWD handler bare om å optimalisere et nettsted for en gitt skjermstørrelse, det jeg mener er at vi skaper en god opplevelse for brukere som besøker nettstedet vårt, uansett hvilke enheter de bruker.

Med det sagt er det også klart at ikke alle av oss jobber for et selskap der hver person har en enkelt rolle (designer, utvikler, tester osv.). Så, la oss si at du er en solo-utvikler, jobber som freelancer og du vet ikke mye om webdesign. Det finnes mange biblioteker som kan øke hastigheten på arbeidsflyten din. De mest komplette er sikkert Boostrap og Foundation, men noen ganger kan de være overkill og du må kanskje ha noe mindre. I disse tilfellene er et nytt interessant prosjekt lansert av Yahoo som vi kan bruke, kalt Pure.

Hva er rent?

Siterer den rene nettsiden, er det et sett med små, responsive CSS moduler som du kan bruke i hvert webprosjekt. Som sagt tidligere, er det komplette biblioteket veldig lett, bare 4,2 kB minifisert og gzipped, men for å holde nettstedet ditt enda lettere, kan du bare inkludere noen av de tilgjengelige modulene. I utgangspunktet består den av følgende moduler:

• Utgangspunkt
• Nett
• skjemaer
• knapper
• tabeller
• menyer

En av de tingene jeg virkelig setter pris på, er at den er basert på Normalize.css, et velkjent bibliotek som gjør elementene mer konsekvente og i tråd med moderne standarder og fungerer også i eldre nettlesere. Siden det er veldig lite, gir det ikke en komplett løsning på alle dine problemer, men den har flere forhåndsbygde vanlige UI-elementer som du finner i mange nettsteder på nettet. En annen interessant egenskap ved Pure er at den er svært utvidbar og tilpassbar. Forfatterne brukte SMACSS til å bygge den og alle sine klasser begynner med ren-, slik at du enkelt kan gjenkjenne dem.

Selv om Pure er et interessant prosjekt å se på, husk at det er veldig nytt og kanskje ikke passer bra for store prosjekter. Faktisk har den nåværende versjonen (0.2.0 på tidspunktet for denne skrivingen) flere problemer som du sannsynligvis ikke ville finne i mer modne rammer, og dokumentasjonen kunne også forbedres. Likevel likte jeg det og var en forløper, du har fordelen av å studere og lære Pure, fra starten, som kan ende med å bli det neste kjente prosjektet på nettet.

La oss se ren i handling

De sier at et bilde er verdt tusen ord. For oss, som utviklere og designere, er en demo vi kan leke med, enda bedre. Så, for å se hva Pure kan gjøre for oss, la oss lage en grunnleggende demo-app. Vår demo vil bestå av en enkel hjemmeside som inneholder litt informasjon om meg selv (noen ganger skaper fantasien meg). Bildet under viser hvordan sluttresultatet skal se ut på en stor skjerm:

Og følgende bilde, i stedet, viser deg hvordan det ser ut på en smarttelefon:

Trinn 1: Lag horisontalmenyen

Som sagt, har Pure flere prebuilt felles elementer som du finner i mange nettsteder på nettet. En horisontal meny er sikkert en av dem og vil gi oss sjansen til å se på noen av klassene i menymodulen.

For å opprette dette ved hjelp av HTML5, har vi vanligvis en