Fundament er et af de to big-name HTML / CSS / JS rammer for front-end udviklere. Det skete ikke ved et uheld. I dag er vi her for at fortælle alt om, hvorfor du skal bruge det.

For det første for dem der måske skriver deres egen HTML, men aldrig har arbejdet med en ramme før, er der en forklaring:

Rammer er dybest set store klaser af forudskrevet kode, der hjælper dig med at komme i gang med dine projekter hurtigere. I tilfælde af front-end-kode som HTML og CSS betyder det, at du finder ting som layoutgitter, grundlæggende knapper og almindeligt anvendte grænsefladeelementer. Større rammer kan også omfatte jQuery-plugins.

De er ikke beregnet til at blive brugt som komplette hjemmeside skabeloner eller temaer, men som et sæt af byggesten. Du tager hvad du har brug for, ændrer det for at passe til projektet, og går generelt videre med dit arbejde (og dit liv, formodentlig). De er beregnet til at blive tilpasset og tinkered med.

Dette kan i første omgang være en skræmmende opgave, som rammer som Foundation og dets vigtigste rival, bootstrap, er blevet enorm. De indeholder hver tusindvis af linjer af CSS. Inden du forpligter dig til at bruge nogen ramme for ethvert projekt, skal du vurdere sine potentielle fordele i forhold til tidens omkostninger.

Når det er sagt, når du er vant til en ramme, kan det reducere den tid, du bruger skriftligt markup og CSS betydeligt.

Nogle historie

Stiftelsen begyndte sit liv som intet andet end en generel stil guide og nogle fælles kode. Gutterne på Zurb besluttede at fremskynde deres prototypeproces ved at tage nogle HTML og stilarter, som de plejede at genbruge, og gøre en ramme ud af det. Det er det. Det er virkelig, hvordan de fleste gode ting bliver gjort. Nogen havde brug for det, så de gjorde det.

Over tid besluttede de at det, de havde lavet, var for godt til at holde sig selv, så de udgav version 2.0.0 til verden. De gjorde alt lydhør, poleret det op og åbner det for os alle. Nu designere og udviklere verden over bruger ZURBs kode for at gøre deres produkter hurtigere og måske tør jeg sige det bedre.

Siden udgivelsen den 18. oktober 2011, den MIT-licens Rammerne er blevet en af ​​de "store to" og ses på tusindvis af hjemmesider.

Dens popularitet taler til dets anvendelighed og alsidighed. Hvis du beslutter dig for at Stiftelsen passer til dig, vil det ikke lade dig nede.

Funktioner

Stiftelsen har været i aktiv udvikling i næsten tre år nu. Det er derfor ikke overraskende, at funktionslisten er omfattende.

Kernen består af rammerne af CSS-filer (genereret fra SASS-filer, som også kan downloades) og flere jQuery-plugins. Der er ikke inkluderet HTML i hoveddownloaden (undtagen en meget grundlæggende demo side, får du at skrive det hele alene.

Når det er sagt, er der detaljeret dokumentation for hver enkelt komponent. Hvert afsnit af dokumentationen leveres med eksempel HTML, som du kan bruge og tilpasse efter behov. Hvis du vil dykke lige ind, tjek den dokumentation.

Hvis du vil tilpasse rammen fra bunden, er der to ting, du kan gøre:

Mulighed 1

Du kan vælge at downloade kun de komponenter, du vil have lige på hoved download side. Hvis alt du vil have er gitteret, navigations CSS og et jQuery-plugin eller to, det er nemt nok. Bare afkryds alle de ting, du ikke vil medtage, og gå!

Denne "ramme generator" indeholder også muligheder for at tilpasse gitteret, dine primære farver og et par andre muligheder. Dette er den mulighed, jeg ville vælge for, sige prototyper eller udvikle en intern virksomhedsapplikation. Standardpræsentationsformaterne er for det meste gode nok til disse ting, så hvorfor gå og skifte dem, når du ikke behøver?

Mulighed 2

Nu er det for de mennesker, der vil bruge rammerne for offentlige projekter. Du vil ikke bruge standardpræsentationsformaterne, da de højst sandsynligt ikke matcher din branding. For dybtgående tilpasning skal du gå til kilden.

Og ved kilden mener jeg Sass-filerne. Med dem kan du gå ind og tilpasse hver variabel til din smag, så rammen virkelig bliver din.

( En note om Sass-filer: Igen, for dem, der måske ikke er bekendt med udtrykket, Sass er en CSS preprocessor, der introducerer ting som variabler, mixins og andre programmeringsfunktioner til regelmæssig CSS.

Gør en Google-søgning efter noget som "Sass compiler til [dit operativsystem her]", og du finder hvad du har brug for. Personligt kan jeg ikke anbefale platformen Koala App nok.)

Når dine Sass-filer er samlet i en almindelig CSS-fil, skal du blot linke til den i din sektion, som om du ville have en anden CSS-fil. Koala-appen vil for eksempel kompilere Sass-filerne automatisk hver gang du gemmer dem, så din browser vil altid se de seneste ændringer.

Struktur

Nettet

Jeg kan ikke sige helt sikkert, at alle HTML-rammer kommer med et gittersystem til layout, men de fleste gør. Stiftelsens net, uden nogen tilpasning, er en klassisk tolv-kolonne, nestabel og lydhør.

Opmærkning og klasser er enkle, herunder klasser for at tilpasse layoutet efter skærmstørrelse. Hvis du har arbejdet med gittersystemer før, som 960 Grid System, kan du ikke finde Foundations grid svært at mestre.

Bemærk: Det er kodet til en mobil-første tilgang, så du vil gerne huske det, når du layouter dit websted.

Blokgitteret

Tænk på dette som et "mini grid". Det er designet til at holde et bestemt antal elementer jævnt mellemstore og adskilt uanset skærmens størrelse.

Eksempel: Du har tre identiske størrelser, som du vil beholde side om side på tværs af alle enheder. For at gøre det, ville du bruge dette blokgitter eksempel, at jeg skamløst stjal lige fra dokumentationen:

Bemærk, at hvis du vil, kan du angive et andet antal kolonner til forskellige skærmstørrelser. Elementerne bevarer deres ens størrelse. Denne komponent er perfekt til ting som fotogallerier.

Responsive ting

Medieforespørgslen holdes enkel, men er designet til at rumme en række skærmstørrelser, lige fra smartphones til latterligt store iMac-skærme.

At være designet fra jorden til at være mobil-først er en god start. Foundation går et skridt videre ved at inkludere specifikke komponenter, der hjælper dig med yderligere at forbedre de modtagelige dele af dine websteder.

For det første er der de sædvanlige klasser til at skjule eller vise forskellige elementer i forskellige visningsstørrelser. Derefter får du lidt mere avancerede ting som Interchange.

Udveksling er et JS-bibliotek, der dynamisk indlæser andet indhold afhængigt af medieforespørgsler. Du kan bruge dette bibliotek til at bestemme, om du f.eks. Skal indlæse et .JPG-billede af et kort eller en Google Maps-indlejring. Eller et almindeligt billede i stedet for et retina-skærmstørrelse billede.

Brug af dette bibliotek kan du gemme dine brugere nogle data og noget RAM. Bare sørg for at implementere en tilbagesendelse for de brugere med JavaScript deaktiveret.

Navigation

Navigationsmuligheder er rigelige i fundamentet, lige fra navigationslinjen til alle formål (komplet med rullemenuer), ikonstænger, breadcrumb navigation, pagination, sidebjælker og meget mere.

Der er dog to navigationselementer, der gør, at Stiftelsen skiller sig ud fra andre rammer.

Magellan

Den første er den Magellan Sticky Nav. Sæt denne nav-bar hvor som helst på siden, og når du ruller forbi startstedet, følger den dig ned. Hvis du bruger den til at linke til sektion på den aktuelle side, kan den markere hver enkelt (i selve linjen), mens du ruller ned.

Offcanvas

Det andet er Offcanvas, som er en lodret navigationslinje, der er gemt som standard. Tryk på menuknappen, og menuen glider på siden for din nydelse.

Husk på, at ligesom alle fundamentets komponenter kan disse implementeres med et minimum af markering. Gutterne på ZURB har lagt meget på at gøre disse ret avancerede brugergrænsefladeelementer nemme at implementere, og det viser.

Medier

De medierelaterede komponenter i enhver ramme er ofte, hvor rammebestemmere har tendens til at vise sig lidt, og Foundation er ingen undtagelse.

For eksempel er standardindstillingen som standard Rydningslampe. Det er virkelig et dødt enkelt lightbox billedgalleri. Du skal bare smide nogle miniaturer, inkludere de relevante klasser, og du har et touch-kompatibelt billedgalleri, der håndterer billeder af variabel højde uden problemer overhovedet.

En anden er Flex Video, som i teorien kan bruges til næsten alt indlejret objekt. Du skal bare indpakke en div med flex- videoklassen rundt om din Youtube video, iframe, indlejre eller objektelement, og du er god at gå. Disse objekter vil ikke automatisk skalere med størrelsen af ​​browseren.

Endelig er der stilarter inkluderet til miniaturebilleder. Intet lyst eller specielt at se her ... de er bare rart at have.

Men hvad med Orbit?

Folk, der har brugt Foundation før version 5, kan undre sig om ZURBs Orbit-plugin. Det er en karrusel, også nogle gange kaldet et diasshow, komponent, der er lydhør, feature-loaded, og det virker ret godt.

Men det er stadig i rammen, det understøttes ikke længere af ZURB, og det er heller ikke under aktiv udvikling.

Fondens skabere anbefaler sig selv at lede efter alternativer, f.eks Owl Carousel, eller Glat.

Forms

Selvfølgelig er grundlæggende stilarter for formularer ikke blevet glemt. Faktisk er de blevet raffineret gennem årene til værker af yderst undervurderet skønhed. Du tror måske, at jeg overdriver, men jeg tror ikke, jeg er. Års erfaring er blevet omdannet til grundlæggende formstile, som jeg tror kunne anvendes til næsten ethvert projekt, med et minimum af tweaks.

Det tager dygtighed at gøre noget så kedeligt som former ser både generiske og smukke på en gang. Det er ikke underligt, at mange af de rammer jeg har prøvet har imiteret Stiftelsens stil.

Når det er sagt, er det ikke alle kedelige tekstfelter og radioknapper. Du ved, at de måtte lave nogle ting af sig selv.

Tag skyderkomponenten, for eksempel: Du kan implementere række skydere med HTML5, men de er kedelige, og bruge standard udseendet af det OS, du bruger. Foundation, på den anden side, omfatter skydere, der kan styles med CSS til din tilpasning fornøjelse.

Der er også et formularvalideringsbibliotek (mere JavaScript her ...), som giver dig mulighed for at sikre, at dine brugere indtaster de rigtige data. Når de indtaster noget galt, for eksempel en ugyldig e-mail-adresse, vises en meddelelse og fortæller dem.

Knapper

Kan ikke have en ramme uden nogle standardknappestile. Jeg mener du kan, men det ville bare ikke være rigtigt, på en eller anden måde. Standard Foundation-knapperne adskiller sig ikke for meget fra andre rammer. Det vil sige, at de implementeres med minimal markup, og de har forskellige størrelses- og farvespecifikke klasser.

Du kan dog gruppere dem ind i knapgrupper til slags kasterelaterede handlinger sammen. Disse knapgrupper (de vandrette dem, alligevel) er designet til at fungere perfekt sammen med nettet. De har også ekstra klasser til størrelse, farve og afrundede hjørner ... alle de sædvanlige ting.

Skift markeringen lidt mere, og Foundation kan også give dig dropdown knapper , og dem split knapper . Du ved, for det meste knap, del dropdown menu?

De sidste to komponenter gør brug af Foundation's indbyggede dropdown-plugin. Det betyder blandt andet, at de er JavaScript-afhængige. Alligevel er de enkle at implementere. Det handler om klasserne.

Typografi

Foundation bruger en meget almindelig, sans-serif typografisk opsætning for at komme i gang. Det er enkelt, nemt at tilpasse med nogle grundlæggende Sass-variabler, og det er alt relativt stort. Det er rigtigt, Foundation bruger rem .

Siden Foundations skabere tror på brugbarhed, er alt stort nok til nemt at læse på små skærme. At læse i en moderat afstand på almindelige bærbare / stationære skærme giver mig heller ingen problemer.

Ekstra typografiske funktioner omfatter:

Inline lister

Vil du have en vandret tekstbaseret liste? Ved du, den slags du måske lægger i en websteds footer? Du er dækket. Ifølge skaberne bør du:

De har ret.   suger for rumlig kontrol.

Etiketter

Disse er i det væsentlige små stykker tekst med farvede baggrunde. Hvad kan du bruge dem til? Etiketter og andre metadata, eller som navnet antyder, kan du bruge dem til at mærke ting, dvs. formularer.

Inkluderet er regelmæssige etiketter, advarselsetiketter, advarselsetiketter. Det er bare en anden af ​​de små, nyttige ting, jeg elsker om Foundation.

Se også: Taster

Callouts & Prompts

Nogle gange på et websted, og langt oftere i en ansøgning, har du brug for måder at fange en brugers opmærksomhed på. Du gør det enten for at præsentere dem med de nødvendige oplysninger, trække deres øjne til et ufuldstændigt formular eller en handling eller lære dem at bruge en ansøgning.

Hvis du er ond, kan du gøre det for at afspille annoncer ... med lyd.

Du kunne gøre det med et modalt vindue. Foundation har store modale vinduer med omfattende adfærdsmæssige muligheder, størrelsesvalg, begivenhedsbindinger ... selv en mulighed for at fjerne baggrunden.

Så er der alarmerne. Disse store farverige advarselsbokse er statisk placeret og strækker sig til bredden af ​​deres beholder. Du kan dog altid gøre dem til en fast position for alarmer på stedet. Har jeg nævnt farven, afrundede hjørner og andre præsentationsklasser endnu? Jeg vil stoppe, fordi de gør det for mange ting.

Så har vi værktøjstips. Disse kan anvendes på næsten ethvert element, og indstilles til kun at vises på store skærme eller på alle skærme. (På mobile enheder skal du trykke på det pågældende element for at se værktøjstip.) De kan også placeres på hver side af elementet.

joyride tager værktøjstips til næste niveau. Det er et plugin, der udnytter værktøjstips (og andre ting) for at give brugerne en rundvisning på dit websted eller din applikation. Perfekt til førstegangsbrugere, hvis grænsefladen er nødvendigvis kompleks.

Indhold

De grundlæggende HTML / CSS rammer giver dig mulighed for at organisere dit indhold på en side og give det lidt styling. Dette er en af ​​de store rammer, men det betyder ekstra komponenter, selv for indholdet.

For det første har vi pristabeller: ZURB-fyre kender deres publikum ganske godt. Mange mennesker vil have nemme måder at vise prisoplysninger på for deres forskellige produkter og tjenester. Foundation giver det til dem i et forholdsvis standardformat.

Dernæst progress bar . Jeg kommer ikke til at uddybe disse. De er præcis, hvad du ville forvente.

Foundation indeholder også den grundlæggende accordeon plugin og det forventede tabbed content plugin. Jeg synes, det er interessant at bemærke, at du kan sætte fanebladet inde i et accordeon-afsnit.

Endelig er det noget, jeg har set i få andre rammer, og jeg finder det utrolig interessant: en komponent med lige kolonnehøjde. De kalder det til Equalizer , et navn kun halvt så dårligt som dets funktion. Det kræver selvfølgelig JavaScript, men det er en meget enkel måde at gøre alle kolonnerne i en given sektion til at holde samme højde på en lydhør måde.

Tilføj blot et par dataattributter, og du er god at gå. Sådan ser det ud, når det kombineres med pristabellen:

Sådan kommer du i gang

Så nu har du gået igennem den omfattende funktionsliste, og du vil have dem funktioner! Højre? Nå, hvis jeg er rigtig korrekt, så her er hvordan du kommer i gang.

Vi skal skabe en god, enkel, grundlæggende skabelon i Foundation for Practice. Du kan følge med i din egen tekstredigerer, kopiere og indsætte koden, eller bare download den skabelon, jeg har stillet til rådighed, fordi du er en snyder.

Efter dette afsnit vil jeg notere en række andre gode tutorials og træningsressourcer til at hjælpe med på din rejse til at blive en Foundation mester.

Gå download standardpakken på download side , og lad os komme i gang.

Medtag basisfilerne i dit projekt

Nu, når du downloader pakken, vil filstrukturen inde i det se sådan ud:

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 bemærke, at jeg har placeret en stjerne efter nogle af disse filer. Det er de eneste filer, du rent faktisk har brug for til at gøre rammen gøre dens ting. Resten er kildefiler eller gode ekstra værktøjer. Disse værktøjer kan helt sikkert hjælpe dig med at gøre fantastiske ting, men er ikke strengt nødvendige.

Placeholder.js implementerer f.eks. Stedholderattributten til HTML5-formularer til browsere, der ikke understøtter det.

De filer, jeg har markeret, er de eneste, som du absolut skal linke til i sektionen på din webside / applikation. I forbindelse med denne tutorial vil jeg slette de fleste af disse filer og kun holde dem, der er væsentlige. Jeg starter også fra bunden med et tomt indeks.html .

Til at begynde med vil vores "startside" se sådan ud:

< !DOCTYPE html>

Du har muligvis bemærket en ekstra CSS-fil derinde. Vi skal bruge det til brugerdefinerede stilarter.

Opret et simpelt layout

Så da dette er en startside, lad os tage konceptet videre. Vi gør det til en usædvanlig generisk destinationsside for nogle virksomheder eller andre. Ingen to-kolonne layout til denne vejledning! De er så ude af mode.

Bemærk, at jeg hopper over, herunder noget som en navigationslinje eller et kald til handling i dette eksempel. Det er helt ting, du skal gøre i virkelige projekter.

Overskriften

Ifølge de nuværende love om designtendenser skal vi lave et stort overskrift med vores firmanavn, et slogan og et massivt baggrundsbillede (ikke inkluderet i denne vejledning).

HTML til dette er simpelt nok:

Our Company Name
Insert a pithy slogan here

Rækklassen definerer ikke kun de ydre grænser for vores net, men centrerer det for os. Hovedelementet er der både af semantiske årsager og at give en placerer til at tilføje et baggrundsbillede senere.

Vi ønsker, at vores overskriftsgittersøjle skal strække sig til et hundrede procent uanset skærmens størrelse, så vi behøver kun at bruge lille-12- klassen. Skærme med mellemstore og store størrelser vil arve disse stilarter, medmindre andre er angivet.

Vi har vores overskrift og vores centrerede tekst. Dette giver dog ikke os den høje header, vi ønsker. Til dette har vi brug for nogle brugerdefinerede styles:

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

Som du kan se, har jeg givet vores overskrift en baggrundsfarve i stedet for et egentligt billede og centreret lodret i vores headerindhold. Temmelig pænt, huh? Sådan ser vores side ud:

Introduktion og tjenester

Så du har dristigt annonceret dig selv med dit overskrift. Det er på tide at fortælle din bruger, hvem du er, og hvad du gør. En lille beskrivelse af hver tjeneste eller produkt ... sådan gør vi det i denne moderne tidsalder.

Lad os komme igang.

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.

Okay, som du kan se, er alt, hvad jeg har lavet, tilføjet flere rækker og kolonner med indhold. Jeg har anvendt de relevante klasser til at gøre kolonneskalaen til den enhed, de bliver set på.

I #introduktionsafsnittet lagde jeg ikke bare centralkolonnen i fuld bredde. I stedet for at sikre, at introduktionsafsnittet var læsbart, gjorde jeg det mindre og gav det passende forskydningskurser for hver skærmstørrelse.

Lodret afstand af indholdsafsnit er noget du skal gøre for dig selv i alle rammer, så igen havde jeg brug for nogle brugerdefinerede CSS:

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

Intet særligt der. Da næsten alt, herunder nettet, er adskilt med ems, brugte jeg dem til polstring for at holde tingene visuelt konsistente. Tænk på embaseret elementafstand som et indbygget baseline-net, som du nemt kan udnytte.

Sådan ser det hele ud nu:

Fodfoden

Lad os give os en død-simpel footer, med et par navigationsforbindelser og en ophavsret, fordi hvorfor ikke?

Her har jeg inkluderet en inline liste (se ovenfor) for disse footer links, og to kolonner, der går lodret i telefonstørrelse. Her er CSS'en, jeg brugte:

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

Og voilà! En blotte knogles destinationsside, så du kan tilpasse til dit hjertes indhold. Sådan ser det sådan ud:

Tag zip-filen, hvis du vil, og spil med den kode, der allerede er der. Start fra bunden, og kig på kilden. Eller du kan bare se nedenfor på de træningsmaterialer, som andre har lavet ...

Tutorials & Training

Træningsmaterialer af ZURB

Som du måske ville forvente, har gutterne på ZURB gået ud over dokumentation ved at give os selv nogle træningsmaterialer. Disse tager form af Grundkursus , og Advanced Foundation Course . Disse træningsmaterialer skal downloades og ses lokalt.

ZURB tilbyder også betalte træningskurser, som kan tages online. Du kan finde flere oplysninger om dette på deres hjemmeside .

Screencasts af Webdesigner Depot

Det er rigtigt! Vi har lavet nogle træningsvideoer af vores egen, med et særligt fokus på Foundation 5. Tjek dem ud på Youtube: Stiftelse 5 Introduktion , og Brug af Foundation's Advanced Features

Kom godt i gang med ZURB Foundation 5 Grid

Det her sæt af screencasts af james stone dækker alle de grundlæggende. Emner omfatter: Opsætning af projektet, Start med skrivebordet, Nested Desktop Grids, Tilføjelse af pladsholderbilleder, Oprettelse af mobiloplevelsen og Raffinering af tabletoplevelsen.

ZURB Foundation 5 rammeprogrammer

Gutterne på ieatcss.com gik og skrev en hel e-bog alt om Foundation 5. Du kan finde deres begynder tutorials her. Hvis du vil have noget mere avanceret, kan du downloade deres eBook til 29 USD.

Hvorfor ville du betale det? Fordi i stedet for bare at fortælle dig, hvordan man bruger rammen, forklarer de, hvordan alt fungerer. Og jeg mener alt, herunder JavaScript-plugins.

Mastering Foundation Zurb. øvelser fra A til Z

Dette er en anden sæt af tutorials, efterfulgt af en valgfri ebook. Disse leveres af MonsterPost, TemplateMonster bloggen.

Stiftelsens sassy stilarter forklares

Hvis du har ønsket en lidt mere avanceret, dybdegående vejledning, her er du ! I dette indlæg, vores venner på Tuts + Beskriv, i detaljer, hvordan man tilpasser FOundation fra Sass-filer op.

Hvis du aldrig har arbejdet med Sass-filer før, start her.

Sådan oprettes lydige tabeller i Foundation

Endelig viser de strålende fyr på Sitepoint os, hvordan du opretter responsive tabeller . Dette er en løsning, som Foundation implementerer som standard. I denne tutorial kan du lære at tage en specifik komponent af Foundation og integrere det i et andet projekt.

(Hvis du er ny til webdesign, kan du have hørt noget om, at tabellerne er "onde" .Du kan godt bruge dem til at layoute dit website, men det er sommetider data, der bedst repræsenteres i et tabelformat, så det er godt at lære at lave tabeller læsbare på mobile enheder.)

Gafler

Gumby - et fundament gaffel

En smuk ting om open source-rammer som Foundation er, at deres licenser tillader folk at tage dem, ændre dem og selv kalde dem deres egne. Designerne og udviklerne på Digitale kirurger gjorde netop det.

De holdt strukturfondene i Foundation og indførte derefter nogle interessante nye brugergrænsefladskomponenter og jQuery-plugins af deres egen. Resultatet blev navngivet Gumby , og det er en fantastisk ramme i sig selv.

Hvor Stiftelsen er designet til at være fleksibel og passer til både indholdsdrevne hjemmesider og webapplikationer, er Gumby mere specialiseret. Det er fokuseret på én ting: indholdsdrevne hjemmesider og den nemme oprettelse heraf.

Næsten flad brugergrænseflade

Ændringerne til Foundation i denne gaffel er så subtile, at jeg ikke er sikker på, om jeg skal kalde det en gaffel eller et tema. Det er i grunden Stiftelse 5.2.2 med kun få, små æstetiske ændringer.

Det, der gør det interessant for mig, er, at disse ændringer ændrer tendensen til "flad design" på meget små måder. Begrundelsen bag det synes at være, at visse brugergrænsefladeelementer, som knapper, skal beholde en subtil reference til den tredje dimension.

Det er lidt skeuomorphic design, og jeg tror, ​​det rent faktisk kunne forbedre brugervenligheden. Nå, for nogle brugere, alligevel.

Diverse ressourcer og værktøjer

Her er nogle interessante Foundation relaterede værktøjer og ting, der ikke passer helt ind i nogen anden kategori:

Building Blocks af ZURB

Det Byggesten er uddrag af kode bygget med og / eller for Foundation. Disse omfatter nye brugergrænsefladskomponenter, genanvendelige indholdslayouter og mere.

Sublim tekstuddrag

Sublim tekst er en fantastisk tekstredaktør, der bruges af programmører verden over. Disse uddrag (stykker af kode, der er beregnet til nem indføring i en fil) er grundlæggende beregnet til at gøre bygningslayouter med Foundation gå så meget hurtigere. De er kompatible med både Sublime Text 2 & 3.

Eksperimentelle netgenerator

Er standard twelve-column grid ikke til din smag, eller ikke rigtigt for dit projekt? Så lav en ny! Bare gå over til dette grid generator , indtast dine værdier, og tag din CSS.

Husk, at CSS synes at være baseret på en ældre version af Foundation, så du skal muligvis tilpasse den til de nyere klassenavne og lydhørklasser. Alligevel gør det alle de hårde beregninger for dig.

bookmarklets

Bogmærker er små værktøjer, som normalt er bygget med JavaScript, der kan placeres i din bogmærkebjælke. Når du har udløst dem, kan de dele den aktuelle side, vise nyttige oplysninger i et overlay og mange andre nyttige små ting.

Det Grid Displayer Bookmarklet af Antoine Lefeuvre kan bruges til at overlejre et visuelt net oven på den side, du arbejder på i øjeblikket. Gitteret kan tilpasses, men du kan nemt indstille det til standardindstillingerne.

Det Lodret Rhythm Grid Bogmærke af Kevin Altman gør meget det samme som Grid Displayer. Forskellen er, at i stedet for lodrette linjer får du en flok vandrette linjer til at hjælpe dig med at styre det vertikale mellemrum mellem elementer.

Den [Responsive Design Bookmarklet] af Victor Coulon vil genindlæse den aktuelle side, du er inde i et værktøj, der giver dig mulighed for hurtigt at forhåndsvise dine designs ved forskellige opløsninger.

Et kig på, hvad der kommer

Du tror bedre, at ZURB ikke sidder stille. Sammen med alle de andre ting, de gør, er de svært på arbejde. De har nogle seje ting der kommer som:

Foundation for Apps

ZURB skaber en helt ny version af Foundation, som ikke erstatter Foundation 5, men arbejder langs den. Det vil omfatte funktioner specifikt til design, prototyping og opbygning af webapplikationer.

Funktionerne vil omfatte et nyt grid, integration med Angular.js, nye funktioner designet specielt til prototyping og meget mere. For at læse mere om, hvad de laver, se hvad de selv skal sige: The Next Foundation .

Motion UI

Teknisk set vil Motion UI være en del af denne nye app-centriske version af Foundation, men jeg forestiller mig, at den vil være tilgængelig som en separat komponent til brug overalt. (Det er et uddannet gæt, ikke mere ...) Hvad er det? Det er et animationsbibliotek.

Moderne apps gør meget brug af animation, ikke kun for at imponere brugerne, men for at forbedre brugervenligheden. Motion UI er designet til at gøre det nemmere for os at bygge komplekse grænseflader.

Ifølge ZURB-karrene selv:

Og mens jeg tror, ​​at den bevidste, fuldstændige eliminering af skeuomorphism måske har været en lille overreaktion i første omgang (se hvad jeg tidligere sagde om "næsten flad brugergrænseflade"), er jeg glad for, at vi kommer op med alternativer . Vi har brug for nye måder at fortælle vores brugere på, hvordan du får mest ud af vores produkter, og animation er en fantastisk måde at klare det på.

Konklusion

Foundation er lige hvad dets navn indebærer. Det er et udgangspunkt, og det er en stor ting i den. Det er ikke den eneste store ramme derude, men det er et solidt valg for alle, der ønsker at bygge smukke produkter hurtigere.

Er det rigtigt for dig og dine projekter? Tag et kig ind og find ud af det.