Fundament er en av de to big-name HTML / CSS / JS rammene for front-end utviklere. Det skjedde ikke ved et uhell. I dag er vi her for å fortelle deg alt om hvorfor du burde bruke den.

For det første, for de som kanskje skriver sin egen HTML, men aldri har jobbet med et rammeverk før, er det en forklaring:

Rammer er i utgangspunktet store mengder forhåndskrevet kode som hjelper deg med å komme i gang med prosjektene dine raskere. Når det gjelder front-end-kode som HTML og CSS, betyr dette at du vil finne ting som layoutgrensesnitt, grunnleggende knappestiler og ofte brukte grensesnittelementer. Større rammer kan også inkludere jQuery-plugins.

De er ikke ment å bli brukt som komplette nettsider eller temaer, men som et sett med byggeklosser. Du tar det du trenger, modifiserer det for å passe prosjektet, og fortsetter med arbeidet ditt (og livet ditt, antageligvis). De er ment å være tilpasset og tinkered med.

Dette kan i utgangspunktet være en skremmende oppgave, som rammer som Stiftelsen og dets hovedrival, Bootstrap, har blitt enorm. De inneholder hver tusen linjer med CSS. Før du forplikter deg til å bruke noen rammer for et prosjekt, må du vurdere de potensielle fordelene sine mot tidskostnaden.

Når det er sagt, når du blir vant til et rammeverk, kan det redusere tiden du bruker til å skrive opp merking og CSS betydelig.

Noen historie

Stiftelsen begynte sitt liv som ingenting annet enn en generell stilguide og noen felles kode. Gutta på ZURB bestemte seg for å fremskynde prototypeprosessen ved å ta noen HTML og stiler som de pleide å gjenbruke, og lage et rammeverk ut av det. Det er det. Det er virkelig hvordan de fleste gode ting blir gjort. Noen trengte det, så de gjorde det.

Over tid bestemte de seg for at det de hadde laget, var for godt til å holde seg selv, slik at de utgav versjon 2.0.0 til verden. De gjorde alt responsivt, polert det opp, og åpnet hentet det for oss alle. Nå designere og utviklere verden over bruker ZURBs kode for å gjøre sine produkter raskere og kanskje tør jeg si det bedre.

Siden utgivelsen den 18. oktober 2011, ble den MIT-lisensierte rammeverk har blitt en av de "store to", og sett bruk på tusenvis av nettsteder.

Dens popularitet snakker til sin brukervennlighet og allsidighet likt. Hvis du bestemmer deg for at Stiftelsen er riktig for deg, vil det ikke la deg ned.

Egenskaper

Stiftelsen har vært i aktiv utvikling i nesten tre år nå. Det er ingen overraskelse da funksjonslisten er omfattende.

Kjernen består av CSS-filer (generert fra SASS-filer, også tilgjengelig for nedlasting), og flere jQuery-plugins. Det er ingen HTML inkludert i hovednedlastingen (bortsett fra en veldig grunnleggende demo side, får du å skrive det hele selv.

Når det er sagt, er det detaljert dokumentasjon om hver enkelt komponent. Hver del av dokumentasjonen leveres med eksempel HTML for å bruke og tilpasse etter behov. Hvis du vil dykke rett inn, sjekk ut dokumentasjon.

Hvis du vil tilpasse rammen fra grunnen, er det to ting du kan gjøre:

valg 1

Du kan velge å laste ned kun komponentene du vil ha rett på hoved nedlastingsside. Hvis alt du vil ha, er rutenettet, navigasjons-CSS og en jQuery-plugin eller to, det er lett nok. Bare uncheck alle tingene du ikke vil inkludere, og gå!

Denne "rammegeneratoren" inneholder også muligheter for å tilpasse rutenettet, hovedfargene og noen andre alternativer. Dette er alternativet jeg ville velge for, si prototyping eller utvikle et internt selskapsapplikasjon. Standard presentasjonsmodeller er for det meste gode nok til disse tingene, så hvorfor gå og endre dem når du ikke trenger?

Alternativ 2

Nå er dette for de som skal bruke rammen for offentlige prosjekter. Du vil ikke bruke standard presentasjonsformatene, ettersom de med all sannsynlighet ikke samsvarer med merkevaren din. For dyptgående tilpasning må du gå til kilden.

Og med kilden mener jeg Sass-filene. Med dem kan du gå inn og tilpasse hver variabel til din smak, og gjør rammen virkelig din.

( Et notat på Sass-filer: Igjen, for de som kanskje ikke er kjent med begrepet, sass er en CSS preprocessor, som introduserer ting som variabler, mixins og andre programmeringsfunksjoner til vanlig CSS.

Gjør et Google-søk etter noe som "Sass compiler for [operativsystemet ditt her]", og du vil finne det du trenger. Personlig kan jeg ikke anbefale kryssplattformen Koala App nok.)

Når dine Sass-filer er kompilert i en vanlig CSS-fil, bare lenke til den i seksjonen din som om du ville noen annen CSS-fil. Koala-appen, for eksempel, vil kompilere Sass-filene automatisk hver gang du lagrer dem, slik at nettleseren din alltid vil se de siste endringene.

Struktur

Gitteret

Jeg kan ikke si sikkert at alle HTML-rammer kommer med et rutenett for layout, men de fleste gjør det. Foundation grid, uten noen tilpasning, er en klassisk tolv-kolonne, nestable og responsive.

Oppmerkningen og klassene er enkle, inkludert klasser for å tilpasse oppsettet med skjermstørrelse. Hvis du har jobbet med rutenett før, som 960 Grid System, vil du ikke finne Foundations grid vanskelig å mestre.

Merk: Det er kodet for en mobil-første tilnærming, så du vil ha det i tankene når du lager ditt nettsted.

Blokkgitteret

Tenk på dette som et "mini grid". Den er utformet for å holde et sett antall elementer jevnt i størrelse og mellomrom uansett skjermstørrelsen.

Eksempel: Du har tre identiske størrelser som du vil beholde side om side på tvers av hver enhet. For å gjøre det, ville du bruke dette blokkruten eksempel som jeg sjamløst stjal rett fra dokumentasjonen:

Merk at hvis du vil, kan du angi et annet antall kolonner for forskjellige skjermstørrelser. Elementene vil beholde deres likestrømning. Denne komponenten er perfekt for ting som fotogallerier.

Responsive ting

Mediaspørsmålene holdes enkle, men er designet for å imøtekomme en rekke skjermstørrelser, alt fra smarttelefoner til latterlig store, iMac-skjermer.

Å være designet fra grunnen til å være mobil-først er en god start. Stiftelsen går et skritt videre ved å inkludere spesifikke komponenter for å hjelpe deg med å avgrense de responsive delene av nettstedene dine ytterligere.

For det første er det de vanlige klassene å gjemme eller vise forskjellige elementer i forskjellige visningsstørrelser. Deretter får du litt mer avanserte ting, som Utveksling.

Utveksling er et JS-bibliotek som dynamisk laster inn forskjellig innhold avhengig av medieforespørsler. Du kan bruke dette biblioteket til å bestemme om du for eksempel skal legge inn et .JPG-bilde av et kart, eller et Google Maps-embed. Eller et vanlig bilde i stedet for et retina-skjermstørrelsesbilde.

Ved hjelp av dette biblioteket kan du lagre brukerne noen data og litt RAM. Bare vær sikker på å implementere en tilbakebetaling for de brukerne med JavaScript deaktivert.

Navigasjon

Navigasjonsalternativer er rikelig i fundamentet, alt fra navigasjonslinjen for all bruk (komplett med rullegardinmenyer), til ikonstenger, breadcrumb navigering, paginering, sidebar og mer.

Det er imidlertid to navigasjonskomponenter, som gjør at Stiftelsen skiller seg ut fra andre rammer.

Magellan

Den første er Magellan Sticky Nav. Sett denne nav-baren hvor som helst på siden, og når du ruller forbi startstedet, følger den deg ned. Hvis du bruker den til å lenke til seksjonen på den nåværende siden, kan den markere hver enkelt (i selve linjen) mens du ruller ned.

Offcanvas

Den andre er Offcanvas, som er en vertikal navigasjonslinje som er gjemt som standard. Trykk på menyknappen, og menyen glir på siden for å se på nettleseren din.

Husk at, som alle Foundation-komponenter, kan disse implementeres med et minimum av markering. Gutta på ZURB har lagt mye arbeid på å gjøre disse ganske avanserte brukergrensesnittelementene enkle å implementere, og det viser.

Media

De medierelaterte komponentene i et hvilket som helst rammeverk er ofte hvor rammeverkere har en tendens til å vise seg litt, og Stiftelsen er ikke noe unntak.

For eksempel er inkludert som standard den Fjerner lysboksen. Det er egentlig en død-enkel lysbilde bildegalleri. Bare kast inn noen miniatyrbilder, inkludere relevante klasser, og du har et berøringsrettet bildegalleri som håndterer bilder av variabel høyde uten problemer.

En annen er Flex Video, som i teorien kan brukes til omtrent ethvert innebygd objekt. Bare pakk en div med flex- videoklassen rundt din Youtube video, iframe, embed eller objektelement, og du er god til å gå. Disse objektene vil ikke automatisk skalere med størrelsen på nettleseren.

Til slutt er det stiler inkludert for miniatyrbilder. Ikke noe fancy eller spesielt å se her ... de er bare hyggelige å ha.

Men hva med Orbit?

Folk som har brukt Foundation før versjon 5, kan lure på ZURBs Orbit-plugin. Det er en karusell, også noen ganger kalt en lysbildefremvisning, komponent som er responsiv, funksjonstastet, og det fungerer ganske bra.

Men mens det fortsatt er i rammen, er det ikke lenger støttet av ZURB, og det er heller ikke under aktiv utvikling.

Stiftelsens skapere anbefaler seg selv å lete etter alternativer, for eksempel Owl Carousel, eller Slick.

skjemaer

Selvfølgelig har grunnleggende stiler for skjemaer ikke blitt glemt. Faktisk har de blitt raffinert gjennom årene til arbeid med ypperlig diskret skjønnhet. Du tror kanskje jeg overdriver, men jeg tror ikke jeg er. Års erfaring har blitt omdannet til grunnleggende formstiler som jeg tror kunne brukes på nesten ethvert prosjekt, med et minimum av tweaks.

Det tar dyktighet å gjøre noe så kjedelig som former ser både generisk og pen på en gang. Det er ikke rart at mange av rammene jeg har prøvd har etterliknet Stiftelsens stil.

Når det er sagt, er det ikke alle kjedelige tekstfelt og radioknapper. Du vet at de måtte gjøre noen ting av seg selv.

Ta gliderkomponenten, for eksempel: Du kan implementere glidebrytere med HTML5, men de er kjedelige, og bruker standardutseendet til hvilket OS du bruker. Foundation, derimot, inkluderer glidere som kan styles med CSS for din tilpasningsglede.

Inkludert er også et skjema validering bibliotek (mer JavaScript her ...) som lar deg sørge for at brukerne skriver inn de riktige dataene. Når de skriver inn noe galt, for eksempel en ugyldig e-postadresse, vises et varsel og forteller dem det.

knapper

Kan ikke ha et rammeverk uten noen standard knappestiler. Jeg mener du kan, men det ville ikke være riktig, på en eller annen måte. Standard Foundation-knappene varierer ikke for mye fra noe annet rammeverk. Det vil si, de er implementert med minimal oppslag, og de har ulike størrelser og fargespesifikke klasser.

Du kan imidlertid gruppere dem inn i knapp grupper å kaste relaterte tiltak sammen. Disse knappgruppene (de horisontale, uansett) er designet for å fungere perfekt med rutenettet. De har også ekstra klasser for størrelse, farge og avrundede hjørner ... alle de vanlige tingene.

Endre merkingen litt mer, og Stiftelsen kan også gi deg dropdown knapper , og de split knapper . Du vet, for det meste knapp, del dropdown-meny?

De to siste komponentene bruker Stiftelsens innebygde dropdown-plugin. Dette betyr blant annet at de er JavaScriptavhengige. Likevel er de enkle å implementere. Det handler om klassene.

typografi

Foundation bruker et veldig vanlig, sans-serif typografisk oppsett for å komme i gang. Det er enkelt, enkelt å tilpasse med noen grunnleggende Sass-variabler, og det er alt relativt stort. Det stemmer, Foundation bruker rem .

Siden Foundations skapere tror på brukervennlighet, er alt stort nok til å være lett å lese på små skjermer. Lese i moderat avstand på vanlige bærbare / desktop skjermer gir meg heller ingen problemer.

Ekstra typografiske funksjoner inkluderer:

Inline lister

Ønsker du en horisontal tekstbasert liste? Du vet, typen du kan sette i en nettside footer? Du er dekket. Ifølge skaperne bør du:

De har rett.   suger for romlig kontroll.

etiketter

Disse er egentlig små biter av tekst med farget bakgrunn. Hva kan du bruke dem til? Merker og andre metadata, eller som navnet tilsier, kan du bruke dem til å merke ting, dvs. skjemafelter.

Inkludert er vanlige etiketter, varslingsetiketter, advarselsetiketter. Det er bare en annen av de små, nyttige tingene jeg elsker om Foundation.

Se også: tastetrykk

Callouts & Prompts

Noen ganger på et nettsted, og langt oftere i et program, må du ha måter å fange en brukers oppmerksomhet på. Du gjør dette enten for å presentere dem med nødvendig informasjon, tegne øynene deres til et ufullstendig formfelt eller tiltak, eller for å lære dem hvordan man bruker et program.

Hvis du er ond, kan du gjøre det for å spille annonser ... med lyd.

Du kan gjøre det med et modalt vindu. Stiftelsen har flotte modale vinduer med omfattende atferdsalternativer, størrelsesvalg, hendelsesbindinger ... selv et alternativ for å fjerne bakgrunnen.

Deretter er det varslene. Disse store, fargerike varslingsbokser er statisk posisjonert og strekker seg til bredden av beholderen. Du kan alltid gjøre dem til en fast posisjon for alarmer på stedet. Har jeg nevnt fargen, avrundede hjørner og andre presentasjonsklasser ennå? Jeg skal slutte, fordi de gjør det for mange ting.

Deretter har vi verktøytips. Disse kan brukes på omtrent hvilket som helst element, og settes til å bare vises på store skjermer eller på alle skjermbilder. (På mobile enheter må du trykke på elementet for å se verktøytipset.) De kan også plasseres på hver side av elementet.

Joyride tar verktøytips til neste nivå. Det er et plugin som utnytter verktøytips (og andre ting) for å gi brukerne en gjennomgang av nettstedet ditt eller programmet. Flott for førstegangsbrukere, hvis grensesnittet er nødvendigvis komplekst.

Innhold

De grunnleggende HTML / CSS-rammene gir deg muligheten til å organisere innholdet på en side, og gi det litt styling. Dette er en av de store rammene, men det betyr ekstra komponenter, selv for innholdet.

Først opp, har vi prisbord: ZURB-gutta kjenner publikum ganske bra. Mange mennesker vil ha enkle måter å vise prisinformasjon på for sine ulike produkter og tjenester. Stiftelsen gir det til dem i et ganske standard format.

Deretter fremdriftsstenger . Jeg kommer ikke til å utdype seg på disse. De er akkurat det du forventer.

Stiftelsen inneholder også det grunnleggende trekkspillet plugin, og det forventede tabbed content plugin. Jeg synes det er interessant å merke seg at du kan sette tabbedinnhold inne i et trekkspill.

Til slutt, dette er noe jeg har sett i få andre rammer, og jeg synes det er utrolig interessant: en komponent med lik kolonnehøyde. De kaller det Equalizer , et navn bare halvt så dårlig som dets funksjon. Det krever selvfølgelig JavaScript, men det er en veldig enkel måte å gjøre alle kolonnene i en gitt seksjon med samme høyde på en responsiv måte.

Bare legg inn et par dataattributter, og du er god til å gå. Her ser det ut som når det kombineres med prisbordskomponenten:

Hvordan komme i gang

Så nå har du gått gjennom den omfattende funksjonslisten, og du vil ha dem! Ikke sant? Vel, hvis jeg er riktig, så er det hvordan du kommer i gang.

Vi skal lage en fin, enkel, grunnleggende mal i Foundation for Practice. Du kan følge med i din egen tekstredigerer, kopier og lim inn koden, eller bare last ned malen jeg har gjort tilgjengelig fordi du er en snyder.

Etter denne delen vil jeg legge opp en rekke andre gode opplæringsprogrammer og opplæringsressurser for å hjelpe deg med reisen din til å bli en stiftelsesmester.

Gå ned til standardpakken på nedlastingsside , og la oss komme i gang.

Ta med basisfilene i prosjektet ditt

Nå, når du laster ned pakken, vil filstrukturen inne i det se slik ut:

project-folderindex.html (Demo file.)humans.txt (Like a readme file.)robots.txt (Just leave this alone.)/cssfoundation.cssfoundation.min.css *normalize.css */img (Note: Empty)/jsfoundation.min.js */foundationfoundation.abide.jsfoundation.accordion.jsfoundation.alert.js(Etc. Huge list here.You can keep these files to see/playwith the source, but you don't actuallyneed them to use the framework.)/vendorfastclick.jsjquery.cookie.jsjquery.js *modernizr.jsplaceholder.js

Du vil legge merke til at jeg har plassert en stjerne etter noen av disse filene. Dette er de eneste filene du faktisk trenger for å få rammen til å gjøre ting. Resten er kildefiler, eller fine ekstraverktøy. Disse verktøyene kan sikkert hjelpe deg med å gjøre gode ting, men er ikke strengt nødvendige.

For eksempel implementerer placeholder.js stedholderattributtet til HTML5-skjemaer for nettlesere som ikke støtter det.

Filene jeg merket er de eneste som du absolutt må koble til i delen av nettsiden / søknaden din. I forbindelse med denne opplæringen skal jeg slette de fleste av disse filene, og bare beholde de som er avgjørende. Jeg begynner også fra begynnelsen med en tom indeks.html .

Til å begynne med vil vår "hjemmeside" se slik ut som:

< !DOCTYPE html>

Du har kanskje lagt merke til en ekstra CSS-fil der inne. Vi trenger det for egendefinerte stiler.

Lag et enkelt oppsett

Så siden dette er en hjemmeside, la oss ta begrepet videre. Vi gjør det til en eksepsjonelt generisk destinasjonsside for noen forretninger eller andre. Ingen to-kolonne layout for denne opplæringen! De er så ute av mote.

Legg merke til at jeg hopper over alt som en navigeringslinje eller en oppfordring til handling i dette eksemplet. Dette er helt ting du bør gjøre i virkelige prosjekter.

Overskriften

I henhold til gjeldende lover av designtrender må vi lage et stort overskrift med vårt firmanavn, et slagord og et massivt bakgrunnsbilde (ikke inkludert i denne opplæringen).

HTML for dette er enkelt nok:

Our Company Name
Insert a pithy slogan here

Råklassen definerer ikke bare de ytre grensene til vårt rutenett, men senterer det for oss. Overskriftselementet er der både for semantiske grunner og for å gi en plassering for å legge til et bakgrunnsbilde senere.

Vi vil at vår topprutenett skal strekke seg til et hundre prosent uansett skjermstørrelse, så vi trenger bare å bruke den lille 12- klassen. Skjermbilder i middels og stor størrelse vil arve disse stilene med mindre andre er spesifisert.

Vi har vår topptekst og vår sentrert tekst. Dette gir oss imidlertid ikke den høye heisen som vi vil ha. For dette trenger vi noen tilpassede stiler:

/*  HEADER STYLES  */header#page-header {height: 500px;background: #cecece;}header#page-header > div.row {position: relative;top: 50%;transform: translateY(-50%);}

Som du ser, har jeg gitt vår overskrift en bakgrunnsfarge i stedet for et faktisk bilde, og sentrert sentrert innhold i toppteksten. Ganske pent, va? Slik ser siden vår så langt ut:

Introduksjonen og tjenestene

Så du har dristig kunngjort deg selv med overskriften. Det er på tide å fortelle brukeren hvem du er og hva du gjør. En liten beskrivelse om hver tjeneste eller produkt ... det er slik vi gjør det i denne moderne tidsalderen.

La oss komme i gang.

Who We Are
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam. Facer noster usu no, duo sumo maiorum eu. Sea id semper maluisset iracundia.
What We Do
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet. ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.

Ok, som du kan se, er alt jeg har gjort, legge til flere rader og kolonner med innhold. Jeg har brukt de riktige klassene for å gjøre kolonnene skalere til enheten de blir sett på.

I #introduksjon- delen gjorde jeg ikke bare sentralkolonnen full bredde. I stedet for å sørge for at introduksjonsavsnittet var lesbart, gjorde jeg det mindre og ga det passende forskyvningsklasser for hver skjermstørrelse.

Vertikal avstand av innholdsdeler er noe du må gjøre for deg selv i hvert rammeverk, så igjen, jeg trengte noen tilpassede CSS:

section#page-content, section#page-content > #services {padding-top: 3em;}section#page-content {padding-bottom: 3em;}

Ikke noe spesielt der. Siden omtrent alt, inkludert rutenettet, er avstand med ems, brukte jeg dem til polstring for å holde ting visuelt konsistente. Tenk på embasert elementavstand som et innebygd grunnlinje som du enkelt kan dra nytte av.

Slik ser det hele ut nå:

Bunnteksten

La oss gi oss en død-enkel footer, med et par navigasjons lenker, og en opphavsrettsmelding, fordi hvorfor ikke?

Her har jeg tatt med en Inline List (se ovenfor) for disse sidene, og to kolonner som går vertikalt i telefonstørrelse. Her er CSS jeg brukte:

footer#page-footer {padding-top: 3em;padding-bottom: 3em;border-top: 1px solid #cecece;}

Og voilà! En bare-bein destinasjonsside for å tilpasse deg ditt hjertes innhold. Her ser alt slik ut:

Ta tak i zip-filen hvis du vil, og spill med koden som allerede er der. Start fra bunnen av, og ta en titt på kilden. Eller du kan bare ta en titt nedenfor på treningsmaterialene som andre har laget ...

Opplæring og opplæring

Treningsmateriell av ZURB

Som du kanskje regner med, har gutta på ZURB gått utover dokumentasjon ved å gi oss noen opplæringsmateriell av seg selv. Disse tar form av Grunnkurs , og Avansert grunnkurs . Disse treningsmateriellene er ment å lastes ned og vises lokalt.

ZURB tilbyr også betalt treningskurs som kan tas online. Du finner mer informasjon om dette på deres hjemmeside .

Screencasts av Webdesigner Depot

Det er riktig! Vi har laget egne treningsvideoer med et spesielt fokus på Foundation 5. Sjekk dem ut på Youtube: Stiftelse 5 Innledning , og Bruke Stiftelsens avanserte funksjoner

Komme i gang med ZURB Foundation 5 Grid

Dette sett med screencasts av james stone dekker alle grunnleggende. Emner inkluderer: Konfigurere prosjektet, Starter med skrivebordet, Nested Desktop Grids, Legge til plassholderbilder, Opprette mobilopplevelsen og Raffinere Tablet Experience.

ZURB Foundation 5 rammeopplæringsprogrammer

Gutta på ieatcss.com gikk og skrev en hel e-bok om stiftelse 5. Du kan finne sine nybegynneropplæringer her. Hvis du vil ha noe mer avansert, kan du laste ned deres ebook for 29 USD.

Hvorfor betaler du det? Fordi i stedet for bare å fortelle deg hvordan du bruker rammen, forklarer de hvordan alt fungerer. Og jeg mener alt, inkludert JavaScript-pluginene.

Mastering Foundation Zurb. veiledning fra A til Z

Dette er en annen sett med opplæringsprogrammer, etterfulgt av en valgfri ebook. Disse er levert av MonsterPost, TemplateMonster bloggen.

Stiftelsens sassy stiler forklart

Hvis du har vært ute etter en litt mer avansert, grundig opplæring, vær så god ! I dette innlegget, våre venner på Tuts + Beskriv, i detalj, hvordan du tilpasser FOundation fra Sass-filene opp.

Hvis du aldri har jobbet med Sass-filer før, start her.

Hvordan lage responsive tabeller i Foundation

Til slutt viser de strålende gutta på Sitepoint oss hvordan de skal skape responsive tabeller . Tenk deg, dette er en løsning som Foundation implementerer som standard. I denne opplæringen kan du lære å ta en bestemt komponent i Foundation, og integrere den i et annet prosjekt.

(Hvis du er ny til webdesign, kan det hende du har hørt noe om at tabeller er "onde". Vel, hvis du bruker dem til layout på nettstedet ditt, er det helt sant. Noen ganger er dataene best representert i et tabulært format, så det er godt å lære å lage tabeller lesbare på mobile enheter.)

Forks

Gumby - en stiftgaffel

En vakker ting om open source rammer som Foundation er at deres lisenser tillater folk å ta dem, endre dem, og til og med kalle dem sine egne. Designerne og utviklerne på Digitale kirurger gjorde nettopp det.

De holdt de strukturelle delene av Foundation, og inneholdt da noen interessante nye brukergrensesnittkomponenter og jQuery-plugins av seg selv. Resultatet ble oppkalt Gumby , og det er et fantastisk rammeverk i seg selv.

Hvor Foundation er utformet for å være fleksibelt, og passer både innholdsdrevne nettsteder og webapplikasjoner, er Gumby mer spesialisert. Det er fokusert på en ting: innholdsdrevne nettsteder og den enkle etableringen av dem.

Nesten flat brukergrensesnitt

Endringene til Stiftelsen i denne gaffelen er så subtil at jeg ikke er sikker på om jeg skal kalle det en gaffel eller et tema. Det er i utgangspunktet grunnlag 5.2.2 med bare noen få, små estetiske endringer.

Det som gjør det interessant for meg, er at disse endringene legger "flat design" trenden på svært små måter. Begrunnelsen bak det ser ut som at visse brukergrensesnittelementer, som knapper, bør beholde en subtil referanse til den tredje dimensjonen.

Det er litt skeuomorphic design, og jeg tror det faktisk kunne forbedre brukervennligheten. Vel, for noen brukere, uansett.

Diverse ressurser og verktøy

Her er noen interessante grunnrelaterte verktøy og ting som ikke passet helt inn i noen annen kategori:

Building Blocks av ZURB

De Byggeklosser er kodestykker bygget med og / eller for Foundation. Disse inkluderer nye brukergrensesnittkomponenter, gjenbrukbare innholdsoppsett og mer.

Sublim tekstutdrag

Sublim tekst er en fantastisk tekstredaktør som brukes av programmerere over hele verden. Disse utdragene (biter av kode ment for enkel innsetting i en hvilken som helst fil) er i utgangspunktet ment å gjøre bygningsoppsett med Foundation gå så mye raskere. De er kompatible med både Sublime Text 2 og 3.

Eksperimentell grid generator

Er standard tolv-kolonne rutenettet ikke til din smak, eller ikke riktig for prosjektet ditt? Deretter lage en ny! Bare hodet over til dette grid generator , skriv inn verdiene dine, og ta tak i CSS.

Tenk deg, CSS synes å være basert på en eldre versjon av Foundation, så du må kanskje tilpasse den til de nyere klassenavnene og responsive klassene. Likevel gjør det alle de harde beregningene for deg.

bookmarklets

Bookmarklets er små verktøy, vanligvis bygget med JavaScript, som kan plasseres i bokmerkelinjen din. Når du slår dem ut, kan de dele gjeldende side, vise nyttig informasjon i et overlegg, og mange andre nyttige små ting.

De Grid Displayer Bookmarklet av Antoine Lefeuvre kan brukes til å legge et visuelt grid på toppen av hvilken side du arbeider for for øyeblikket. Gitteret er tilpassbart, men du kan enkelt sette det til grunninnstillingene.

De Vertikal Rhythm Grid Bookmarklet av Kevin Altman gjør mye det samme som Grid Displayer. Forskjellen er at i stedet for vertikale linjer får du en haug med horisontale linjer for å hjelpe deg med å styre vertikal plass mellom elementene.

Den [Responsive Design Bookmarklet] av Victor Coulon vil laste inn den nåværende siden du er inne i et verktøy som lar deg raskt forhåndsvise designene dine på forskjellige oppløsninger.

En titt på hva som kommer

Du tror bedre at ZURB ikke sitter stille. Sammen med alle de andre tingene de gjør, er de harde på jobben. De har noen kule ting som kommer:

Stiftelsen for Apps

ZURB lager en helt ny versjon av Foundation som ikke erstatter Foundation 5, men arbeider langs siden. Det vil inneholde funksjoner spesielt for design, prototyping og bygging av webapplikasjoner.

Funksjonene vil inneholde et nytt rutenett, integrering med Angular.js, nye funksjoner designet spesielt for prototyping og mer. For å lese mer om hva de gjør, se hva de har å si for deg selv: Neste Stiftelse .

Bevegelsesgrensesnitt

Teknisk sett vil Motion UI være en del av denne nye, app-sentriske versjonen av Foundation, men jeg antar at den vil være tilgjengelig som en separat komponent for bruk hvor som helst. (Det er en utdannet gjetning, ikke noe mer ...) Hva er det? Det er et animasjonsbibliotek.

Moderne apper gjør mye bruk av animasjon, ikke bare for å imponere brukerne, men for å forbedre brukervennligheten. Motion UI er designet for å gjøre det enklere for oss å bygge komplekse grensesnitt.

Ifølge ZURB-gutta selv:

Og mens jeg tror at den forsettlige, fullstendige eliminering av skeuomorphism kan ha vært en liten overreaksjon i utgangspunktet (se hva jeg sa tidligere om "Nesten Flat UI"), er jeg glad for at vi kommer opp med alternativer . Vi trenger nye måter å fortelle brukerne hvordan vi får mest mulig ut av produktene våre, og animasjon er en fin måte å håndtere det på.

Konklusjon

Stiftelsen er akkurat hva navnet tilsier. Det er et utgangspunkt, og det er en flott en på det. Det er ikke det eneste store rammene der ute, men det er et solid valg for alle som ønsker å bygge vakre produkter raskere.

Er det riktig for deg og dine prosjekter? Ta en titt inn og finn ut.