10 responsywnych frameworków CSS (RWD)

HTML5 CSS3

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



Reading Time: 4 minutes

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ż

Tabele w HTML Tabele są jednym z podstawowych znaczników w języku HTML. Przed wejściem stron RWD tabele HTML były najczęściej spotykanym obiektem na stronie. Chyba ...
Zmiana wielkości liter z pomocą CSS – text-t... Właściwość text-transform (z języka ang. transformacja tekstu) jest jedną z popularniejszych metod modyfikacji tekstu. Zadaniem własności jest zmiana ...
Sześciokąty rozmieszczone obok siebie CSS Jakiś czas temu odwiedziłam stronę, której autor umieściła swoje portfolio w postaci sześciokątów (hexagonu) czyli kilku sześciokątów. Zrobiło to na m...
Budujemy prostą stronę internetową cz. 2 W poprzedniej części kursu, która stanowiła coś w rodzaju wprowadzenia napisałam z jakiej technologi będę korzystać do zbudowania strony. http://ww...