Share
Hva du skal skapeMens Bootstrap har tatt over en stor del av nettet, kan den legge litt av en ytelsesbyrde på nettsteder som kanskje ikke er nødvendige for ditt neste prosjekt. Pure.css er Yahoos responsive rammeverk; Den tilbyr et minimalistisk, godt dokumentert og fleksibelt alternativ.
I denne opplæringen skal jeg introdusere deg til Pure, "et sett med små, lydhør CSS-moduler som du kan bruke i alle webprosjekter." Vi vurderer funksjonssettet og fordelene ved å bruke Pure og deretter gå gjennom noen grunnleggende eksempelbruk.
Hvis du har noen forespørsler om fremtidige veiledninger eller spørsmål og kommentarer på dagens, vennligst legg inn dem nedenfor. Du kan også nå meg på Twitter @reifman direkte.
Pure tilbyr alle de vanlige funksjonene du trenger i et standard webdesign rammeverk. Så, om du bygger et tema for WordPress eller et eget nettsted, kan det være et godt alternativ.
For prosjektledere er det vanligvis viktig at klientprosjekter bygges med standardverktøy som lett kan forstås og vedlikeholdes, og viktigst, at det er lett å rekruttere talent som kommer inn med erfaring på plattformen. Bootstrap er perfekt for dette. Ren virker enkelt nok for meg at det også kan være et godt utgangspunkt.
Her er en oppsummering av Pures fordeler og funksjoner. Det gir:
Accentsconagua
Men mest imponerende, Pure.css er super liten, bare 4.5KB minifisert + gzipped. Her er hvor mye plass de forskjellige komponentene i Pure tar opp i produksjonsmiljøet ditt:
Ren er også godt testet og fungerer i IE 8+, Firefox, Chrome, Safari, iOS 6-8 og Android 4.x.
Og du kan fortsatt bruke den med elementer av Bootstrap, og legge dem inn der du trenger. Jeg vil vise et eksempel på dette nedenfor.
Ren er bygget på Normalize.css, som standardiserer rammens ytelse på tvers av nettlesere. Normalisere gir en standard CSS tilbakestilling som:
Pures nettside er bygd med rammen, slik at den minimalistiske, velutviklede koden fører til en enkel å navigere, brukervennlig guide. Her er et eksempel på Pures lefthand-meny i aksjon:
Du kan legge Pure til din side via Yahoo's gratis CDN. Bare legg til følgende element i siden din , før prosjektets stilark:
For å initialisere den mottatte bredden på nettstedet ditt, angi en metakode for visningsporten til enhetens bredde:
På sin Layouts-side tilbyr Pure et utvalg av nedlastinger for forskjellige eksempelsider for vanlige applikasjonsbehov:
Du kan bla gjennom og laste ned noen av dem du vil eksperimentere med eller legge til i søknaden din. Disse inkluderer:
Basissiden gir en kort bakgrunn på grunnlaget under det rene rammeverket, først og fremst Normalize.css:
Normalize.css er en liten CSS-fil som gir bedre kryssbrowser-konsistens i standard styling av HTML-elementer. Det er et moderne, HTML5-klart alternativ til den tradisjonelle CSS-tilbakestillingen.
Du kan også laste Normaliser separat med Yahoo's CDN for uavhengig bruk:
Og det er andre små grunnleggende funksjoner som klasser for å fortelle Pure å laste bildene responsivt av viewport:
Men nå, la oss ta en titt på noen av eksempeloppsettene Pure gir.
Grids er et viktig aspekt av websidelayouter som Pure gjør ganske enkelt. Her er et raskt eksempel på et fire-kolonne rent grid på en stasjonær skjerm:
Og her er hvordan det reduseres på en tablettstørrelsesvisning i halvparten:
Og til slutt, en enkelt kolonne på en smarttelefon:
Pure Grids består av to typer klasser: grids og enheter. Barnelementer i grid divs må være unit divs. Innholdet ditt går inn i enheten divs. Enhetsklasser er oppkalt til å representere deres bredder. For eksempel har ren-u-1-4 en bredde på 25%.
Her er koden for den responsive fjerde over:
Lorem Ipsum
Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut enim ad minim veniam.
Dolor Sit Amet
Quis nostrud trening er ikke nødvendig, og er derfor en følge av det. Duis aute irure dolor i reprehenderit in voluptate velit esse.
Proident laborum
I culpa qui officia deserunt mollit anim id er laborum. incididunt ut labore et dolore magna aliqua. Ut som et minimum, uansett trening ullamco.
Praesent consectetur
Integer Vita lektor accumsan, egestas dui eget, ullamcorper urn. I feugiat tortor på turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
Som du kan se ovenfor,
Du kan lære mer om Pure Grids her.
skjemaer
Pure har støtte for å tilpasse innsendingsfelter innen skjemaer og for å utforme spesialiserte felt, for eksempel:
- Inline skjemaer
- Stablede former
- To-kolonne former
- Multikolonneformularer (Vist ovenfor)
- Grupperte innganger
- Nødvendige innganger
- Deaktiverte innganger
- Les bare innganger
- Avrundede innganger
- Avkrysningsbokser og radioer
Du kan se alt dette beskrevet her. La oss utforske en to-kolonne skjema, som Pure refererer til som en Aligned Form:
Ved å bruke
ren-skjema-justertklasse medren-kontroll-gruppe (r), Ren sikrer at hvert sett med felt er riktig plassert som vist ovenfor.form>Det er en ganske enkel måte å bygge en svært brukbar, godt lagt ut form.
tabeller
Ren gjør bygnings- og formateringstabeller ganske enkelt også. Her er et eksempel på et horisontalt stripet bord:
Du kan se tabellen ovenfor kodet ved å bare legge til
ren-tabell-oddklasse rader vekselvis gjennom koden din for å endre striping:
# Gjøre Modell År 1 Honda Accord 2009 2 Toyota Camry 2012 3 Hyundai Elantra 2010 4 Ford Fokus 2008 5 Nissan sentra 2011 6 BMW M3 2009 7 Honda Civic 2010 8 Kia Sjel 2010 Det vises en rekke andre tabelleksempler her.
menyer
Menyer i Pure er også lett lett, inkludert:
- Vertikal meny
- Horisontal Meny
- Utvalgte og deaktiverte elementer
- rullegardinmenyene
- Vertikal meny med undermenyer
- Rullbar Horisontal Meny
- Scrollbar vertikal meny
- Responsive Vertical Menu
- Responsive Horisontal-Scrollbar Meny
- Responsive Horisontal-til-Vertikal Meny
Se alle menyene som er illustrert her. Slik kan du kode en Dropdown-meny:
I utgangspunktet er det bare en
ren-menu-horisontal'sren-meny-listeogren-meny-meny-ren-meny-med-barn-ren-meny-tillate-svingerog deretter en liste over barnemenyelementer:
- Hjem
- Ta kontakt med
- e-post
- Tumblr Blog
Pure gir eksempler på JavaScript for å implementere ytterligere tilgjengelighetsfunksjoner i menyene dine.
Gå videre
Pures nettside gir noen gode guider for å bygge på rammen:
- Bruke Verktøy med Pure som Bower og Grunt
- Tilpasse ren og bruke skiver av kodebasen på egenhånd
- Utvide rene egenskaper og klasser
Og du kan utforske kombinere biter av Pure med Bootstrap og JavaScript. Hvis du vil begynne med Pures lille fotavtrykk og minimalistiske stil, kan du fremdeles utnytte ulike Bootstrap-funksjoner, bare laster inn det du trenger.
Her er et eksempel på en Bootstrap modal dialog på toppen av Pure, som du kan se på Pures utvidelsesside:
I Avslutning
Bootstrap blir IBM av web-rammer. Det er responsivt, det er en standard, og du kan ikke bli sparket for å velge den (på en nylig kontrakt måtte vi faktisk brenne en temautvikler for ikke riktig implementering av Bootstrap). Men hvis du vil ha noe mindre, raskere og enklere, så sjekk ut Pure.css.
Hvis du gir den en prøve, vennligst gi meg beskjed om din erfaring i kommentarene nedenfor. Du kan også nå meg på Twitter @ reifman direkte. Og du kan også bla gjennom min Envato Tuts + instruktørside for å lese mine andre opplæringsprogrammer.
Relaterte linker
- Den rene bloggen
- Ren på GitHub
- Ren: Hva, hvorfor, og hvordan? (Envato Tuts +)
- Sammenlign med Bootstrap
