Izveidot tīmekļa vietnes Superfast ar Foundation 5 [A Guide]
Izmantojot frontendu sistēmu, daudzos veidos var uzlabot jūsu web dizaina darbplūsmu. Tas var palīdzēs jums sekot mūsdienu dizaina principiem piemēram, mobilā pirmā pieeja, semantiskā atzīme un atsaucīgs dizains. Jūs varat ņemiet vērā daudzus lietošanai gatavus CSS un JavaScript elementus un ievērojami paātrināt savu attīstības procesu, atbrīvojot vairāk laika, lai koncentrētos uz vizuālo un lietotāju pieredzes dizainu.
Zurb Foundation 5 ir viens no spēcīgākajiem frontendu veidiem tirgū. Tas ir loģiski veidots, viegli lietojams un pilnīgi bez maksas. Tas ļauj jums izmantot a elastīgs CSS tīkls to atvieglo tīru, lietotājam draudzīgu izkārtojumu. Fonda sistēma ir arī ļoti pārbaudīta, tāpēc tā rūpējas par pārrobežu pārlūkprogrammu un savstarpējo saderību.
Šajā apmācībā es jums parādīšu kā jūs varat izveidot tīmekļa vietni, kas ir ārkārtīgi ātra ar Zurb Foundation 5. Jūs varat apskatīt galīgo rezultātu demonstrācijas lapā.
Es izveidoju tīmekļa vietnes izkārtojumu, tevi gaida uzdevums pievienot smalkus dizaina elementus. Tīmekļa vietne, ko mēs kopā radīsim šajā apmācībā, veiks sapni par mūsdienu UX dizaineru: tas būs atsaucīgs, mobilais pirmais, lietotājam draudzīgs un semantisks.
Šīs rokasgrāmatas garuma dēļ šeit ir īsceļi, lai ātri nokļūtu līdz vēlamajai sadaļai:
- Fonda lejupielāde 5
- Režģa izpratne
- Kad jāizmanto lielās, vidējās un mazās N klases
- Augšējā izvēlnes joslas pievienošana
- Galvenās daļas populācija
- Paneļa pievienošana populārām ziņām
- Pievienojot 3 jaunus ziņojumus populārajam panelim
- CSS klusināšana
- Papildu satura pievienošana
- Paginēšanas pievienošana
- Sānjoslas populācija
- Biļetena veidlapa
- Flex Video
- Sānjoslas izvēlne
- Secinājums
1. Fonda lejupielāde 5
Jūs varat lejupielādēt fondu 5 4 dažādās formās:
- visu kodu
- vieglāka versija ar tikai būtisko kodu
- pielāgota versija, kurā var pielāgot to, kas jums nepieciešams un kas nav
- Sass versija, ja vēlaties iestatīt savus mainīgos un maisījumus SCSS.
Šajā apmācībā es atlasīšu pilnu kodu ar vaniļas CSS, bet, protams, varat izvēlēties citas versijas, ja vēlaties racionalizēt savu vietni un izmantot tikai to, kas jums patiešām ir nepieciešams.
Kad esat lejupielādējis un izsaiņojis zip failu, atveriet failu index.html savā pārlūkprogrammā un redzēsiet kaut ko līdzīgu:
Jā, devs iekļāva ērtas saites indeksa failā. Jūs varat atstāt to šādā veidā un izveidot jaunu prototipa failu ar nosaukumu home.html vai kaut ko līdzīgu, bet jums nav nepieciešams to saglabāt, jo jūs varat viegli sasniegt fonda dokumentāciju, kad vien vēlaties.
Atveriet index.html failu savā iecienītākajā koda redaktorā un izdzēst visu iekšpusē sadaļā, bet pirms slēgšanas Stila noteikumi, ko pievienojam app.css mūsu prototips ir diezgan liels: Tā kā fonds 5 izmanto relatīvās vienības, mums ir jāizmanto “em”-s vai “rem”-s pikseļu vietā sekot līdzi noteikumiem. (Jūs varat lasīt par CSS vienībām: pikseļi vs ems vs% šeit.) Es izmantoju Firefox Firebug paplašinājumu, lai noteiktu, kur man ir jānoraida Foundation 5 CSS noteikumi, ja vēlaties, varat izmantot jebkuru citu tīmekļa izstrādes pārlūkprogrammas paplašinājumu. Šajā īsajā CSS fragmentā mums tikai bija jānorāda Fonda noklusējuma CSS tikai vienu reizi, pēdējā reizē (.row .row.popular-main). Demonstrācijas vietne izskatās šādi: Izmantojot tos pašus noteikumus kā pirms mēs pievienosim vairāk satura lapas galvenajai sadaļai. Saturs, ko mēs tagad pievienosim, būs Jaunākās ziņas ar nelieliem sīktēliem. 5. fondam ir patiešām forši iepriekš sagatavoti sīktēlu stili, kurus mēs izmantosim šajā solī. Fonda sīktēlus izmanto a iepriekš uzbūvēta CSS klase “th” ka mums ir jāpievieno attēliem, kurus vēlamies parādīt kā sīktēlus tā, kā redzat to zemāk esošajā koda fragmentā. Katram jaunākajam ierakstam mēs pievienojam jaunu rindu zem populārā paneļa ar mūsu pielāgotā CSS klase “jaunākais ziņojums”. Planšetdatorā un darbvirsmas lielumā mēs parādīsim nelielu sīktēlu, izmantojot kreisajā pusē esošo Fonda sīktēlu klasi, labo pusi un nosaukumu un īsu aprakstu. Mobilajā ierīcē virsraksts un apraksts būs zem sīktēla. Tagad es izmantoju “vidēji 3 kolonnas” un “vidēji 9 kolonnas” klases, lai tās sadalītu ekrānu 1: 3, 25% attēlam un 75% tekstam no vidēja izmēra. Trīs reizes ievietojiet zem populārā paneļa šādu koda fragmentu (trim jaunākajām ziņām). Šeit es tikai ietveru viena jaunākās rindas kodu, jo visi izmanto to pašu HTML marķējumu, tikai saturs atšķiras. Jaunākās ziņas saturs… Mūsu pielāgotā CSS fails, kas izveidots 4.3, app.css arī saņem jaunus stila noteikumus, lai saglabātu demonstrācijas izskatu. Piezīme: Ja vēlaties fondam pievienot savu pielāgoto CSS, nekad neaizmirsīsiet to pārbaudīt, izmantojot tīmekļa dev rīku, kur jums ir jānovērš noklusējuma noteikumi. Tālāk redzamajā CSS fragmentā mums ir jānorāda tie pirmajā noteikumā (.row .row.latest-post). Otrajā noteikumā ir pietiekami vienkārši izmantot mūsu pašu pielāgoto atlasītāju (.latest-post h4). Mūsu prototips tagad izskatās šādi: Šajā solī mēs pievienosim atdzist pagināciju zem jaunākajām ziņām. 5. fonds mums palīdz, izmantojot ērtas, lietošanai gatavas lapas. Šajā solī mēs izmantojam to pašu kodu, ko var atrast “Uzlabots” sadaļā Ievietošanas dokumenti. Šeit ir jaunākās ziņas ar jaunievedumu sadaļu: Tagad, kad mēs esam gatavi ar mūsu demo vietnes galveno saturu, ir pienācis laiks aizpildīt pareizo sānjoslu. Labais sānjosla būs zemāks par galveno saturu mobilajos un planšetdatora izmēros. Jums jāievieto visi šajā sadaļā esošie koda fragmenti Kreisajā sānjoslā būs iekļauta ziņu izrakstīšanās veidlapa (1), jaunākais video (2) un akordeona stila sānjosla ar segvārdu “Mūsu pavārgrāmata” (3). Šī soļa beigās mēs būsim gatavi ar mūsu demonstrāciju, kas izskatīsies šādi: Lai veidotu veidlapu 5 fondā, jums nav jādara nekas cits, vienkārši novietojiet režģi a HTML tag. Ja paskatīsieties zemāk redzamajā koda fragmentā, jūs redzēsiet, ka mēs ievietojam formu rindā, kurā mēs iestatām dažādus CSS selektorus visiem trim tīkliem: “mazs-12”, “vidēja-9”, un “liels-12”. Mēs izvēlējāmies šo risinājumu, jo 100% plaša ziņu forma izskatās atdzist mobilā izmērā, bet tas tiešām ir neērts planšetdatora izmēram, kā tas kļūst ļoti plašs. Par laimi fonds 5 ļauj mums izmantot “Nepilnīgas rindas”: mums vienkārši jāpievieno “beigas” CSS klases definīcija nepilnīgajai slejai. Tātad tas notiks šeit: mobilā izmērā sānjosla tiks parādīta zem galvenā satura ar ziņu izrakstīšanas veidlapu, kas aptver visu ekrānu. Vidējā izmērā sānjosla paliks zem galvenā satura, bet informatīvā izdevuma veidlapa būs tikai 75% no ekrāna, bet atlikušie 25% paliks tukši. Darbvirsmas izmērā sānjosla būs tieši blakus galvenajam saturam, un jaunumu veidlapa atkal sedz visu sānjoslas platumu. Skatiet režģa dokumentus, lai uzzinātu vairāk par nepilnīgām rindām. Tagad paskatieties iekšā header margin-bottom: 2em; .populārs-papildus h4 font-size: 1.125em; margin-top: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4. Papildu satura pievienošana
Jaunākās ziņas nosaukums
.rinda .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; fonta lielums: 1.125em;
4.5. Paginācijas pievienošana
5. Sānjoslas izvietošana
5.1. Biļetenu veidlapa
Pierakstieties mūsu jaunumiem
Fonda veidlapām ir daudzas citas izkārtojuma opcijas, piemēram, prefiksa uzlīme, prefiksa rādiusa etiķete, Postfix poga un Postfix etiķete. Mēs šeit izvēlējāmies Postfix pogu, jo tas ir lietotājam draudzīgāks: lietotāji var uzklikšķināt uz tā un nosūtīt veidlapu uzreiz.
Veidlapas iekšpusē mēs pievienosim jaunu ligzdotu rindu, kas sadala ekrānu uz 2: 1. Teksta ievade saņems 8 slejas, un postfix poga saņems 4. Tā kā mēs vēlamies, lai šis izkārtojums būtu pieejams arī mobilajā ekrānā, mēs iestatīsim “mazas-8 kolonnas” un “mazas-4 kolonnas” CSS atlasītāji šeit, mazais režģis ir mazākais izmērs, kur mēs vēlamies ieviest šo atzīmi.
Jūs varat redzēt vēl vienu jaunu lietu HTML kodā, kas ir “rindas sabrukums” klasē. Tas ir Foundation 5 iebūvētais stils. Pēc noklusējuma starp divām blakus esošām kolonnām ir notekas ja mēs pievienosim “sabrukums” klasē mūsu rindā, notekas izzudīs. Mēs to darām, jo mēs vēlamies, lai poga būtu tieši blakus teksta ievadei, bez starpām starp tām.
Tagad ir pienācis laiks ievietot šo koda fragmentu
5.2 Flex video
Zem ziņu sadaļas mēs pievienosim ikdienas video recepti mūsu sānjoslai. Fonds 5 palīdz mums padarīt iegultos videoklipus atsaucīgus un uzspiež tos automātiski ar Flex Video funkciju.
Flex Videos izmanto iebūvēto “flex-video” CSS klase. Izveidojam jaunu rindu Daily Video Recipe sānjoslas sadaļā un ievietojiet tajā vienu plašu kolonnu “mazas-12 vidējas 9 lielas-12 kolonnas” Tā paša iemesla dēļ CSS atlasītāji iepriekšējā posmā izmantojām nepilnīgu rindu vidējā režģī.
Šeit ir kods, kas nepieciešams, lai ielīmētu zem ziņu sadaļas. Jūs varat izmantot jebkuru video no Youtube, Vimeo utt.
Ikdienas video recepte
5.3 Sānjoslas izvēlne
Sānjoslas izvēlnei izmantosim Fonda saskaņošanas funkciju 5. Akordeoni ir tīmekļa elementi, kas paplašina un sakrīt saturu loģiskajās sadaļās.
Mūsu demo vietnē šīs loģiskās sadaļas ir 3 dažādās pārtikas grupas (galvenās ēdieni, sānu ēdieni, deserti), un katrā grupā ir vairāk mazākas grupas, piemēram, “Mājputni”, “Cūkgaļa”, “Liellopu gaļa”, “Veģetārie”.
Mēs izvietojam visu sānjoslas savienojumu vienā plašā kolonnā ar tādu pašu loģiku kā iepriekš 5.1. Un 5.2. Mēs ievietojam akordeonu tā iekšpusē kā neregulētu sarakstu ar atbilstošām iebūvētajām CSS klasēm, piemēram, “akordeons” un “akordeona navigācija”.
Tā kā Foundation Accordions strādā ar JavaScript, jūs varat pielāgot savu uzvedību, izmantojot iepriekš izveidotus JavaScript mainīgos, ja vēlaties. Lai to izdarītu, skatiet “Papildu JavaScript konfigurācija” Akordeona dokumentu sadaļā. Sekojošais koda fragments atrodas zem Flex Video sadaļas index.html failā.
Secinājums
Tagad, kad mēs esam gatavi ar mūsu demo vietni, skatīsimies, ko vēl var paveikt ar fondu 5. Šajā demonstrācijā izmantotie elementi ir tikai neliels fondu sistēmas elementu kopums. Ir daudzas citas lietas, ko varat izmantot savā dizainā, piemēram, pielāgojamu ikonu joslas, Breadcrumbs, gaismas kastes, diapazona slīdņus, veidlapu apstiprināšanu un daudzus citus. Dokumenti ir diezgan labi uzrakstīti un palīdz izstrādātājiem daudz kodu.
Ja esat iepazinies ar Sass, jums ir vēl vairāk iespēju, jo katra dokumenta sadaļa izskaidro, kā jūs varat veidot savus maisījumus un kādi Sass mainīgie var izmantot, lai pielāgotu jūsu vietni. Pirms sākat veidot savu tīmekļa lapu, neaizmirstiet pārbaudīt Fonda sistēmas savietojamību, lai pārliecinātos, ka tas darbojas visās pārlūkprogrammās, kas jums jāizveido.
- Skatīt demonstrāciju
- Lejupielādēt avotu
