Belefáradtál az unalmas, egyszerű HTML-be és az örökké hosszú CSS-be? Ismerd meg a Skeleton-t, a tökéletes, könnyed, CSS kiegészítést a többi boilerplate kódhoz, amelyet már minden projekt kiindulópontjaként tartalmaz.
A boilerplate kód minden olyan ismétlődő kód, amely újra és újra felbukkan, hogy valamilyen eredményt érjen el, amely úgy tűnik, hogy sokkal egyszerűbbnek kellene lennie. És az egyszerű, alap HTML-formázásnak sokkal egyszerűbbnek kellene lennie.
A legtöbb front-end stíluskönyvtár vagy keretrendszer úgy működik, hogy a stílusokat osztályokra állítja be, amihez a felhasználónak emlékeznie kell az osztálynevekre, hogy stílusokat adjon a HTML-elemekhez. A Skeleton úgy működik, hogy a stílusok többségét közvetlenül a HTML-címkékre alkalmazza. Táblák, űrlapok, listák, gombok, nevezd meg, ők stilizálják.
Kezdés
A Skeleton azt javasolja, hogy látogasson el a weboldalukra, és töltse le a kényelmesen lejegyzett, nem minimalizált, kész CSS fájlt, hogy maga is megnézhesse a motorháztető alatt. A Skeleton összesen kevesebb mint 400 sornyi kódot tartalmaz! Van egy kényelmes CDN link is a még gyorsabb telepítéshez, ha a testreszabás nem kritikus a projekted szempontjából. Bárhogyan is választod a beépítést, amint a stíluslapot a dokumentumod fejlécébe linkelted, máris indulhatsz!
A 12 oszlopos rács
A Skeleton sikere abban rejlik, hogy a más CSS-keretrendszerek által biztosított attribútumokat halálosan egyszerűvé teszi. A rácsrendszer használatával a böngésző elrendezése folyékony marad, és automatikusan alkalmazkodik az ablakmérethez. Az oszlopok kihasználásához használja az “oszlop” vagy “oszlopok” számot és osztályt, vagy az “egyharmad”, “fél” stb. rövidített módszert.
A Skeleton a maximális szélességet 960px-re állítja be, ami automatikusan illeszkedik a nagy, kis és közepes képernyőkhöz. Ha kívánja, egyetlen CSS sorral megváltoztathatja a max-width értéket, és az összes oszlop mérete ennek megfelelően változik!
Típuskép
A Skeletonban a betűtípus rems-re van állítva, hogy egyetlen <html> font-size tulajdonság alapján reszponzívan méretezhető legyen. A betűtípus alapja a Raleway, 15rem-re állítva 1,6-os sortávolság felett (15px, illetve 24px).
A feliratoknak külön méretezése van, meghatározott betűközzel, sortávolsággal és margóval.
A gombok kétféle lehetőséggel rendelkeznek. A <button> taghez (és bármely más megfelelő űrlapelemhez) eleve létezik standard gombstílus, míg a második, élénkebb gomb opciót a ‘.button-primary’ osztállyal lehet alkalmazni.
Mikor használjam a Skeletont?
A Skeleton egy könnyű, reszponzív és nagymértékben testreszabható CSS könyvtár, amely a mobilok figyelembevételével készült. Nulla fordítás vagy telepítés szükséges, és jól együttműködik további CSS stíluslapokkal és front-end keretrendszerekkel. Használja a skeletont a gyors, működőképes CSS-hez, amely nagyszerű demókhoz vagy MVP-khez. És mivel a kicsinyített változat kevesebb, mint 12kb, tökéletes akkor is, amikor a sebesség a legfontosabb. Ne feledje, hogy a Skeleton alapvetően tiszta komponensekből és stilizálásból álló váz. Egyetlen hivatkozással az unalmas HTML-t teljesen stilizált oldallá alakíthatja anélkül, hogy a sebességet feláldozná vagy egy osztálynevekből álló könyvtárat memorizálna.
