I den stora världen av snabba prototypiska CSS-ramar och verktygssatser finns det massor av olika alternativ att välja mellan, men sedan Twitters Bootstrap slog scenen verkar det som om det i stor utsträckning har gobbled upp denna marknad. Finns det utrymme eller anledning till något annat?
Folk på Zurb tror det och håller inte på att överge sitt välgrundade grundprojekt. Efter att ha skrivit om Bootstrap flera gånger tidigare, kommer jag att hoppa in i Foundation idag och se vad jag tycker.
Möt Foundation
Så vad är Foundation? Zurb beskriver det som en lättanvänd, kraftfull och flexibel ram för att bygga prototyper och produktionskod på vilken typ av enhet som helst.?
Från den beskrivningen kan du berätta att Zurb lägger stor vikt på cross-device-aspekten i sitt layoutnät. Intressant nog, ordet? Lyhörd? visas inte någonstans på stiftelsens webbplats (som jag kan hitta), men fördelarna är definitivt lika: design ett projekt som fungerar överallt.
Är det som bootstrap?
Dessa två projekt är verkligen inte identiska, men de handlar om så nära direkt konkurrenter som du kan få. I grund och botten är de lika stora att om du använder en, använder du nästan inte den andra.
Både Bootstrap och Foundation syftar till att ge dig alla verktyg som du behöver för att snabbt utföra CSS-baserad layout och prototyparbete med några JavaScript-godsaker som kastas in. De marknadsförs också med stor tonvikt på ren minimal design, vilket är ett resultat av den omfattande standard styling på saker som typografi. Även deras hemsidor ser märkbart ut:
Rutnätet
Det första som jag vänder mig till med något ramverk är nätet. Layoutsystemet är ofta hörnstenen som hela upplevelsen är byggd på så att få det här är en stor sak.
Med Foundation startar du med ett flexibelt tolv kolumngrid som svarar bra på webbläsarens storlek och använder mediefrågor för att hantera övergången till mindre enheter. I Bootstrap har du också ett tolv kolumngrid som gör stor användning av mediefrågor. Här har du möjlighet att välja mellan flytande och statiska kolumner, vilket är trevligt.
Genomförandet av Foundation Grid bör vara en snap om du tidigare har använt andra gridsystem. Ja, det innebär att du använder icke-semantiska klassnamn, så om du hatar ramar av den anledningen kommer det inte att bli den som ändrar dig.
Systemet här är lätt att du kan hämta det nästan omedelbart. Varje gång du vill ha en ny rad, skapa en div med klassen? Rad ?. Härifrån har du tolv kolumner att fylla. Du kan dela den i halv med två sex kolumn divs, klippa den i tredje part med tre fyra kolumn divs, etc. Använd bara en klass som motsvarar antalet kolumner du skulle vilja fylla i tillägg till kolumnerna? klass.
Om vi återskapar det här exemplet i Bootstrap, är syntaxen extremt likartad, men mer kortfattad. Bootstrap kräver inte extra kolumner? klass så att du kan trimma tillbaka din markering bara lite. Visserligen, men? Span6? säkert läser inte så bra som? sex kolumner ?.
Båda nätverkssystemen har alla avancerade funktioner som du behöver: nestning, offsets, pushing / pulling etc. Som med koden ovan kommer du att upptäcka att stiftelsens syntax är lite enklare och lättare att läsa medan Bootstraps är mer kortfattad.
Vem vinner rutnätet?
Jag är en rytm fanatiker och älskar verkligen att gräva runt och se vad som gör att dessa saker tickar. Jag har byggt sidor med både Bootstrap och Foundation grids och finner hon ärligt både för att vara utmärkt. De är så liknande i tillvägagångssätt som jag inte tror att detta kommer att vara det avgörande för alla som försöker välja mellan de två.
Om du hatar en av dem kommer du förmodligen att hata dem båda och om du gillar en av dem kommer det inte vara svårt att byta till det andra. Det brukade vara så att Bootstrap skulle ha förlorat den här striden utan en andra tanke, men nu när Bootstrap 2 har blivit mottaglig, förklarar jag det.
Grundläggande användargränssnitt
Båda dessa ramar innehåller pre-styled men anpassningsbara UI-element så att du snabbt kan mockup din app eller webbsida utan att för mycket tänkt på hur du ska strukturera olika bitar.
Låt oss börja med att titta på en av de mest grundläggande UI-bitarna, en knapp. I grunden är allt du verkligen behöver för en knapp en ankare med knappen? klass tillämpas
Men detta kommer att skapa en otroligt enkel knapp. Om du vill göra det mer intressant, har varje ytterligare stycke styling en annan tillhörande klass. Till exempel, nedanför har jag gjort en liten, blå, blank knapp med rundade hörn.
Historien är densamma här som med gallret. Stiftelsens stil är mer verbos, men speciellt i det här fallet möjliggör det en enklare att tweak upplevelse. I stället för att dela upp klasserna av vad de gör, tilldelar Bootstrap olika personligheter till varje klass. Så du kan välja mellan? Btn-info? och? btn-varning? för olika stilalternativ.
När det gäller styling tycker jag personligen om det subtila lutningsutseendet som Bootstrap använder bättre än det glansiga Foundation-utseendet, men det kan enkelt anpassas i båda ramarna så det är ganska mycket ett problem.
Former, flikar och etiketter Åh Min
Det är helt enkelt inte värt att gå igenom varje användargränssnitt och jämföra syntaxen, du borde få bilden nu. Båda ramarna lagrar dig på de vanligaste användargränssnitten så att du kan implementera dem med nästan ingen tung lyftning överhuvudtaget.
Flikar, navigering, brödsmulor, former, etiketter, tabeller; Om du vill ha dem, får du dem oavsett vilken av dessa du använder. Med detta sagt, om du letar efter kvantitet, tar Bootstrap verkligen ledningen här och verkar bara packa in massor av intressanta användargränssnitt. Varje ram har några unika bitar inte i den andra, men Bootstrap vinner siffrorna spelet.
JavaScript Goodies
Stiftelsen är inte bara ett CSS-bibliotek, det har också några bra JavaScript-funktioner. En av mina favoritfunktioner är Orbit-bildspelet, vilket är väldigt lätt att implementera och anpassa.
Allt du behöver för att skapa ett bildspel är en div med några bilder i den (använd alt-taggar för bildtexter). Härifrån pekar du bara på JavaScript på den div och kallar "orbiten"? fungera. Om du vill gå vidare finns det många alternativ att tweak.
Det finns också en ganska cool modal fönster plugin, några verktygstips, flikfunktionalitet, rullgardinsmenyer, varningsmeddelanden och några fina formvalideringar. Hoppa över till Bootstrap ser vi de flesta av samma typer av artiklar som implementeras på subtilt olika sätt. Återigen, trots att vi upptäcker att Bootstrap-erbjudandet är lite mer robust.
Preprocessor Support
Ett område där Foundation och Bootstrap gick sina separata sätt är med deras förprocessorstöd. Stiftelsen gick med Sass och Compass medan Bootstrap gick med LESS. Jag började som MINDRE fläkt men har sedan dess blivit vunnit över till Sass, så jag är benägen att tycka om att Stiftelsen är bättre i detta avseende, särskilt med tanke på Compass integrationen.
Kompass är ett kraftverk av förprocessorns godhet och gör det lätt att koda upp CSS3-webbläsaren med liten ansträngning. Jag har alltid varit ganska förvånad över att Bootstrap valde den LÄSTRA rutten istället.
Med det sagt är det intressant att notera att Bootstrap ganska tjänar som Compass for LESS. Precis som med Compass, kommer Bootstrap inbyggd med alla möjliga användbara mixins som hjälper dig att använda komplicerade CSS-funktioner med mycket liten handkodning.
Oavsett om du använder Foundation eller Bootstrap, så att du utnyttjar preprocessorstödet, blir det mycket lättare att anpassa och utvidga ramverket.
Klipp skit, vem vinner?
Det är svårt att deklarera en vinnare här. Som jag nämnde tidigare var Bootstrap 1 lätt underlägsen Foundation bara för att layouten var rent statisk och icke-mottaglig. Med Bootstrap 2 uppstod Twitter dock verkligen sitt spel och har byggt en exceptionell verktygssats och Foundation har lite arbete att göra om det kommer att matcha det.
Bootstrap har helt enkelt mer att erbjuda från ett strikt funktionslista perspektiv. Det är också mer kortfattat kodat, bättre organiserat och långt mer dokumenterat. Detta är ovanpå det faktum att utvecklingssamhället har omfattat omfamning av Bootstrap till den punkten att fantastiska tredje parts teman, plugins och andra extras är lätta att hitta.
Det sägs att det finns en viktig fråga här: är det större bättre? Bara för att Bootstrap verkar ha mer i det betyder inte nödvändigtvis att den är överlägsen. I världen av webbdesign och utveckling är mindre ofta mer. Stiftelsen har en enklare, mindre uppblåst känsla för det som jag verkligen uppskattade. Det är verkligen otroligt enkelt att ladda ner det och börja bryta ut webbsidor på nolltid.
Bootstrap-användare kommer att chime här och påpeka att det uppblåsta argumentet inte är tillämpligt eftersom det finns en egen Bootstrap-nedladdningsbyggare som enkelt låter dig bestämma vad du gör och inte vill ha i din ram.
Vilka tycker du är bättre?
Du bör ge båda ramarna en provkörning för att se vilken du gel med bättre. Men du kom hit för en åsikt och jag har en för dig. Om du bara vill ladda ner ett av dessa bibliotek, gå med Bootstrap. Jag är inte en Bootstrap fanboy och för att vara ärlig har jag inte ens antagit det i mitt personliga arbetsflöde. Vidare ser jag Stiftelsen som underdog och skulle älska att ge det priset här, men jag tror att det har lite att hämta innan det händer.
Men vad vet jag? Du använder dessa typer av verktyg varje dag och jag vill höra vad du tycker. Är Foundation bättre än Bootstrap? Varför eller varför inte? Skulle du överväga att använda någon av dessa i ditt arbetsflöde om du inte redan är?