Arbeide med Pure CSS-moduler, del 1

Pure er et sett med små, responsive CSS-moduler opprettet av Yahoo! at du kan brukes i webutvikling og prosjekter. Alt du trenger å gjøre er å ringe stilarket i elementet i websiden dokumentet fra CDN-kilden (Content Delivery Network) med referansen som vises nedenfor:

Dette gir deg tilgang til Pure CSS med et minimalt fotavtrykk; hele modulsetet har blitt klokket til 4, 2 KB når det ble minifisert og gipset til en komprimert fil. Individuelt blir de seks modulene distribuert og dimensjonert som listet nedenfor:

  • Base 1, 2 KB
  • Tavler 0, 7 kB
  • Skjemaer 1, 8 KB
  • Knapper 0, 9 KB
  • Tabeller 0, 6 KB
  • Menyer 1.1KB

Modulene er også tilgjengelige hver for seg: du kan tilpasse implementeringen fra to "rollups", en responsiv og en ikke-responsiv, eller fra GitHub-nedlastingen som en komprimert zip-fil. Hvis du vil velge bare noen få av modulene som alternativet er tilgjengelig, og jeg vil gjennomgå hver modul for å gi deg en generell ide om hva som er tilgjengelig med hvert valg. Denne delen vil gå gjennom modulene Base, Grids og Forms, og del to vil fortsette med en gjennomgang av knappene, tabellene og menymodulene.

Pure CSS tilbyr også YUI Skin Builder, som du kan bruke til å lage din egen CSS. Det er et flott verktøy for å lage dine egne temaer ved å bruke den minimalistiske stylingen ( figur B) . Jeg vil gjennomgå YUI Skin Builder i detalj i et annet blogginnlegg i fremtiden.

Figur B

Du kan også trekke Pure CSS-moduler med kombinasjoner slik at forespørslene dine vil trekke en enkelt fil tilbake slik eksemplet vist nedenfor trekker fra basis-, rutenett- og skjemamodulene:

Basismodul

Grunnlaget for Pure CSS Base Module er bygget oppå Normalize.css, som bare er rettet mot stilene som trenger normalisering for å gjengi alle elementene mer konsekvent og i tråd med moderne nettleserstandarder. Basismodulen håndterer skrifter i ems, overskrifter, ordnede og uordnede lister, blokkeringsnotater, forkortelser, adresser og inline stiler som utgangspunkt. Hvis du bare vil bruke basemodulen, kan du trekke den fra elementet ved å bruke referansen nedenfor:

Rister

Modulen Pure CSS gir et responsivt og tilpassbart rutenett med rene g- stiler på rad eller "rutenett", og rutenett-u - * - * -stiler i kolonner eller enheter; hver pure-g kan inneholde mange enheter. Hver enhet kan ha forskjellige klassenavn som representerer deres bredder, for eksempel har pure-u-1-2 en bredde på 50%, og pure-u-1-4 har en bredde på 25%. Den eneste begrensningen er at alle "enheter" er underordnede elementer i et "rutenett", så hvis du har et element med et rent-u- * klassens navn, må det være innenfor overordnede element som pure-g eller pure- gr klasse navn. Som standard har Pure CSS Grids ikke margin eller polstring, så hvis du trenger å legge dem til, må du integrere dem i barnebeholderne. Eksemplet på kodebiten som vises nedenfor, fremhever bruken av rutenettet.

1. omgang

2. omgang

1. tredjedel

2. tredje

3. tredje

1. kvartal

2. kvartal

3. kvartal

4. kvartal

 Kodestykket over med lagt konturstiler for illustrasjonsformål vises som vist på figur C : 

Hvis du bare vil bruke rutenettmodulen, kan du trekke den fra elementet ved å bruke referansen nedenfor:

skjemaer

Pure CSS Forms Module krever bare at du legger til ren-form klassens navn til ethvert element; et stablet skjema med inngangselementer like under inngangsetiketter er tilgjengelig med det renformede stablede klassens navn lagt til et hvilket som helst element sammen med renformet klassens navn. For justerte skjemaer der etikettene er rettjustert mot skjemainngangskontrollene, bruker du det rene formjusterte klassnavnet sammen med renformet klassens navn i elementene dine. Flere eksempler på kodebiter er gitt nedenfor for å illustrere bruken av Forms-modulen.

En enkel og kompakt inline form:

 En prøve kompakt inline form 
 Husk meg 
 Logg inn 
 Kodestykket over vises som vist i figur D : 

Form med flere kolonner ved å bruke Pure Grids, inkludert skjemaelementene i en stablet form:

 Rent formnett og stablet 
 Fornavn 
 Etternavn 
 E-post 
 By 
 Stat 
 AL 
 CA 
 IL 
 LA 
 NC 
 Jeg har lest vilkårene 
 Sende inn 
 Kodestykket over vises som vist i figur E : 

Hvis du bare vil bruke Pure CSS Forms Module, vil du trekke den fra elementet ved å bruke referansen nedenfor:

I mitt neste innlegg om Pure CSS, vil jeg gå gjennom Pure CSS-moduler for knapper, tabeller og menyer, i tillegg til en kort gjennomgang av alternativer for å utvide stilguiden basert på skalerbare og modulære arkitektur for CSS (SMACSS) -konvensjoner. Til slutt vil jeg også ta med en gjennomgang av noen av de vanlige layoutene som leveres av Pure CSS-systemet, slik at du kan starte ditt neste webdesignprosjekt raskt.

© Copyright 2021 | pepebotifarra.com