10 responsywnych frameworków CSS (RWD)

HTML5 CSS3

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



W ciągu ostatnich kilku lat budowanie stron z pomocą frameworków CSS stało się bardzo popularne. 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 inne biblioteki jakie mogą was zaciekawić.

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.

Framework Fundation

1. Foundation

 

Jednym z popularniejszych frameworków CSS jest Foundation. Framework 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

Przeczytaj również

Zmiana koloru linka po najechaniu kursorem –... Zmiana koloru linku () stanowi jeden z podstawowych efektów, jakie występują na stronie internetowej. Domyślnie tę cechę pos...
Usuwanie obramowania klikniętych linków CSS Usuwanie obramowania klikniętych linków jest dosyć proste i nie wymaga jakieś dużej wiedzy z CSS lub HTML. Używają określenia obramowanie linka mam na...
Kotwice na stronie HTML – odsyłacze i etykie... Kotwice ang. anchor (etykiety, zakładki) służą do oznaczenia specjalnych obszarów podobnie jak zakładka w książce. Odsyłacz (zakładka) prowadzi do kot...
Osobne style CSS do Google Chrome Ogólnie przyjmuje się że przeglądarki internetowe takie jak Chrome i Firefox mają takie same albo bardzo podobne style CSS. Czasem jednak zdarza się ż...