10 ciekawych responsywnych bibliotek CSS (RWD)

Kategoria wpisu Frontend, Kursy, PHP, HTML, CSS Tagi: , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

W ciągu ostatnich kilku lat budowanie stron internetowych uległo wielu istotnym zmianą. Począwszy od sposobu w jaki się koduje po same wymogi. Przyczyn tych zmian było wiele chociaż jedną z ważniejszych było pojawienie się możliwości obsługi witryn na różnego typu urządzeniach.

Spowodowało to, wzrost oczekiwanych wymagań jakie miała spełniać każda strona. Na początku każdy twórca nawet ja próbował to wszystko jakoś samodzielnie ogarnąć – szybko jednak okazało się to dla wielu dość skomplikowane i czasochłonne. Ratunkiem dla wielu okazały się frameworki CSS – nie tylko przyspieszające pracę ale i standaryzujące ją.

W wcześniejszych wpisach opisywałam już jeden z popularniejszych frameworków – Bootstrap tym razem jednak odstawie go na bok i pokaże wam jego konkurencje. Czyli inne biblioteki jakie mogą was zaciekawić i z jakimi możecie się spotkać w internecie.

Przykłady bibliotek CSS

W brew temu co mówi tytuł frameworków CSS jest zdecydowanie więcej niż 10 – postanowiłam się jednak ograniczyć do tej liczby. Pamiętajcie też, że świat serwisów internetowych ulega szybkim zmianą. Istnieje możliwość, że jedna lub kilka bibliotek poniżej opisanych nie jest już dalej rozwijana.

 

Framework Fundation

1. Foundation

 

Jednym z popularniejszych frameworków CSS jest Foundation. Biblioteka dysponuje 12-kolumnową responsywną siatką (RWD). Podobnie jak Bootstrap dysponuje on nie tylko bogatą biblioteką CSS (np. typografia, formularze, przyciski) ale także zbiorem użytecznych skryptów js (np. taby, nawigacja).
W Foundation posiada preprocesor SASS.

https://foundation.zurb.com/

bulma

2. Bulma

Kolejną ciekawą biblioteką jest Bulma. Bulma jest darmowym frameworkiem CSS opartym o technologię Flexbox. Oznacza to, że zastosowywany w niej mechanizm różni się dość mocno od Foundation czy Bootstrap.

https://bulma.io/

 

pure css

3. Purecss

Framework Pure jest jednym z najlżejszych jego waga to obecnie 3.8KB. Stanowi więc on świetne rozwiązanie do osób, którym potrzebny jest nawet bardzo skomplikowany szkielet strony.

https://purecss.io/

 

Materialize

4. Materialize

Kolejną bardzo ciekawą propozycją jest Materialize. Framework zawiera w sobie wiele oryginalnych oraz bardzo pomocnych rozwiązań – nie tylko stricte CSS ale również skryptów JS.

Biblioteka korzysta z plików SASS.

http://materializecss.com/

 

YAML

5. YAML

YAML (ang. YET ANOTHER MULTICOLUMN LAYOUT) jest jednym z najdłużej dostępnych i w dalszym ciągu rozwijanym frameworków na rynku (powstał 2005 roku). Biblioteka nie jest specjalnie rozbudowana zawiera jednak podstawowe elementy niezbędne do zbudowanie strony internetowej. Również korzysta z SASS, jest też obsługiwana przez Internet Explorer 6+.

http://www.yaml.de/

 

HTML KickStart

6. HTML KickStart

Bibliotek HTML KickStart jest dość lekka i prosta w obsłudze w dużej mierze wzorująca się na Twiter Bootstrap.

http://www.99lime.com/elements/

 

Semantic UI

7. Semantic UI

Semantic to biblioteka z dosyć oryginalnym podejściem do tworzenia stron internetowych. Budowane z nią strony przypomina to z metodykami BEM lub SMACSS.

https://semantic-ui.com/

 

Groundwork css

8. Groundwork CSS

Groundwork jest kolejną ciekawą biblioteką CSS. Podobnie jak porzednicy posiada rozbudowaną strukturę. Jest również dostępny jako plugin do systemów CMS takich jak Drupal.

https://groundworkcss.github.io/

 

Kube

9. Kube

Framework Kube przeznaczony jest raczej dla profesjonalnych programistów.
Kube jest niezależny od wzornictwa (nie narzuca stylów projektowania lub decyzji kodowych) i jest bardzo lekki (około 30Kb). Zawiera wiele użytecznych komponentów – od siatek po modały – i skupia się na pionowym rytmie i zrównoważonej typografii.

https://imperavi.com/kube/

 

Skeleton

10. Skeleton

Ostatni na mojej liście zalazł się Skeleton. Skeleton jest jednym z prostszych i łatwiejszych w obsłudze frameworków. Z pewnością nie jest tak rozbudowany jak np. bootstrap, ale jest świetną łatwo rozbudowywaną podstawą dla strony internetowej.

http://getskeleton.com/

Jak do tej pory miałam okazję wykonywać strony tylko na kilku z powyżej wymienionych (Foundation, Skeleton, Materialize). Przeważnie jednak pracuje się głownie na jednym z nich (preferowanym np. przez firmę w której się pracuje) a nie zmienia się w zależności od projektu.

źródła:

https://webmastah.pl/10-najlepszych-frameworkow-css/
https://hackernoon.com/top-5-most-popular-css-frameworks-that-you-should-pay-attention-to-in-2017-344a8b67fba1
https://www.w3schools.com/css/css_rwd_frameworks.asp
https://www.slant.co/topics/150/~best-css-framework

Best CSS Frameworks

Kube: Web framework for developers and designers

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *