Masz dość nudnego, prostego HTML i wiecznie długiego CSS? Poznaj Szkielet, doskonały, lekki dodatek CSS do reszty kodu boilerplate, który już włączyłeś jako punkt startowy każdego projektu.
Kod boilerplate to każdy powtarzający się kod, który pojawia się raz po raz, aby uzyskać jakiś rezultat, który wydaje się, że powinien być o wiele prostszy. A prosta, podstawowa stylizacja HTML powinna być znacznie prostsza.
Większość bibliotek lub frameworków stylizacji front-end działa poprzez ustawianie stylów na klasach, które wymagają od użytkownika zapamiętania nazw klas, aby dodać styl do elementów HTML. Skeleton działa poprzez zastosowanie większości stylów bezpośrednio do znaczników HTML. Tabele, formularze, listy, przyciski, możesz to nazwać, one to stylizują.
Rozpoczynanie
Skeleton zaleca, abyś udał się na ich stronę i pobrał wygodnie zapisany, niezminimalizowany, gotowy do użycia plik CSS, abyś mógł samemu zajrzeć pod maskę. Skeleton to w sumie mniej niż 400 linii kodu! Jest tam także wygodny link CDN dla jeszcze szybszej konfiguracji, gdy dostosowanie nie jest kluczowe dla twojego projektu. Jakkolwiek zdecydujesz się go dołączyć, po umieszczeniu odnośnika do arkusza stylów w nagłówku dokumentu, jesteś gotowy do pracy!
Siatka 12-kolumnowa
Sukces Skeletona polega na wzięciu atrybutów, które zapewniają inne frameworki CSS i uczynieniu ich bardzo prostymi. Dzięki użyciu systemu siatki, układ przeglądarki pozostaje płynny i automatycznie dostosowuje się do rozmiaru okna. Aby wykorzystać kolumny, użyj numeru i klasy 'kolumna’ lub 'kolumny’, lub skrótu 'jedna trzecia’, 'jedna połowa’, itd.
Skeleton ustawia max-width na 960px, co automatycznie pasuje do dużych, małych i średnich ekranów. Jeśli chcesz, możesz zmienić max-width za pomocą jednej linii CSS, a wszystkie kolumny zmienią rozmiar odpowiednio!
Typografia
Typ w Szkielecie jest ustawiony na rems, aby był responsywnie zwymiarowany na podstawie pojedynczej <html>właściwości font-size. Podstawową czcionką jest Raleway, ustawiona na 15rem na 1.6 line-height (odpowiednio 15px i 24px).
Nagłówki mają swój odrębny rozmiar z określonymi odstępami między literami, line-height i marginesami.
Przyciski występują w dwóch opcjach. Standardowa stylizacja przycisku istnieje dla znacznika <button> (i wszelkich innych odpowiednich elementów formularza), podczas gdy druga, bardziej żywa opcja przycisku może być zastosowana z klasą ’.button-primary’.
Kiedy powinienem używać Skeleton?
Skeleton jest lekką, responsywną i wysoce konfigurowalną biblioteką CSS zbudowaną z myślą o urządzeniach mobilnych. Nie wymaga kompilacji ani instalacji, a ponadto dobrze współpracuje z dodatkowymi arkuszami stylów CSS i frameworkami front-end. Użyj szkieletu do szybkiego, działającego CSS, który świetnie nadaje się do dema lub MVP. A ponieważ jego zminifikowana wersja zajmuje mniej niż 12kb, jest on również idealny do zastosowań, w których szybkość ma największe znaczenie. Pamiętaj, że Skeleton jest, w swojej istocie, szkieletem czystych komponentów i stylizacji. Wystarczy jedno łącze, aby zmienić nudny HTML we w pełni wystylizowaną stronę bez konieczności poświęcania szybkości lub zapamiętywania biblioteki nazw klas.
.