Framework CSS

Ostatnio przeglądając blog forum-kolegi Batman natknąłem się na ciekawy wpis odnośnie frameworków w CSS. Brzmi dziwnie, jednak ma to sens. Jak zdążyłem zauważyć frameworków w CSS używa się głównie do pozycjonowania elementów – szczególnie jeśli chodzi o ilość kolumn. O co dokładnie chodzi? Zapraszam do krótkiego porównania i opinii :)

 

W tym wpisie chce krótko porównać 2 frameworki:

Zacznijmy od 1 line CSS Grid Framework. Jak widać na stronie tego FW aby zacząć do używać wystarczy 1 linijka:

  1. .dp50 {width:50%; float:left; display: inline; *margin-right:-1px; }

Co ta linijka robi? Dzieli div’a (bo dla div’ów to stosujemy) na pół. Jednak aby miało to sens, musimy stworzyc 2 div’y, które będą obok siebie. Wtedy dla każdego z nich musimy użyć klasy .dp50 .

Jeśli zapiszemy coś takiego:

  1. <div class="dp50" style="background-color: #999;">1</div>
  2. <div class="dp50" style="background-color: #666;">2</div>

Otrzymamy podział na pół naszego div’a:

2011-08-12_172651.png

Teraz możemy uzupełnić poszczególne div’y o wybraną treść. Ale możemy pójść krok dalej. Możemy także podzielić któryś z tych na mniejszą część. Podzielmy na pół div’a nr 1:

  1. <div class="dp50" style="background-color: #999;">
  2. <div class="dp50" style="background-color: #bbb;">1.1</div>
  3. <div class="dp50" style="background-color: #ddd;">1.2</div>
  4. </div>
  5. <div class="dp50" style="background-color: #666;">2</div>

Dzięki temu otrzymamy taki podział:

2011-08-12_173243.png

Ale to jeszcze nie koniec. Dzięki takim podziałom możemy utworzyć dość skomplikowane kształty, np:

2011-08-12_173521.png

Jak widać można trochę wycisnąć z tego :)  Podsumowanie 1 line CSS Grid Framework.

Plusy:

  • Proste w użyciu
  • Dobre dla stron o stałej i zmiennej szerokości

Minusy:

  • Ilość kolumn o równych rozmiarach jakie możemy utworzyć do 2^x czyli 1,2,4,8,16 itd.
  • Nie można zmienić odległości pomiędzy div’ami o klasie dp50 – należy bawić się marginesami lub paddingami wewnątrz tego div’a

Teraz zajmijmy się drugim frameworkiem – 960 Grid System. Tutaj CSS i dużo bardziej skomplikowany i nawet sami autorzy proszą, aby nic w nim nie zmieniać.

Mamy do wyboru podział strony na 12, 16 lub 24 pionowe paski. Po pobraniu paczki z plikiem CSS i uruchomieniem demo możemy ujrzeć coś podobnego do tego:

2011-08-12_174443.png

Jak widać mamy podział „strony” na 12 różowych pasków oddzielonych białymi. Maksymalna szerokość strony to 960 pikseli – stąd się wzięła jego nazwa. Dlaczego tyle? Aby na najpopularniejszej rozdzielczości (1024 px na szerokość) strona zmieściła się bez poziomego scrolla.

Co nam ten system oferuje? Jest bardzo podobny do wcześniejszego z jedna zasadniczą różnicą, no… może dwiema.

Pierwsza to to, że stronę możemy maksymalnie podzielić na 12, 16 lub 24 paski.

Druga bardzo ważna różnica, która jest na plus dla tego FW to to, że możemy mieć nieparzysta ilość równych kolumn np. 3 , co wcześniejsze rozwiązanie uniemożliwiało to.

Tyle teorii, teraz zróbmy coś z tym :)

Najpierw stworzymy sobie układ 3 kolumnowy na 12 paskowym CSS (3 paski – menu , 6 pasków – content , 3 paski – wigets).

Więc zapiszmy to:

Menu
Content
Wigets

Dzięki temu otrzymamy taką strukturę:

2011-08-12_180629.png

Jak widać stworzenie strony o 3 kolumnach staje się teraz banalnie proste.

Podsumowanie 960 Grid System.

Plusy:

  • Proste w użyciu
  • Duże możliwości „konfiguracji”
  • Możliwość tworzenia wielokolumnowych stron nie martwiąc się o odpowiednie float’y

Minusy:

  • Należy zwracać uwagę na ilość grid’ów, aby była mniejsza lub równa jak container
  • Dobry tylko dla strony o szerokości 960 pikseli

Podsumowanie podsumowania :)

Wybrałem te dwa framework’i ponieważ uważam je za proste w obsłudze. W zależności od skomplikowania layout’u możemy wykorzystać któryś z nich.

Który ja będę częściej używał… Zobaczymy. Bardziej przypadł mi do gustu 960, ponieważ tej szerokości używam najczęściej przy tworzeniu stron (moja akurat ma 940 pikseli).