Stílus útmutató a kisebbeket

Ebben az évben volt néhány előadások SC5 Style Guide. ahol közös a tapasztalatok felhasználásával eszközöket projektek az egyik ügyfelünk - a mobilszolgáltató Elisa. Tekintettel arra, hogy Elisa - egy hatalmas cég tömegű honlapok, amelyen szeretnénk fenntartani egy egységes stílust, akkor nem meglepő, hogy SC5 Style Guide, mint egy eszköz, hogy nagyon hasznos is. De mi a helyzet a kis projektek? Megéri számukra, hogy nem stílus útmutatók? Nem tudom a választ, és azt akarta, hogy a kísérlet. Mint egy kísérleti terület vette a saját blog.

Élő stílus kalauz blogomban így néz ki: varya.me/styleguide. Láthatjuk a teljes felületen oszlik blokkok, amelyek mindegyike magában foglal egy külön alkatrész. Még mindig nem nézett a felület blogján ilyen módon, és ez tesz engem még felül CSS-építészeti projekt. De legyen minden rendben.

Beállítás SC5 Style Guide

Mindennek alapja a telepítőcsomag

Utána tudtam, hogy létrehoz egy webhelyet stílus Gajda. Szükséged lesz egy pár korty Taxco.

Volt, hogy lépjen vissza egy kicsit a konfiguráció, amely elérhető a dokumentációban annak érdekében, hogy megoldja a problémákat. Fogok írni róla részletesen.

A appRoot

My Style útmutató nem a gyökér a domain, és egy dosszié hívott Styleguide. Ezt kell jelenteni eszköz létrehozására az alkalmazást a helyes hivatkozás:

Valójában azonban szükség van még egy trükk. Saját elemek vannak írva i-bem.js és automatikusan inicializálja domReady. Ez pontosan mit kell egy blog, mert a statikus oldalak és a teljes HTML-jelölést azonnal terhelhető. De az oldal stílus Gaida - SPA (egyoldalas alkalmazás), és nem működött. A komponenseket rajzolt staylgayda oldalak „on the fly”, és nyilvánvaló, hogy ez történik később domReady. Vagyis, nem törlődnek automatikusan. Szerencsére, akkor Styleguide eseményt: onRendered az ablakon. amely megteremti SC5 Style Guide amikor pereresovyvaetsya komponenst. Tettem az inicializálási komponens ezt az eseményt, vagyis amint azok megjelennek az oldalon. Ez inicializálás van szükség, csak a helyszínen stílus Gajda, így a kód nem szerepel a közgyűlés, és csatlakozik a stílus Hyde kiegészítő fájlt.

Formai útmutató statikus oldal

A fejlesztés a rendszerváltás SC5 Style Guide fut a szerver, amely megoldja egészen a gyökér könyvtárat, amelyből oszlik sgenenirovanny SPA-site. Ha azt szeretnénk, hogy az eredményt a szerver, egy útvonal van, hogy vigyázzon a saját. De az én esetemben, az oldalon található oldalak GitHub, statikus tárhely és nincs útvonal nem biztosított. Azonban ebben az esetben van disableHtml5Mode beállítás: igaz. Elmondja a generátor, hogy egy alkalmazásnak szüksége van a jó öreg kapcsolatokat a #. Tehát minden működik.

dokumentáló alkatrész

Még bevezetése előtt stílus Gaida, már az összes CSS írta BEM, azaz a komponens megközelítés. Style Hyde már csak állítsa be a szerkezet és alkatrészek dokumentum blokkok segítségével a KSS.

strukturálása a kódot

Kiderült, hogy a fájl szerkezetét, mely BEM, nem a legjobb megoldás a fejlesztési élő staylgayda. A fájlrendszer, az összes komponens hosszú, lapos lista:

Azaz, a kis atomi összetevői között nem térnek el a blokkokat, hogy az oldal szerkezete (például fejléc és lábléc), a blokkok az oldalsáv vagy CSS harmadik fél kütyü. Persze, a lapos szerkezet sokkal kényelmesebb az építők, hanem a fejlődést szükségük van valamilyen katalogizálás.

Ehhez tettem overview.css fájlt. ahol nincs aktív CSS, de segít megszervezni a blokkokat. Jártam ott 5 részes, és az egyes kapcsolódó elemek:

Azt figyelmen kívül hagyja a listákat egységek, mert nem befolyásolja a kódot. De szakaszok leírják marad.

Leírás A blokkok

A dokumentáció alkatrészek külön-külön az egyes prorisovanny módosítót: varya.me/styleguide/#/section/1.5.1

Mert slozhnosostavnyh alkalmazott komponensek a másik belsejében, használtam egy kulcs címke . Beleilleszti ő helyette alkatrész kódot a megfelelő számot.

Ezzel a dokumentációt elfogadható méretű kódot, de az online minden kiderült teljes egészében: varya.me/styleguide/#/section/4.1

Style-Guide-Driven Development

Ha beírja a keresés „logo” a kapott stílus Haydée a területen, akkor megjelenik az összes komponens, amely használja a logó! Kerestünk a teljes kódot. Hasonlóképpen, akkor keresni alkatrészeket használó jelölő . Vagy van egy font akinek stílusokat.