fundament är en av de två stora namn HTML / CSS / JS ramarna för front-end utvecklare. Det hände inte av misstag. Idag är vi här för att berätta allt om varför du borde använda den.

Först för dem som kanske skriver sin egen HTML, men aldrig har arbetat med en ram tidigare, är det här en förklaring:

Ramar är i grunden stora klaser av förskriven kod för att hjälpa dig att komma igång på dina projekt snabbare. När det gäller front-end-kod som HTML och CSS betyder det att du hittar saker som layoutgränssnitt, grundläggande knappstilar och vanliga gränssnittselement. Större ramar kan också inkludera jQuery-plugins.

De är inte avsedda att användas som kompletta webbplatsmallar eller teman, men som en uppsättning byggstenar. Du tar vad du behöver, ändrar det för att passa projektet, och brukar fortsätta med ditt arbete (och ditt liv, förmodligen). De är avsedda att skräddarsys och tinkered med.

Detta kan initialt vara en skrämmande uppgift, som ramar som Stiftelsen och dess huvudsakliga rival, bootstrap, har blivit enorm. De innehåller var tusentals linjer av CSS. Innan du åtar dig att använda några ramar för något projekt, måste du utvärdera sina potentiella fördelar mot tidskostnaden.

Med det sagt, när du väl vant sig med en ram kan det minska tiden du spenderar skrivmarkering och CSS betydligt.

Några historier

Stiftelsen började sitt liv som ingenting annat än en generell stilguide och en del gemensam kod. Killarna på ZURB bestämde sig för att påskynda sin prototypningsprocess genom att ta vissa HTML och stilar som de brukade återanvända och göra en ram ut av den. Det är allt. Det är verkligen hur de flesta bra saker blir gjorda. Någon behövde det, så de gjorde det.

Med tiden bestämde de sig för att vad de hade gjort var för bra för att hålla sig själva, så de släppte version 2.0.0 till världen. De gjorde allt responsivt, polerat upp och öppnade det för oss alla. Nu designers och utvecklare världen över använder ZURBs kod för att göra sina produkter snabbare och kanske vågar jag säga det, bättre.

Sedan dess släpptes den 18 oktober 2011, den MIT-licens ramverket har blivit en av de "stora två", och ses på tusentals webbplatser.

Dess popularitet talar till dess användbarhet och mångsidighet lika. Om du bestämmer dig för att Stiftelsen är rätt för dig, kommer det inte att leda dig.

Funktioner

Stiftelsen har varit under aktiv utveckling under nästan tre år nu. Det är ingen överraskning att funktionslistan är omfattande.

Kärnan utgörs av CSS-filer (genererade från SASS-filer, även tillgängliga för nedladdning) och flera jQuery-plugins. Det finns ingen HTML i huvudladdningen (förutom en mycket grundläggande demosida, får du skriva allt själv.

Det sägs att det finns detaljerad dokumentation om varje komponent. Varje del av dokumentationen levereras med exempel HTML för att du ska kunna använda och anpassa efter behov. Om du vill dyka in, kolla in dokumentation.

Om du vill anpassa ramverket från grunden är det två saker du kan göra:

Alternativ 1

Du kan välja att bara hämta de komponenter du vill ha direkt på huvudsakliga nedladdningssida. Om allt du vill är nätet, navigations CSS och ett jQuery-plugin eller två, det är lätt nog. Avmarkera bara alla saker du inte vill inkludera och gå!

Denna "ramgenerator" innehåller även alternativ för att anpassa nätet, dina huvudfärger och några andra alternativ. Detta är det alternativ jag skulle vilja välja, prototyper eller utveckla en intern företagsapplikation. Standard presentationsstilar är oftast tillräckligt bra för dessa saker, så varför gå och byt dem när du inte behöver?

Alternativ 2

Nu är det för de personer som ska använda ramarna för offentliga projekt. Du vill inte använda standardpresentationsformat, eftersom de med all sannolikhet inte matchar din branding. För djup kundanpassning måste du gå till källan.

Och med källan menar jag Sass-filerna. Med dem kan du gå in och anpassa varje variabel till ditt tycke, vilket gör ramen verkligen din.

( En anteckning om Sass-filer: Återigen, för dem som kanske inte är bekanta med termen, sass är en CSS preprocessor, som introducerar saker som variabler, mixins och andra programmeringsfunktioner till vanlig CSS.

Gör en Google-sökning efter något liknande "Sass-kompilator för [ditt operativsystem här]", och du hittar vad du behöver. Personligen kan jag inte rekommendera plattformen Koala App tillräckligt.)

När dina Sass-filer är sammanställda i en vanlig CSS-fil, länkar du bara till den i din sektion som om du skulle någon annan CSS-fil. Koala-appen, till exempel, kommer att sammanställa Sass-filerna automatiskt varje gång du sparar dem, så din webbläsare kommer alltid att se de senaste ändringarna.

Strukturera

Rutnätet

Jag kan inte säga säkert att alla HTML-ramar kommer med ett nätverkssystem för layout, men de flesta gör det. Stiftelsens nät, utan någon anpassning, är en klassisk tolvkolonn, nestbar och mottaglig.

Markeringen och klasserna är enkla, inklusive klasser för anpassning av layouten med skärmstorlek. Om du har arbetat med nätverkssystem tidigare, som 960 Grid System, hittar du inte Foundations grid svårt att behärska.

Obs! Det är kodat för ett mobilt första tillvägagångssätt, så du vill ha det i åtanke när du layoutar din webbplats.

Blocknätet

Tänk på detta som ett "mini-galler". Det är utformat för att hålla ett visst antal objekt jämnt och i storleksordning oavsett skärmstorlek.

Exempel: Du har tre identiska storlekar som du vill behålla sida vid sida över varje enhet. För att göra det skulle du använda det här blocknätet som jag skamlöst stal direkt från dokumentationen:

Observera att om du vill kan du ange ett annat antal kolumner för olika skärmstorlekar. Elementen kommer att behålla sin lika stora storlek. Denna komponent är perfekt för saker som fotogallerier.

Responsiva saker

Mediasökningarna hålls enkla men är utformade för att rymma ett antal skärmstorlekar, allt från smarta telefoner till löjligt stora iMac-skärmar.

Att vara designad från grunden till att vara mobil-först är en bra start. Stiftelsen går ett steg längre genom att inkludera specifika komponenter för att hjälpa dig att förfina de avgörande delarna på dina webbplatser ytterligare.

För det första finns det vanliga klasser att gömma eller visa olika element i olika visningsstorlekar. Då får du lite mer avancerade saker, som Utbyte.

Utbyte är ett JS-bibliotek som dynamiskt laddar olika innehåll beroende på mediefrågor. Du kan använda det här biblioteket för att bestämma om du vill ladda, till exempel, en .JPG-bild av en karta eller en inbyggd Google Maps. Eller en vanlig bild istället för en näthinneskärmstorlek.

Med det här biblioteket kan du spara dina användare lite data och lite RAM. Var noga med att implementera en återgång för de användare med JavaScript inaktiverat.

Navigering

Navigationsalternativen är rikliga i grunden, allt från navigeringsfältet (komplett med rullgardinsmenyer), ikonfält, breadcrumb-navigering, paginering, sidfält och mer.

Det finns dock två navigeringskomponenter som gör att stiftelsen sticker ut från andra ramar.

Magellan

Den första är Magellan Sticky Nav. Sätt den här nav-baren var du vill på sidan, och när du bläddrar förbi startpunkten följer den dig ner. Om du använder den för att länka till sektionen på den aktuella sidan kan den markera var och en (i själva fältet) när du rullar ner.

Offcanvas

Den andra är Offcanvas, vilket är en vertikal navigationsfält som är dold som standard. Tryck på menyknappen, och menyn glider in på sidan för din webbläsning.

Tänk på att, liksom alla grundkomponenter, kan dessa implementeras med en minimal mängd markup. Killarna på ZURB har lagt mycket arbete på att göra dessa ganska avancerade användargränssnitt lätt att implementera, och det visar.

Media

De medierelaterade komponenterna i något ramverk är ofta där ramverkare tenderar att visa sig lite, och Stiftelsen är inget undantag.

Till exempel ingår som standard Clearing Lightbox. Det är verkligen ett dödligt lättlätt bildgalleri. Kasta bara in några miniatyrbilder, inkludera relevanta klasser, och du har ett beröringsbart bildgalleri som hanterar bilder av variabel höjd utan några problem alls.

En annan är Flex Video, som i teorin kan användas för nästan alla inbäddade objekt. Wrap bara en div med flex-video klassen runt din Youtube video, iframe, inbädda eller objekt element, och du är bra att gå. Dessa objekt kommer inte automatiskt att skala med webbläsarens storlek.

Slutligen finns det stilar för miniatyrbilder. Ingenting fancy eller speciellt att se här ... de är bara trevliga att ha.

Men hur är Orbit?

Människor som har använt Foundation före version 5 kanske undrar om ZURBs Orbit-plugin. Det är en karusell, även ibland kallad ett bildspel, komponent som är mottaglig, funktionstryckt, och det fungerar ganska bra.

Men det är fortfarande i ramverket, det stöds inte längre av ZURB, det är inte heller aktivt under utveckling.

Stiftelsens skapare rekommenderar att man letar efter alternativ, till exempel Owlkarusell, eller Smart.

formulär

Självklart har grundläggande stilar för formulär inte blivit bortglömda. Faktum är att de har blivit raffinerade genom åren i verk av extremt diskret skönhet. Du kanske tror att jag överdriver, men jag tror inte att jag är. Års erfarenhet har blivit till grundläggande formstilar som jag tror kunde tillämpas på nästan vilket projekt som helst, med ett minimum av tweaks.

Det tar skicklighet att göra något så tråkigt som former ser både generiska och vackra på en gång. Det är inte konstigt att många av de ramar jag har försökt har imitat Stiftelsens stil.

Med detta sagt är det inte alla tråkiga textfält och radioknappar. Du vet att de var tvungna att göra egna saker.

Ta skjutreglaget komponent, till exempel: Du kan implementera raderingsraden med HTML5, men de är tråkiga och använder standardutseendet på vilket OS som helst du använder. Foundation, däremot, inkluderar glidreglage som kan utformas med CSS för din anpassningsglädje.

Det finns också ett formulärvalideringsbibliotek (mer JavaScript här ...) som låter dig se till att dina användare matar in rätt data. När de skriver in något fel, till exempel en ogiltig e-postadress, kommer en meddelande att visas och berätta för dem.

Knappar

Kan inte ha ramar utan några standardknappsstilar. Jag menar att du kan, men det skulle inte vara rätt, på något sätt. Standard Foundation-knapparna skiljer sig inte för mycket från någon annan ram. Det vill säga de implementeras med minimal uppmärkning, och de har olika storlek och färgspecifika klasser.

Du kan dock gruppera dem i knappgrupper att sortera kasta relaterade åtgärder tillsammans. Dessa knappgrupper (de horisontella, i alla fall) är utformade för att fungera perfekt med gallret. De har också extra klasser för storlek, färg och avrundade hörn ... alla vanliga saker.

Ändra markeringen lite mer, och Stiftelsen kan också ge dig dropdown knappar , och de dela knappar . Du vet, mestadels knapp, delrullningsmeny?

De två sista komponenterna använder Stiftelsens inbyggda dropdown-plugin. Det innebär bland annat att de är JavaScript-beroende. Ändå är de enkla att genomföra. Det handlar om klasserna.

Typografi

Stiftelsen använder en mycket vanlig, sans-serif typografisk inställning för att komma igång. Det är enkelt, enkelt att anpassa med några grundläggande Sass-variabler, och det är alla relativt stora. Det stämmer, Foundation använder rem .

Eftersom Foundations skapare tror på användbarhet är allt tillräckligt stort för att lätt läsa på små skärmar. Att läsa på ett måttligt avstånd på vanliga bärbara / stationära skärmar ger mig inga problem heller.

Extra typografiska funktioner inkluderar:

Inline listor

Vill du ha en horisontell textbaserad lista? Vet du, det slag du kan lägga på en webbplatsfotboll? Du är täckt. Enligt skaparna borde du:

De har rätt.   suger för rumslig kontroll.

Etiketter

Dessa är väsentligen små bitar av text med färgade bakgrunder. Vad kan du använda dem för? Taggar och andra metadata, eller som namnet antyder, kan du använda dem för att märka saker, dvs. formulärfält.

Inkluderat är vanliga etiketter, varningsetiketter, varningsetiketter. Det är bara en annan av de små, användbara sakerna som jag älskar om Foundation.

Se även: tangenttryckningar

Callouts & Prompts

Ibland på en webbplats, och mycket oftare i en applikation, behöver du sätt att fånga användarens uppmärksamhet. Du gör det antingen för att presentera dem med nödvändig information, dra sina ögon till ett ofullständigt formulärfält eller åtgärd, eller för att lära dem hur man använder en ansökan.

Om du är ond, kan du göra det för att spela annonser ... med ljud.

Du kan göra det med ett modalt fönster. Stiftelsen har stora modala fönster med omfattande beteendemöjligheter, limningsalternativ, händelsebindningar ... även ett alternativ för att ta bort bakgrunden.

Då finns det varningarna. Dessa stora färgstarka varningslådor är statiskt placerade och sträcker sig till bredden på behållaren. Du kan dock alltid göra dem till en fast position för hela meddelanden. Har jag nämnt färgen, avrundade hörn och andra presentationer än? Jag ska sluta, för att de gör det för många saker.

Då har vi verktygstips. Dessa kan tillämpas på nästan alla element, och de är inställda att bara visas på stora skärmar eller på alla skärmar. (På mobila enheter måste du trycka på elementet ifråga för att se verktygstipset.) De kan också placeras på någon sida av elementet.

Nöjestur tar verktygstips till nästa nivå. Det är ett plugin som använder verktygstips (och andra saker) för att ge användarna en rundtur på din webbplats eller applikation. Perfekt för första gången, om gränssnittet är nödvändigtvis komplext.

Innehåll

De grundläggande HTML / CSS-ramarna ger dig möjlighet att organisera ditt innehåll på en sida och ge det lite styling. Detta är en av de stora ramarna, men det betyder extra komponenter, även för innehållet.

Först upp, vi har prissättningstabeller: ZURB-killar känner publiken ganska bra. Många människor vill ha enkla sätt att visa prisinformation för sina olika produkter och tjänster. Stiftelsen ger dem dem i ett ganska standardformat.

Därefter framstegsfält . Jag kommer inte att fördjupa mig på dessa. De är precis vad du kan förvänta dig.

Foundation innehåller också grundläggande dragspel plugin, och det förväntade tabbade innehåll plugin. Jag tycker att det är intressant att notera att du kan lägga tabbinnehåll inne i en dragspelavdelning.

Slutligen är detta något jag har sett i några andra ramar, och jag tycker det är otroligt intressant: en komponent med lika kolumnhöjd. De kallar det Utjämnare , ett namn bara hälften så dåligt som dess funktion. Det kräver naturligtvis JavaScript, men det är ett mycket enkelt sätt att göra alla kolumnerna i ett visst avsnitt, bibehålla samma höjd på ett lyhörd sätt.

Lägg bara till ett par data attribut, och du är bra att gå. Så här ser det ut när det kombineras med prissättningstabellkomponenten:

Hur man kommer igång

Så nu har du gått igenom den omfattande funktionslistan, och du vill ha dem! Höger? Tja, om jag verkligen är korrekt, så här är hur du börjar.

Vi ska skapa en fin, enkel, grundläggande mall i Foundation for Practice. Du kan följa med i din egen textredigerare, kopiera och klistra in koden, eller bara hämta den mall som jag har gjort tillgänglig eftersom du är en cheater.

Efter det här avsnittet kommer jag att lista ett antal andra bra handledning och träningsresurser som hjälper dig att bli en stiftelsesmästare.

Gå hämta standardpaketet på nedladdningssida , och låt oss komma igång.

Inkludera basfilerna i ditt projekt

Nu när du laddar ner paketet kommer filstrukturen inuti att se ut så här:

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 märker att jag har placerat en asterisk efter några av dessa filer. Det här är de enda filerna du faktiskt behöver för att få ramverket att göra sin sak. Resten är källfiler eller trevliga extraverktyg. Dessa verktyg kan säkert hjälpa dig att göra fantastiska saker, men det är inte absolut nödvändigt.

Placeholder.js implementerar till exempel platshållarens attribut i HTML5-formulär för webbläsare som inte stöder det.

Filerna jag markerade är de enda som du absolut behöver länka till i avsnittet på din webbsida / applikation. I denna handledning ska jag ta bort de flesta av dessa filer och behåll bara de som är nödvändiga. Jag börjar också från början med ett tomt index.html .

Till att börja med kommer vår "hemsida" att se ut så här:

< !DOCTYPE html>

Du kanske har märkt en extra CSS-fil där inne. Vi behöver det för anpassade stilar.

Skapa en enkel layout

Så, eftersom det här är en hemsida, låt oss ta upp konceptet ytterligare. Vi gör det till en exceptionellt generisk målsida för vissa företag eller andra. Ingen layout med två kolumner för denna handledning! De är så out of fashion.

Observera att jag hoppar över något som en navigeringsfält eller ett anrop till handling i det här exemplet. Det här är helt saker som du borde göra i verkliga projekt.

Rubriken

Enligt de nuvarande lagen om designtrender måste vi göra ett enormt huvud med vårt företagsnamn, en slogan och en massiv bakgrundsbild (ingår inte i denna handledning).

HTML för detta är enkelt nog:

Our Company Name
Insert a pithy slogan here

Råklassen definierar inte bara gränsvärdena för vårt nät, men centrerar det för oss. Rubrikelementet finns både för semantiska skäl och för att ge en placerare för att lägga till en bakgrundsbild senare.

Vi vill att vår rubrikkolumn ska sträcka sig till ett hundra procent oavsett skärmstorlek, så vi behöver bara använda lilla 12- klassen. Skärmar med medelstora och stora storlekar kommer att ärva dessa stilar om inte annat anges.

Vi har vår rubrik och vår centrerad text. Detta ger oss emellertid inte den höga huvudet vi vill ha. För detta behöver vi några anpassade stilar:

/*  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 jag fått vår bakgrundsfärg i stället för en verklig bild och centrerat vertikalt innehållet i vårt huvud. Ganska snyggt va? Så här ser vår sida så långt ut:

Introduktionen och tjänsterna

Så du har medvetet meddelat dig själv med ditt rubrik. Det är dags att berätta för användaren vem du är och vad du gör. En liten beskrivning om varje tjänst eller produkt ... så gör vi det i denna moderna tid.

Låt oss börja.

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.

Okej, som du kan se, allt jag har gjort är att lägga till några fler rader och kolumner med innehåll. Jag har tillämpat lämpliga klasser för att göra kolumnerna skalan till den enhet de tittar på.

I avsnittet #introduction gjorde jag inte bara mittkolvens fullbredd. I stället för att se till att introduktionsposten var läsbar gjorde jag det mindre och gav det lämpliga offset- klasser för varje skärmstorlek.

Vertikal avstånd av innehållsavsnitt är något du måste göra för dig själv i varje ram, så igen, jag behövde några anpassade CSS:

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

Inget speciellt där. Eftersom bara om allt, inklusive rutnätet, är åtskilda med ems, använde jag dem för vaddering för att hålla sakerna visuellt konsekventa. Tänk på embaserad elementavstånd som ett inbyggt baslinjenät som du enkelt kan dra nytta av.

Så här ser det hela ut nu:

Sidfoten

Låt oss ge oss en dead-simple footer, med ett par navigeringslänkar och ett upphovsrättsmeddelande, för varför inte?

Här har jag inkluderat en Inline List (se ovan) för de sidfotarna och två kolumner som går vertikalt i telefonstorlek. Här är CSS jag använde:

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

Och voilà! En målsidan för blottbenet för att anpassa dig till ditt hjärtans innehåll. Så här ser det hela ut:

Ta tag i zip-filen om du vill, och spela med koden som redan finns där. Börja från början och ta en titt på källan. Eller så kan du bara ta en titt nedan på de träningsmaterial som andra har gjort ...

Tutorials & Training

Utbildningsmaterial av ZURB

Som du kanske förväntar dig, har killarna på ZURB gått bortom dokumentationen genom att ge oss några egna träningsmaterial. Dessa tar form av Grundkurs , och den Avancerad grundkurs . Dessa träningsmaterial är avsedda att hämtas och ses lokalt.

ZURB erbjuder även betalda träningskurser som kan tas online. Du kan hitta mer information om detta på deras hemsida .

Screencasts av Webdesigner Depot

Det är rätt! Vi har gjort egna träningsvideor med en särskild inriktning på Stiftelsen 5. Kolla in dem på Youtube: Stiftelsen 5 Inledning , och Använda Stiftelsens avancerade funktioner

Komma igång med ZURB Foundation 5 Grid

Detta uppsättning screencasts av james stone täcker alla grunderna. Tema inkluderar: Ställa in projektet, Börja med skrivbordet, Nested Desktop Grids, Lägga till platshållare bilder, Skapa mobilupplevelse och Raffinera Tablet Experience.

ZURB Foundation 5 ramtillsatser

Killarna på ieatcss.com gick och skrev en hel e-bok om Foundation 5. Du kan hitta sina nybörjare handledning här. Om du vill ha något mer avancerat kan du ladda ner deras ebook för 29 USD.

Varför skulle du betala det? För att istället för att bara berätta hur man använder ramverket förklarar de hur allt fungerar. Och jag menar allt, inklusive JavaScript-plugins.

Mastering Foundation Zurb. handledning från A till Z

Detta är en annan uppsättning av handledning, följt av en valfri ebook. Dessa tillhandahålls av MonsterPost, TemplateMonster-bloggen.

Stiftelsens sassy stilar förklaras

Om du har längtat efter en något mer avancerad, djupgående handledning, Varsågod ! I det här inlägget, våra vänner på Tuts + Beskriv, i detalj, hur man anpassar FOundation från Sass-filer upp.

Om du aldrig har arbetat med Sass-filer tidigare, börja här.

Hur man skapar lyhörda tabeller i Foundation

Slutligen visar de fantastiska killarna på Sitepoint oss hur man skapar mottagliga tabeller . Tänk på att det här är en lösning som Foundation tillämpar som standard. I den här handledningen kan du lära dig hur du tar en specifik komponent i stiftelsen och integrerar den i ett annat projekt.

(Om du är ny för webbdesign, kan du ha hört något om att tabeller är "onda". Tja, om du använder dem för att layouta ut din webbplats är det helt sant. Ibland är data bäst representerade i tabulärformat, så det är bra att lära sig att göra tabeller läsbara på mobila enheter.)

Forks

Gumby - en stiftgaffel

En vacker sak om open source-ramar som Foundation är att deras licenser tillåter människor att ta dem, ändra dem, och till och med kalla dem själva. Designerna och utvecklarna på Digital kirurger gjorde just det.

De behöll stiftelsens strukturella delar och innehöll då några intressanta nya användargränssnittskomponenter och jQuery-plugins. Resultatet namngavs Gumby , och det är en fantastisk ram i sig själv.

Där Foundation är utformat för att vara flexibelt och passar både innehållsdrivna webbplatser och webbapplikationer, är Gumby mer specialiserad. Det är inriktat på en sak: innehållsdrivna webbplatser och den enkla skapandet av dem.

Nästan platt UI

Förändringarna till Stiftelsen i den här gaffeln är så subtila att jag inte är säker på att det ska kallas en gaffel eller ett tema. Det är i grunden Stiftelse 5.2.2 med bara några, små estetiska förändringar.

Det som gör det intressant för mig är att dessa förändringar plockar "plattdesignen" på väldigt små sätt. Tanken bakom det verkar vara att vissa användargränssnitt, liksom knappar, borde behålla en subtil referens till den tredje dimensionen.

Det är lite skeuomorf design, och jag tror att det faktiskt kan förbättra användbarheten. Tja, för vissa användare, hur som helst.

Diverse resurser och verktyg

Här är några intressanta Foundation-relaterade verktyg och saker som inte passade in i någon annan kategori:

Byggblock av ZURB

De Byggklossar är utdrag av kod byggd med och / eller för Foundation. Dessa inkluderar nya användargränssnittskomponenter, återanvändbara innehållsinställningar och mer.

Sublima textfragment

Sublim Text är en fantastisk textredigerare som används av programmerare världen över. Dessa snippets (bitar av kod som är avsedda för enkel införing i en fil) är i grunden avsedda att göra byggnadslayouter med Foundation gå så mycket snabbare. De är kompatibla med både Sublime Text 2 & 3.

Experimentell nätgenerator

Är det vanliga tolv kolumnen inte som du vill, eller inte rätt för ditt projekt? Gör sedan en ny! Hoppa bara till det här nätgenerator , ange dina värden och ta din CSS.

Tänk på att CSS verkar vara baserad på en äldre version av Foundation, så du kan behöva anpassa den till de nyare klassnamnen och responsiva klasserna. Ändå gör det alla de hårda beräkningarna för dig.

bookmark

Bokmärken är små verktyg, vanligtvis byggda med JavaScript, som kan placeras i din bokmärkesfält. När du har aktiverat dem kan de dela den aktuella sidan, visa användbar information i en överlagring och många andra användbara små saker.

De Grid Displayer Bookmarklet av Antoine Lefeuvre kan användas för att överlappa ett visuellt rutnät ovanpå vilken sida du arbetar för just nu. Nätet är anpassningsbart, men du kan enkelt ställa in det till grundinställningarna.

De Vertikal Rhythm Grid Bookmarklet av Kevin Altman gör mycket samma sak som Grid Displayer. Skillnaden är att i stället för vertikala linjer får du en massa horisontella linjer som hjälper dig att hantera det vertikala utrymmet mellan element.

Den [Responsive Design Bookmarklet] av Victor Coulon kommer att ladda om den aktuella sidan du är inne i ett verktyg som gör att du snabbt kan förhandsgranska dina mönster i olika upplösningar.

En titt på vad som kommer

Du skulle bättre tro att ZURB inte sitter stilla. Tillsammans med alla andra saker som de gör, är de svåra på jobbet. De har några coola saker som kommer, som:

Foundation for Apps

ZURB skapar en helt ny version av Foundation som inte ersätter Foundation 5, men arbetar längs sidan. Det kommer att innehålla funktioner specifikt för att designa, prototypa och bygga webbapplikationer.

Funktionerna kommer att innehålla ett nytt rutnät, integration med Angular.js, nya funktioner som är utformade speciellt för prototyper och mer. För att läsa mer om vad de gör, se vad de själva måste säga: Nästa Stiftelse .

Motion UI

Tekniskt sett kommer Motion UI att vara en del av denna nya, appcentrerade version av Foundation, men jag antar att den kommer att finnas som en separat komponent för användning var som helst. (Det är en utbildad gissning, inget mer ...) Vad är det? Det är ett animationsbibliotek.

Moderna appar använder stor användning av animering, inte bara för att imponera på användarna, men för att förbättra användbarheten. Motion UI är utformad så att det blir enklare för oss att bygga komplexa gränssnitt.

Enligt ZURB-killarna själva:

Och medan jag tror att den avsiktliga, fullständiga elimineringen av skeuomorphism kan ha varit en liten överreaktion i första hand (se vad jag sa tidigare om "nästan platt användargränssnitt") är jag glad att vi ska komma på alternativ . Vi behöver nya sätt att berätta för användarna hur du får ut mesta möjliga av våra produkter, och animering är ett bra sätt att hantera det.

Slutsats

Stiftelsen är precis vad namnet antyder. Det är en utgångspunkt, och det är en bra på det. Det är inte den enda stora ramen där ute, men det är ett solidt val för alla som vill bygga snygga produkter snabbare.

Är det rätt för dig och dina projekt? Ta en titt inuti och ta reda på.