Bygg Websites Superfast med Foundation 5 [En Guide]
Brug af en frontend ramme kan forbedre din webdesign workflow på mange måder. Det kan hjælper dig med at følge moderne design principper såsom mobil-første tilgang, semantisk markup og lydhør design. Du kan tag indflydelse på mange brugsklare CSS- og JavaScript-elementer og betydeligt fremskynde din udviklingsproces, frigør mere tid til at fokusere på visuelle og brugeroplevelsesdesign.
Zurb Foundation 5 er en af de mest kraftfulde frontend-rammer på markedet. Det er logisk bygget, let at bruge og helt gratis. Det lader dig gøre brug af a fleksibelt CSS-net at gør det lettere at oprette et rent, brugervenligt layout. Stiftelsens ramme er også stærkt testet, så det tager sig af cross-browser og cross-device kompatibilitet.
I denne øvelse vil jeg vise dig hvordan du kan opbygge en hjemmeside superfast med Zurb Foundation 5. Du kan se på det endelige resultat på demosiden.
Jeg vil oprette layoutet på hjemmesiden, opgaven med at tilføje subtile designelementer venter på dig. Den hjemmeside, vi vil oprette sammen i denne tutorial, vil nå drømmen om den moderne UX-designer: den vil være lydhør, mobil-først, brugervenlig og semantisk.
På grund af længden af denne vejledning er her genvejene for at komme til den sektion, du vil have hurtigt:
- Download Foundation 5
- Forstå nettet
- Hvornår skal du bruge Large-N, Medium-N og Small-N-klasserne
- Tilføjelse af topmenulinjen
- Populere hoveddelen
- Tilføjelse af et panel til populære indlæg
- Tilføjelse af 3 flere indlæg til det populære panel
- Prettying Up CSS
- Tilføjelse af noget mere indhold
- Tilføjelse af pagination
- Udfylde sidebjælken
- Nyhedsbrevet Formular
- Flex Video
- Sidebjælkemenuen
- Konklusion
1. Download Foundation 5
Du kan downloade Foundation 5 i 4 forskellige former:
- den komplette kode
- en lettere version med kun den væsentlige kode
- en brugerdefineret version, hvor du kan tilpasse hvad du har brug for og hvad ikke
- en Sass-version, hvis du vil indstille dine variabler og mixins i SCSS.
I denne vejledning vælger jeg den komplette kode med vanilje CSS, men selvfølgelig kan du vælge andre versioner, hvis du ønsker at strømline dit websted og kun bruge det, du virkelig har brug for.
Når du har downloadet og pakket ud zip-filen, skal du åbne index.html-filen i din browser, og du vil se noget sådan her:
Ja, devs indeholdt nyttige links i indeksfilen. Du kan forlade det på denne måde og lave en ny fil til din prototype med navnet home.html eller noget lignende, men du behøver ikke rigtig at beholde det, da du nemt kan nå Foundation Documentation, når du vil.
Åbn filen index.html i din foretrukne kode editor og Slet alt inde i afsnit, men før afslutningen Stilen regler, som vi tilføjer til app.css fil til ret op vores prototype er disse: Som Foundation 5 bruger relative enheder, vi skal bruge “em”-s eller “rem”-s i stedet for pixels at følge reglerne. (Du kan læse om CSS-enheder: Pixels vs ems vs% her.) Jeg brugte Firefox's Firebug-udvidelse til at bestemme, hvor jeg skal tilsidesætte Foundation 5s CSS-regler, du kan bruge andre webudviklingsbrowserudvidelser, hvis du vil. Her i dette korte CSS-stykke måtte vi kun tilsidesætte Foundation's standard CSS kun én gang ved den sidste regel (.row .row.popular-main). Sådan ser demosiden ud nu: Ved at anvende de samme regler som før vil vi tilføje noget mere indhold til hoveddelen af siden. Det indhold, som vi vil tilføje nu, vil være Seneste indlæg med små miniaturebilleder. Stiftelsen 5 har rigtig seje præ-forberedte miniaturebilleder, som vi vil gøre brug af i dette trin. Foundation Miniaturer bruger a præ-bygget CSS klasse kaldet “th” at vi skal føje til de billeder, vi vil vise som miniaturebilleder, som du kan se det i kodestykket nedenfor. For hvert nyt indlæg tilføjer vi en ny række under det populære panel med vores Brugerdefinerede CSS-klasse kaldes “nyeste indlæg”. På tablet- og skrivebordsstørrelse viser vi et lille miniaturebillede ved hjælp af stiftelsens miniatureklasse til venstre og titlen og en kort beskrivelse til højre. På mobilen vil overskriften og beskrivelsen gå under miniaturebilledet. Nu brugte jeg “mellem 3 kolonner” og “mellem 9 kolonner” klasser for at få dem til at opdele skærmen i 1: 3, 25% for billedet og75% for teksten op fra mellemstørrelse. Indsæt følgende kodestykke under det populære panel tre gange (for de tre nyeste indlæg). Her inkluderer jeg kun koden for en nyeste postrække, da alle bruger samme HTML-markering, er kun indholdet anderledes. Indhold af seneste indlæg ... Vores brugerdefinerede CSS-fil oprettet i trin 4.3, app.css får også nogle nye stilregler for at holde udseendet af demoen ryddet. Bemærk: Hvis du vil tilføje din egen brugerdefinerede CSS til Foundation, skal du aldrig glemme at tjekke, med et web dev-værktøj, hvor du skal tilsidesætte standardreglerne. I CSS-udsnittet nedenfor skal vi tilsidesætte dem i den første regel (.row.row.latest-post). I den anden regel er det nok at bruge vores egen brugervælger (.latest-post h4). Vores prototype ser nu sådan ud: I dette trin vil vi tilføje en kølig pagination under de seneste indlæg. Foundation 5 giver os en hjælpende hånd ved sine praktiske, brugsklare paginationsklasser. Vi bruger den samme kode i dette trin, som du kan finde i “Fremskreden” sektion inde i Pagination Docs. Her er de nyeste indlæg med den nyligt tilføjede paginationsafdeling: Nu hvor vi er klar med hovedindholdet på vores demo-site, er det tid til at udfylde det rette sidebjælke. Det højre sidebjælke glider under hovedindholdet på mobil- og tabletstørrelser. Du skal indsætte alle kodestykker i dette afsnit inde i Den venstre sidebjælke indeholder en nyhedsbrevsskema (1), en nyeste video (2) og en accordeon-stil sidebjælkemenu under kaldenavnet “Vores Kogebog” (3). I slutningen af dette trin vil vi være klar med vores demo, der vil se sådan ud: For at opbygge en formular i Foundation 5, behøver du ikke gøre noget andet, bare placere gitteret inde i a HTML-tag. Hvis du kigger på kodestykket nedenfor, vil du se, at vi sætter formularen i en række, hvor vi indstiller forskellige CSS-selektorer til alle 3 net: “small-12”, “medium-9”, og “stor-12”. Vi valgte denne løsning, fordi en 100% bred nyhedsbrev form ser cool ud på mobil størrelse, men det er virkelig virkelig akavet på tabletstørrelse, som det bliver meget bred. Heldigvis lader Foundation 5 os bruge “Ufuldstændige rækker”: vi skal bare tilføje “ende” klasse til CSS klasse definition af den ufuldstændige kolonne. Så dette er hvad der sker her: På mobilstørrelse vises sidebjælken under hovedindholdet med en nyhedsbrevsskema, der dækker hele skærmen. På mellemstørrelse forbliver sidebjælken under hovedindholdet, men nyhedsbrevet dækker kun 75% af skærmen, og de resterende 25% forbliver tomme. På skrivebordsstørrelse ligger sidebjælken lige ved siden af hovedindholdet, og nyhedsbrevet dækker hele bredden af sidebjælken igen. Se Grid Docs for at læse mere om ufuldstændige rækker. Tag nu et kig inde i header margin-bottom: 2em; .Popular-additional h4 font-size: 1.125em; margin-top: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Tilføjelse af noget mere indhold
Titel på seneste indlæg
.række .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; skrifttypestørrelse: 1,125em;
4.5 Tilføjelse af pagination
5. Befolkning af sidebjælken
5.1 Nyhedsbrevet
Tilmeld dig vores nyhedsbrev
Grundformularer har mange andre layoutindstillinger som f.eks. Prefix Label, Prefix Radius Label, Postfix Button og Postfix Label. Vi valgte alternativet Postfix Button her, da det er mere brugervenligt: Brugere kan klikke på det og sende formularen på én gang.
Inde i formularen tilføjer vi en ny indlejret række, der deler skærmen til 2: 1. Tekstindtastningen får 8 kolonner, og postfix-knappen får 4. Som vi ønsker at have dette layout selv på mobilskærm, sætter vi “små-8 kolonner” og “små-4 søjler” CSS-selektorer her, det lille net er den mindste størrelse, hvor vi vil implementere denne markering.
Du kan se en ny ting i HTML-koden, over hvilken er “række sammenbrud” klasse. Dette er Foundation 5's indbyggede stil. Som standard er der en rende mellem to tilstødende kolonner, men hvis vi tilføjer “falde sammen” klasse til vores række, vil renden forsvinde. Det gør vi, fordi vi vil have knappen lige ved siden af tekstindtastningen uden mellemrum mellem dem.
Nu er det tid til at indsætte denne kodestykke i
5.2 Flex Video
Under sektionen Nyhedsbrev tilføjer vi en daglig videoopskrift til vores sidebjælke. Stiftelse 5 hjælper os gøre indlejrede videoer lydhør og tvinge dem til at skalere automatisk med sin Flex Video funktion.
Flex Videos bruger den indbyggede “flex-video” CSS klasse. Vi opretter en ny række til sidebarafsnittet Daily Video Recipe og placerer en bred kolonne i den med “små 12 mellem 9 og 12 store kolonner slutter” CSS-selektorer af samme grund brugte vi en ufuldstændig række i mellemlinjen i det foregående trin.
Her er koden du skal indsætte under nyhedsbrevet. Du kan bruge en video fra Youtube, Vimeo osv.
Daglig Video Opskrift
5.3 Sidebjælkemenuen
Til sidepanelmenuen bruger vi Accordion-funktionen i Foundation 5. Accordions er webelementer, der udvider og sammenbruger indholdet i logiske sektioner.
På vores demo side er disse logiske sektioner de 3 forskellige fødevaregrupper (Hovedretter, Sideborde, Desserter), og hver gruppe indeholder flere mindre grupper som f.eks. “Fjerkræ”, “Svinekød”, “Bøf”, “Vegetarisk”.
Vi placerer hele sidebjælken Accordion i en bred kolonne med samme logik som i trin 5.1 og 5.2 før. Vi sætter accordion inde i det som en uordnet liste med de relevante indbyggede CSS klasser som “harmonika” og “harmonika-navigation”.
Da Foundation Accordions arbejder med JavaScript, kan du tilpasse dets adfærd ved hjælp af forudindstillede JavaScript-variabler, hvis du vil. For at gøre det, se på “Valgfri JavaScript-konfiguration” afsnit i Accordion Docs. Følgende kodestykke kommer under Flex Video sektionen inde i index.html filen.
Konklusion
Nu hvor vi er klar med vores demo-site, så lad os se, hvad du mere kan opnå med Foundation 5. De elementer, vi brugte i denne demo, er kun et lille sæt af fundamentets rammer. Der er mange andre ting, du kan gøre brug af i dit design, som f.eks. Brugerdefinerede ikonbjælker, brødkrummer, lysbokse, rækkevidere, form validering og mange andre. Dokumenterne er ret velskrevne, og de hjælper udviklere med mange kodeeksempler.
Hvis du er bekendt med Sass, har du endnu flere muligheder, da hvert afsnit i Docs forklarer, hvordan du kan opbygge dine egne mixins, og hvilke Sass-variabler du kan bruge til at tilpasse dit websted. Før du begynder at designe din webside, skal du ikke glemme at kontrollere Foundation Framework-kompatibiliteten for at sikre, at den fungerer på alle browsere, du skal bygge for.
- Se Demo
- Download kilde
