Weboldalak létrehozása Superfast az Alapítvány 5-ével [A Guide]
A frontend keretrendszer számos módon javíthatja webdesign munkafolyamatait. Az tud segítsen követni a modern tervezési elveket mint például a mobil első megközelítés, a szemantikai jelölés és az érzékeny tervezés. tudsz vegye figyelembe a sok felhasználásra kész CSS és JavaScript elemet és jelentősen gyorsítsa fel a fejlesztési folyamatot, több időt kell felszabadítania a vizuális és felhasználói élménytervezésre.
A Zurb Foundation 5 az egyik legerősebb frontend keretrendszer a piacon. Logikailag épített, könnyen használható és teljesen ingyenes. Ez lehetővé teszi a rugalmas CSS rács hogy megkönnyíti a tiszta, felhasználóbarát elrendezés létrehozását. Az Alapítvány kereteit is erősen tesztelték, így gondoskodik a böngésző és az eszközök közötti kompatibilitásról.
Ebben a bemutatóban megmutatom hogyan lehet egy olyan webhelyet építeni, amely rendkívül gyors a Zurb Alapítványnál 5. Megnézheti a végeredményt a demóoldalon.
Létrehozom a weboldal elrendezését, a finom designelemek hozzáadásának feladata várja Önt. A webhely, amelyet ebben a bemutatóban közösen hozunk létre, meg fogja valósítani a modern UX-tervező álmát: érzékeny, mobil első, felhasználóbarát és szemantikus lesz.
Ennek az útmutatónak a hossza miatt itt találhatók azok a parancsikonok, amelyek gyorsan elérhetik a kívánt szekciót:
- Alapítvány letöltése 5
- A rács megértése
- Mikor kell használni a nagy-N, közepes-N és kis-N osztályokat
- A Top Menu Bar hozzáadása
- A fő rész népszerűsítése
- A népszerű hozzászólások paneljének hozzáadása
- 3 további hozzászólás hozzáadása a népszerű panelhez
- A CSS felkiáltása
- Néhány több tartalom hozzáadása
- Pagináció hozzáadása
- Az oldalsáv elhelyezése
- A hírlevél űrlapja
- Flex videó
- Az oldalsáv menü
- Következtetés
1. Alapítvány letöltése 5
Az Foundation 5-öt 4 különböző formában töltheti le:
- a teljes kódot
- egy könnyebb változat csak az alapvető kóddal
- egy egyéni verzió, ahol testreszabhatja, amire szüksége van, és mi nem
- egy Sass verzió, ha a változóit és a mixinset SCSS-ben szeretné beállítani.
Ebben a bemutatóban a teljes kódot vanília CSS-vel választom, de természetesen kiválaszthatsz bármilyen más verziót, ha racionalizálni akarod a webhelyedet, és csak azt kell használni, amire szükséged van.
Miután letöltötte és kicsomagolta a zip fájlt, nyissa meg az index.html fájlt a böngészőjében, és ilyesmit fog látni:
Igen, a segédprogramok hasznos linkeket tartalmaztak az indexfájlban. Így hagyhatja el, és készítsen egy új fájlt a prototípusához az home.html vagy hasonlóval, de nem kell igazán megtartania, mivel könnyen elérheti az Alapítvány dokumentációját, amikor csak akarja.
Nyissa meg az index.html fájlt a kedvenc kódszerkesztőben és mindent törölni a szakasz előtt, de a zárás előtt A stílusszabályok, amelyeket hozzáadunk a app.css a fájl a prototípusunkat felöleli: Mivel az Alapítvány 5 relatív egységeket használ, használnunk kell “em”-s vagy “rem”-s pixelek helyett lépést tartson a szabályokkal. (A CSS egységekről olvashat: Pixel vs ems vs% itt.) A Firefox Firebug kiterjesztését használva megállapítottam, hogy hol kell felülírnom az Alapítvány 5-ös CSS-szabályait, ha bármilyen más webfejlesztési böngészőbővítményt használsz,. Ebben a rövid CSS-részletben csak egyszer kellett felülírnunk az Alapítvány alapértelmezett CSS-jét, az utolsó szabály (.row .row.popular-main). Az alábbiakban bemutatjuk, hogy a demo webhely hogyan néz ki most: Ugyanazokat a szabályokat használva, mint korábban, további tartalmat adunk az oldal fő részéhez. Az a tartalom, amelyet most hozzá fogunk adni, az lesz Legutóbbi bejegyzések kis bélyegképekkel. Az 5-ös Alapítvány nagyon hűvös előre elkészített miniatűr stílusokkal rendelkezik, amelyeket ebben a lépésben használunk. Alapítvány Miniatűrök használata a előre épített CSS osztály hívott “th” hozzá kell adnunk azokat a képeket, amelyeket bélyegképként szeretnénk megjeleníteni, ahogy azt az alábbi kódrészletben láthatja. Minden Legutóbbi hozzászóláshoz egy új sort adunk hozzá a Népszerű panelhez egyéni CSS osztály hívott “Utolsó poszt”. A táblagépen és az asztali méreten egy kis bélyegképet fogunk mutatni az Alapítvány miniatűr osztályával a bal oldalon, a címet és a rövid leírást a jobb oldalon. Mobilon a főcím és a leírás a miniatűr alatt marad. Most már használtam “közép-3 oszlopok” és “közép-9 oszlopok” osztályok, hogy megoszthassák a képernyőt 1: 3-ra, 25% -ot a képre, és 75% -át a szövegre a közepes méretűtől. Helyezze be a következő kódrészletet a Népszerű panel alatt háromszor (a három Legutóbbi hozzászólás esetében). Itt csak az egyik legutóbbi hozzászólás sor kódját adom, mivel mindegyik ugyanazt a HTML jelölést használja, csak a tartalom különbözik. A legújabb hozzászólás tartalma… A 4.3 lépésben létrehozott egyéni CSS fájlunk, app.css új stílusszabályokat is kap, hogy a demó rendje rendben maradjon. jegyzet: Ha saját egyéni CSS-t szeretne hozzáadni az alapítványhoz, soha ne felejtse el ellenőrizni, egy web dev eszközzel, ahol felül kell írnia az alapértelmezett szabályokat. Az alábbi CSS-kódrészben felül kell írnunk azokat az első szabályban (.row .row.latest-post). A második szabályban elég, ha csak saját egyéni választót használunk (.latest-post h4). Prototípusunk most úgy néz ki: Ebben a lépésben a Legutóbbi hozzászólások alatt hűvös lapozást adunk hozzá. Az 5-ös Alapítvány segíti a kényelmes, használatra kész lapozási osztályokat. Ebben a lépésben ugyanazt a kódot használjuk, amelyet a “Fejlett” a Pagination Docs-on belül. Íme a legutóbbi bejegyzések az újonnan hozzáadott Paginációs szekcióval: Most, hogy készen állunk a bemutató oldalunk fő tartalmával, itt az ideje, hogy feltöltjük a megfelelő oldalsávot. A jobb oldali sáv a mobil és a tablet méretének fő tartalma alatt csúszik. Be kell illesztenie az összes kódrészletet ebben a szakaszban a A bal oldali sáv egy hírlevél regisztrálási űrlapot (1), egy legújabb videót (2) és egy harmonika-stílusú oldalsáv menüt tartalmaz a becenév alatt “Szakácskönyvünk” (3). A lépés végén készen állunk a bemutatóra, amely így néz ki: Ahhoz, hogy egy formát építsen az Alapítvány 5-ben, nem kell mást tennie, csak helyezze a rácsot a HTML címke. Ha megnézzük az alábbi kódrészletet, látni fogjuk, hogy a formanyomtatványt egy sorban helyezzük el, amelyben különböző CSS-szelektorokat állítunk be mindhárom hálózatra: “Kis-12”, “közepes-9”, és “nagy-12”. Ezt a megoldást választottuk, mert a mobil méretben 100% -os széles körű hírlevél jelenik meg, de a tabletta méreténél valóban nagyon kellemetlen. nagyon széles. Szerencsére az alapítvány 5 használ minket “Hiányos sorok”: csak hozzá kell adnunk “vég” osztály a nem teljes oszlop CSS osztály meghatározásához. Tehát itt fog történni itt: a mobil méretben az oldalsáv jelenik meg a fő tartalom alatt egy Hírlevél Feliratkozási űrlapon, amely az egész képernyőt lefedi. Közepes méretben az oldalsáv a fő tartalom alatt marad, de a Hírlevél űrlap csak a képernyő 75% -át fedi le, a fennmaradó 25% üres marad. Az asztali méretben az oldalsáv közvetlenül a fő tartalom mellett lesz, és a Hírlevél űrlap újra lefedi az oldalsáv teljes szélességét. A tökéletlen sorokról a Grid Dokumentumok című részben olvashat. Most vessen egy pillantást a fejléc margó-alsó: 2em; .popular-további h4 font-size: 1.125em; margin-top: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Néhány további tartalom hozzáadása
A legújabb hozzászólás címe
.sor .row.latest-post margin-bottom: 1.5em; .lemest-post h4 margin-top: 0; betűméret: 1.125em;
4.5 Pagináció hozzáadása
5. Az oldalsáv elhelyezése
5.1 A hírlevél űrlapja
Iratkozzon fel hírlevelünkre
Az Alapítvány űrlapok sok más elrendezési opcióval rendelkeznek, például Prefix Label, Prefix Radius Label, Postfix gomb és Postfix címke. A Postfix Button opciót itt választottuk, mivel ez felhasználóbarátabb: a felhasználók rákattinthatnak rá, és azonnal elküldhetik az űrlapot.
Az űrlapon belül egy új beágyazott sort adunk hozzá, amely a képernyőt 2: 1-re osztja. A szövegbevitel 8 oszlopot kap, és a postfix gomb 4-es lesz. Mivel ezt az elrendezést még mobil képernyőn is szeretnénk elérni, beállítjuk a “kis-8 oszlop” és “kis-4 oszlop” Itt a CSS-szelektorok, a Small Grid pedig a legkisebb méret, ahol ezt a jelölést akarjuk megvalósítani.
Egy másik új dolog látható a fenti HTML-kódban, amely a “sor összeomlása” osztály. Ez az Alapítvány 5 beépített stílusa. Alapértelmezés szerint két szomszédos oszlop között csatorna van ha hozzáadjuk a “összeomlás” osztályunkba, az ereszcsatorna eltűnik. Ezt azért tesszük, mert azt szeretnénk, hogy a gomb a szövegbevitel mellett legyen, anélkül, hogy közöttük lenne szóköz.
Most itt az ideje, hogy beillesszük ezt a kódrészletet a
5.2 Flex videó
A hírlevél szekció alatt egy napi videó receptet adunk hozzá az oldalsávunkhoz. Az Alapítvány 5 segít nekünk hogy a beágyazott videók reagáljanak, és automatikusan kényszerítsék őket a Flex Video funkcióval.
A Flex Videos a beépített eszközt használja “flex-video” CSS osztály. Egy új sort hozunk létre a Daily Video Recept oldalsáv részében, és egy széles oszlopot helyezünk bele a “kis-12 közepes-9 nagy-12 oszlop” Ugyanezen okból a CSS szelektorok az előző lépésben egy nem teljes sort használtak a közepes rácsban.
Itt van a kód, amelyet a Hírlevél rész alatt kell beilleszteni. Használhat bármilyen videót a YouTube, a Vimeo stb.
Napi videó recept
5.3 Az oldalsáv menü
Az oldalsáv menüben az Alapítvány 5. harmonizálási jellemzőjét fogjuk használni. A harmonikák olyan webelemek, amelyek a tartalmat logikai részekre bontják és összecsukják.
Demóoldalunkon ezek a logikai szakaszok a három különböző élelmiszercsoport (fő edények, oldalsó ételek, desszertek), és minden csoport több kisebb csoportot tartalmaz, például “Baromfi”, “Sertéshús”, “Marhahús”, “Vegetáriánus”.
Az egész oldalsáv harmonikát egy széles oszlopba helyezzük ugyanazzal a logikával, mint az 5.1 és 5.2 lépésekben. A harmonikát rendezetlen listává tesszük a megfelelő beépített CSS osztályokkal, mint pl “harmonika” és “harmonika-navigáció”.
Mivel az Alapítvány akkreditációi JavaScript használatával dolgoznak, testreszabhatja viselkedését előre beépített JavaScript változók segítségével, ha akarja. Ehhez nézd meg a “Opcionális JavaScript-konfiguráció” a Harmonika Dokumentumok szakaszban. A következő kódrészlet az index.html fájlban található Flex Video rész alatt található.
Következtetés
Most, hogy készen állunk a bemutató oldalunkra, nézzük meg, mit tehetünk az Alapítvány 5-ével. Az ebben a demóban használt elemek csak egy kis készlet az Alapítvány keretrendszerének jellemzőiről. Sok más dolog, amellyel a tervezést használhatja, például testreszabható ikonsávok, kenyérrostok, fénydobozok, tartomány-csúszkák, űrlap-hitelesítés és sok más. A dokumentumok meglehetősen jól megírtak és segítenek a fejlesztőknek számos kód példával.
Ha ismeri a Sass-ot, akkor még több lehetősége van, mivel a Dokumentumok minden egyes szakasza megmagyarázza, hogyan készíthet saját keveréket, és mely Sass-változókat használhatja a webhely testreszabására. Mielőtt elkezdené megtervezni weblapját, ne felejtse el ellenőrizni az Alapítvány keretrendszerének kompatibilitását, hogy megbizonyosodjon arról, hogy működik-e az összes böngésző számára, amire szüksége van:.
- Demó megtekintése
- Letöltés forrása
