Máte už dost nudného, jednoduchého HTML a věčně dlouhého CSS? Seznamte se se Skeletonem, dokonalým, odlehčeným doplňkem CSS ke zbytku kódu boilerplate, který již zahrnujete jako výchozí bod každého projektu.
Kód boilerplate je jakýkoli opakující se kód, který se objevuje znovu a znovu, aby se dosáhlo nějakého výsledku, který se zdá, že by měl být mnohem jednodušší. A jednoduché, základní stylování jazyka HTML by mělo být mnohem jednodušší.
Většina knihoven nebo frameworků pro front-end stylování funguje tak, že nastavuje styly na třídách, které vyžadují, aby si uživatel pamatoval názvy tříd pro přidání stylu do prvků HTML. Skeleton funguje tak, že většinu stylů aplikuje přímo na značky HTML. Tabulky, formuláře, seznamy, tlačítka, na co si vzpomenete, to nastylizují.
Začínáme
Skeleton doporučuje přejít na jejich webové stránky a stáhnout si pohodlně notovaný, nezminifikovaný, připravený soubor CSS, abyste se mohli sami podívat pod pokličku. Skeleton má celkem méně než 400 řádků kódu! K dispozici je také pohodlný odkaz na CDN pro ještě rychlejší nastavení, pokud přizpůsobení není pro váš projekt kritické. Ať už se rozhodnete pro jakékoli začlenění, jakmile budete mít soubor stylů propojený v hlavičce dokumentu, můžete začít pracovat!
Mřížka 12 sloupců
Úspěch Skeletonu spočívá v tom, že přebírá atributy, které poskytují jiné frameworky CSS, a dělá je smrtelně jednoduchými. Díky použití systému mřížky zůstává rozvržení prohlížeče plynulé a automaticky se přizpůsobuje velikosti okna. Chcete-li využít sloupce, použijte číslo a třídu „sloupec“ nebo „sloupce“ nebo zkrácenou metodu „třetina“, „polovina“ atd.
Skeleton nastavuje maximální šířku na 960px, což automaticky vyhovuje velkým, malým i středním obrazovkám. V případě potřeby můžete změnit max-width pomocí jednoho řádku CSS a velikost všech sloupců se podle toho změní!
Typografie
Typ ve Skeletonu je nastaven na rems, aby byl responzivně dimenzován na základě jediné vlastnosti <html> font-size. Základem je písmo Raleway nastavené na 15rem přes výšku řádku 1,6 (15px, resp. 24px).
Nadpisy mají svou odlišnou velikost se specifickými mezerami mezi písmeny, výškou řádku a okraji.
Tlačítka mají dvě možnosti. Standardní stylování tlačítek existuje neodmyslitelně pro značku <button> (a další vhodné formulářové prvky), zatímco druhou, živější možnost tlačítek lze použít pomocí třídy ‚.button-primary‘.
Kdy mám použít Skeleton?
Skeleton je lehká, responzivní a vysoce přizpůsobitelná knihovna CSS vytvořená s ohledem na mobilní zařízení. Není nutná žádná kompilace ani instalace a dobře spolupracuje s dalšími soubory stylů CSS a front-endovými frameworky. Použijte skeleton pro rychlé a funkční CSS, které se skvěle hodí pro demoverze nebo MVP. A protože jeho minifikovaná verze má méně než 12 kB, je ideální i pro případy, kdy na rychlosti záleží nejvíce. Nezapomeňte, že Skeleton je ve své podstatě kostrou čistých komponent a stylů. Pomocí jediného odkazu můžete změnit nudné HTML na plně stylizovanou stránku, aniž byste museli obětovat rychlost nebo si pamatovat knihovnu názvů tříd.
.