Systemy gridów CSS ułatwiają tworzenie responsywnych layoutów. Oto przegląd dostępnych rozwiązań - od lekkich po rozbudowane.

Lekkie frameworki

Simple Grid

Minimalistyczny grid bez zbędnych dodatków. Idealny gdy potrzebujesz tylko systemu kolumn.

Toast CSS Framework

Lekki framework z czystym, semantycznym kodem HTML.

Bourbon Neat

Grid oparty na SASS, oferujący semantyczne mixiny bez klas w HTML.

csswizardry-grids

Elastyczny system gridów od Harry’ego Robertsa z BEM-ową notacją.

Kube CSS Framework

Lekki framework z podstawowymi komponentami i typografią.

One% CSS Grid

Prosty grid oparty na procentach z 12 kolumnami.

Rozbudowane frameworki

Bootstrap

Najpopularniejszy framework CSS, rozwijany przez twórców Twittera.

Cechy:

  • Responsywna siatka 12-kolumnowa
  • Bogaty zestaw komponentów UI
  • Wtyczki JavaScript
  • Wsparcie dla LESS/SASS
  • Ogromna dokumentacja

Foundation

Framework z podejściem “mobile first”.

Cechy:

  • Konfigurowalna siatka
  • Zaawansowane funkcje mobilne
  • Responsywne tabele i multimedia
  • Wsparcie dla SASS
  • Interchange - ładowanie różnych zasobów per breakpoint

Skeleton

Minimalistyczny framework oparty na systemie 960 Grid.

Cechy:

  • Stała szerokość 960px
  • 16 kolumn
  • Bardzo lekki (~400 linii)
  • Dobry punkt startowy

Jak wybrać?

PotrzebaRekomendacja
Tylko gridSimple Grid, One% CSS Grid
SASS/semanticBourbon Neat, csswizardry-grids
Pełny frameworkBootstrap, Foundation
Minimum koduSkeleton

Semantyczny kod

Lżejsze frameworki często używają semantycznego podejścia:

<!-- Zamiast klas Bootstrap -->
<div class="col-md-6">...</div>

<!-- Semantyczny mixin SASS -->
<article class="main-content">...</article>
.main-content {
  @include span-columns(6);
}

Podsumowanie

Wybór gridu zależy od skali projektu. Dla prostych stron wystarczy lekki framework, dla aplikacji webowych lepszy będzie Bootstrap lub Foundation.