Bygga webbplatser Superfast med Foundation 5 [En guide]
Genom att använda en frontendram kan du förbättra ditt webbdesign arbetsflöde på många sätt. Det kan hjälper dig att följa moderna designprinciper såsom mobil-första tillvägagångssätt, semantisk markering och responsiv design. Du kan ta hävstångseffekt för många färdiga CSS- och JavaScript-element och betydligt påskynda din utvecklingsprocess, frigör mer tid att fokusera på visuell och användarupplevelse design.
Zurb Foundation 5 är en av de mest kraftfulla frontenramarna ute på marknaden. Det är logiskt byggt, lätt att använda och helt gratis. Det låter dig använda en flexibelt CSS-nät den där underlättar skapandet av en ren, användarvänlig layout. Stiftelsens ramverk är också kraftigt testad, så det tar hand om kompatibilitet med kors-webbläsare och tvärenhet.
I denna handledning kommer jag att visa dig hur du kan bygga en hemsida superfast med Zurb Foundation 5. Du kan ta en titt på det slutliga resultatet på demoversidan.
Jag ska skapa webbsidans layout, uppgiften att lägga till subtila designelement väntar på dig. Webbplatsen som vi kommer att skapa tillsammans i denna handledning kommer att uppnå drömmen om den moderna UX-designer: den kommer att vara responsiv, mobil-först, användarvänlig och semantisk.
På grund av längden på den här guiden är här genvägarna för att komma till den sektion du vill ha snabbt:
- Ladda ner Foundation 5
- Förstå nätet
- När du ska använda Large-N, Medium-N och Small-N-klasserna
- Lägga till menyn översta menyn
- Populera huvuddelen
- Lägga till en panel för populära inlägg
- Lägga till 3 fler inlägg till den populära panelen
- Prettying Up CSS
- Lägger till lite mer innehåll
- Lägga till pagination
- Följer sidofältet
- Nyhetsbrevet formuläret
- Flex Video
- Sidpanelmenyn
- Slutsats
1. Ladda ner Foundation 5
Du kan ladda ner Foundation 5 i 4 olika former:
- den fullständiga koden
- En lättare version med endast den väsentliga koden
- en anpassad version där du kan anpassa vad du behöver och vad som inte är
- en Sass-version om du vill ställa in dina variabler och mixins i SCSS.
I denna handledning väljer jag Komplett kod med vanilj CSS, men självklart kan du välja andra versioner om du vill effektivisera din webbplats och bara använda vad du verkligen behöver.
När du har laddat ner och packat upp zip-filen öppnar du index.html-filen i din webbläsare och du ser något så här:
Ja, devs inkluderade praktiska länkar i indexfilen. Du kan lämna den här vägen och skapa en ny fil för din prototyp med namnet home.html eller något liknande, men du behöver inte behålla det som du enkelt kan nå Foundation Documentation när du vill.
Öppna filen index.html i din favoritkodredigerare och ta bort allt innanför sektionen, men före stängningen Stilen reglerar vi lägger till i app.css filen till ganska upp vår prototyp är dessa: Eftersom stiftelsen 5 använder relativa enheter, vi behöver använda “em”-s eller “rem”-s istället för pixlar att hålla sig till reglerna. (Du kan läsa om CSS-enheter: Pixels vs ems vs% här.) Jag använde Firefox Firebug-förlängning för att avgöra var jag måste stryka Foundation 5s CSS-regler, du kan använda andra webbutvecklings webbläsartillägg om du vill. Här i det här korta CSS-fragmentet behövde vi endast åsidosätta Foundations standard CSS en gång, vid den sista regeln (.row .row.popular-main). Så här ser demobilden ut nu: Med samma regler som tidigare lägger vi till lite mer innehåll i huvuddelen av sidan. Innehållet som vi lägger till nu kommer att vara Senaste inläggen med små miniatyrbilder. Stiftelsen 5 har riktigt coola förberedda miniatyrstilar som vi kommer att använda till i detta steg. Foundation Thumbnails använder a förkonstruerad CSS-klass kallad “th” som vi behöver lägga till i bilderna som vi vill visa som miniatyrer på det sätt som du kan se det i kodfliken nedan. För varje senaste inlägg lägger vi till en ny rad under den populära panelen med vår anpassad CSS-klass kallad “senaste posten”. På tablett- och skrivbordsstorlek visar vi en liten miniatyrbild med Stiftelsens miniatyrklass till vänster och titeln och en kort beskrivning till höger. På mobilen kommer rubriken och beskrivningen att gå under miniatyren. Nu använde jag “mellan 3 kolumner” och “medellånga 9 kolumner” klasser för att få dem att dela upp skärmen till 1: 3, 25% för bilden och75% för texten upp från medelstorlek. Sätt följande kodbit under den populära panelen tre gånger (för de tre senaste inläggen). Här inkluderar jag bara koden för en senaste postrad, eftersom alla använder samma HTML-markering, skiljer endast innehållet från varandra. Innehåll av senaste inlägget ... Vår anpassade CSS-fil skapades i steg 4.3, app.css får också några nya stilregler för att hålla seriet av demo städat. Notera: Om du vill lägga till din egen anpassade CSS till Foundation, glöm aldrig att kolla, med ett web dev-verktyg, där du måste åsidosätta standardreglerna. I CSS-snippet nedan måste vi åsidosätta dem i den första regeln (.row.row.latest-post). I den andra regeln räcker det att bara använda vår egen anpassningsväljare (.latest-post h4). Vår prototyp ser nu ut så här: I det här steget lägger vi till en cool pagination under de senaste inläggen. Stiftelsen 5 ger oss en hjälpande hand genom sina praktiska, färdiga paginationskurser. Vi använder samma kod i det här steget som du hittar i “Avancerad” avsnittet inuti Pagination Docs. Här är de senaste inläggen med den nya Paginations sektionen: Nu när vi är redo med huvudinnehållet på vår demoplats är det dags att fylla i rätt sidofält. Det högra sidofältet glider under huvudinnehållet på mobil- och tablettstorlekar. Du måste infoga alla kodavsnitt i det här avsnittet inuti Den vänstra sidofältet innehåller en nyhetsbrevsregistreringsformulär (1), en senaste video (2) och en sidospelsmeny med ackordspelare under smeknamnet “Vår kokbok” (3). I slutet av detta steg kommer vi att vara redo med vår demo som kommer att se ut så här: För att bygga ett formulär i Stiftelse 5 behöver du inte göra något annat, bara placera gallret i en HTML-tagg. Om du tittar på kodfliken nedan ser du att vi lägger formuläret i en rad där vi ställer in olika CSS-valörer för alla 3 nät: “små-12”, “medel 9”, och “stor-12”. Vi valde den här lösningen, eftersom en 100% bred Nyhetsbrev Form ser cool ut på mobilstorlek, men det är verkligen verkligen besvärligt på tablettstorlek som det blir mycket bred. Lyckligtvis låter Stiftelsen 5 använda oss “Ofullständiga rader”: vi måste bara lägga till “slutet” klass till CSS klass definition av den ofullständiga kolumnen. Så här ska det hända här: På mobilstorlek visas sidobalk under huvudinnehållet med en nyhetsbrevsblankett som täcker hela skärmen. I medelstorlek kommer sidofältet att ligga under huvudinnehållet, men nyhetsbrevet täcker bara 75% av skärmen och resterande 25% kommer att vara tomma. På skrivbordsstorlek kommer sidofältet bredvid huvudinnehållet, och nyhetsbrevet täcker hela bredden på sidofältet igen. Se Grid Docs för att läsa mer om ofullständiga rader. Titta nu inuti rubrik margin-bottom: 2em; .Popular-additional h4 font-size: 1.125em; margin-top: 0.4em; .row.row.popular-main margin-bottom: 1.5em;
4.4 Lägga till lite mer innehåll
Titel på senaste inlägget
.rad .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; typsnittstorlek: 1,125em;
4.5 Lägga till paginering
5. Följa sidofältet
5.1 Nyhetsbrevet formuläret
Anmäl dig till vårt nyhetsbrev
Stiftformularerna har många andra layoutalternativ som Prefix Label, Prefix Radius Label, Postfix Button och Postfix Label. Vi valde alternativet Postfix Button här eftersom det är mer användarvänligt: användare kan klicka på det och skicka blanketten samtidigt.
Inuti formuläret lägger vi till en ny kapslad rad som delar skärmen till 2: 1. Textinmatningen kommer att få 8 kolumner och postfix-knappen kommer att få 4. Eftersom vi vill ha denna layout även på mobil skärm, ställer vi in “små-8 kolumner” och “små-4 kolonner” CSS-väljare här, Small Grid är den minsta storleken där vi vill implementera denna markering.
Du kan se en ny sak i HTML-koden ovanför vilken är “rad kollapsa” klass. Detta är Foundation 5: s inbyggda stil. Som standard finns en rännan mellan två närliggande kolumner, men om vi lägger till “kollaps” klass till vår rad, kommer rännan att försvinna. Vi gör det här eftersom vi vill att knappen ska vara bredvid textinmatningen utan mellanrum mellan dem.
Nu är det dags att infoga denna kodbit i
5.2 Flex Video
Under avsnittet Nyhetsbrev lägger vi till ett dagligt videoprecept i vårt sidofält. Stiftelsen 5 hjälper oss göra inbäddade videor lyhörda och tvinga dem att skala automatiskt med sin Flex Video-funktion.
Flex Videos använder den inbyggda “flex-video” CSS-klass. Vi skapar en ny rad för sidopanelen Daily Video Recipe och lägger en bred kolumn i den med “små-12 medellånga 9 stora 12 kolonner slutar” CSS-väljare av samma anledning använde vi en ofullständig rad i mellannätet i föregående steg.
Här är koden du behöver klistra in under avsnittet Nyhetsbrev. Du kan använda någon video från Youtube, Vimeo etc.
Daglig Video Recept
5.3 Sidpanelmenyn
För Sidebarmenyn använder vi Accordion-funktionen i Foundation 5. Accordions är webelement som expanderar och kollapserar innehållet i logiska sektioner.
På vår demo webbplats är dessa logiska sektioner de 3 olika livsmedelsgrupperna (Huvudrätt, Sidrätter, Efterrätter), och varje grupp innehåller fler mindre grupper som “Fjäderfän”, “Fläsk”, “Nötkött”, “Vegetarian”.
Vi placerar hela sidofältet Accordion i en bred kolumn med samma logik som i 5,1 och 5,2 steg före. Vi lägger dragspelet inuti det som en orörd lista med lämpliga inbyggda CSS-klasser som “dragspel” och “dragspels navigering”.
Eftersom Foundation Accordions fungerar med JavaScript kan du anpassa sitt beteende med hjälp av förinställda JavaScript-variabler om du vill. För att göra det, kolla på “Valfri JavaScript-konfiguration” avsnittet i Accordion Docs. Följande kodstämpel kommer under Flex Video-sektionen inuti index.html-filen.
Slutsats
Nu när vi är redo med vår demo-sida, låt oss se vad du kan åstadkomma med Foundation 5. De element som vi använde i denna demo är bara en liten uppsättning av stiftelsens ramverk. Det finns många andra saker du kan använda i din design, till exempel anpassningsbara ikonstänger, brödsmulor, lampor, räckvidden, formulärvalidering och många andra. Dokumenten är ganska välskrivna och de hjälper utvecklare med många kodexempel.
Om du är bekant med Sass har du ännu fler alternativ, eftersom varje avsnitt i Docs förklarar hur du kan bygga dina egna mixins och vilka Sass-variabler du kan använda för att anpassa din webbplats. Innan du börjar utforma din webbsida glöm inte att kontrollera Foundation Framework-kompatibiliteten så att den fungerar på alla webbläsare du behöver bygga för.
- Visa demo
- Hämta källa
