Najlepsze frameworki CSS

Frameworki upraszczające pisanie kodu powstały dla wielu języków programowania. Najsłynniejsze z nich to chociażby Ruby on Rails, Zend Framework czy Django. Okazuje się, że własne frameworki stworzyli również koderzy HTML i CSS. Upraszczają pracę i pozwalają wyeliminować wiele żmudnych czynności, od których zwykle rozpoczynamy tworzenie nowego projektu.

Czym dokładnie jest framework CSS? Jest to plik lub zestaw plików CSS, zawierających wiele zdefiniowanych reguł. Czasem zawiera także szablon HTML, pliki graficzne lub nawet kod JavaScript. Umożliwia to szybkie tworzenie wielokolumnowych układów strony i zmniejsza ilość nudnej pracy, którą trzeba wykonać przy tworzeniu nowej strony w początkowych etapach realizacji projektu.

Istnieje co najmniej kilka frameworków CSS, które są przydatne i – po przyzwyczajeniu się – wygodne w użyciu. Nie brak także mniej udane frameworki, które są trudne w obsłudze i nie wnoszą wiele udogodnień. Wszystkie zostały opisane w tym artykule, abyś nie musiał przekonywać się o tym na własnej skórze.

Stosowanie frameworków ma wiele zalet. Dostęp do gotowych reguł CSS pozwala zaoszczędzić czas. Siatka umożliwiająca szybkie tworzenie układów kolumnowych obecna w kilku frameworkach bywa niezwykle przydatna. Frameworki nie są jednak dobrym wyjściem w każdej sytuacji. Sprawdzają się przede wszystkim w przypadku prostszych projektów. Skomplikowane, innowacyjne rozwiązania mogą być dla frameworków CSS zbyt dużym wyznaniem. Musisz samodzielnie ocenić każdą sytuację. Będziesz mógł to zrobić skutecznie, jeśli poznasz możliwości poszczególnych frameworków.

Blueprint

http://www.blueprintcss.org

Jest to jeden z bardziej zaawansowanych i popularniejszych frameworków CSS. Udostępniony został na licencji GNU GPL oraz zmodyfikowanej licencji MIT. Można go bez przeszkód używać przy realizacji projektów komercyjnych (warto wcześniej poznać warunki obu licencji opisane w pliku „LICENSE”). Jego budowę i przykłady zastosowania omawialiśmy już dokładniej wcześniej (http://serwis.magazynyinternetowe.pl/artykul/3518,1,1233,blueprint_a_css_framework.htm).

Pierwszą czynnością do wykonania po pobraniu najnowszej wersji frameworka jest oczywiście dołączenie plików Blueprinta do dokumentu HTML:

Framework znajduje się w katalogu blueprint, który należy skopiować do nowego projektu. Pierwszy plik CSS zawiera główne reguły, drugi odpowiada za style dla druku, a ie.css zawiera reguły dostosowujące Blueprinta do wymagań Internet Explorera.

Podstawowym elementem frameworka jest grid czyli siatka. Cała strona podzielona jest na 24 wirtualne kolumny o łącznej szerokości 950 pikseli. Tworząc układ kolumnowy możesz zdecydować, ile wirtualnych kolumn wejdzie w jego skład. Poniżej przykład zastosowania siatki:


	Blueprint jest interesujący
	
 		Kolumna 1
 	
	
	 	Kolumna 2
 	
 	
 		Kolumna 3

Powyższy kod tworzy stronę posiadającą 3 kolumny o szerokości 5, 12 i 7 wirtualnych kolumn czyli odpowiednio 190, 470 i 270 pikseli. Jak widać, są one otoczone pudełkiem o klasie container. Aby stworzyć kolumnę o określonej szerokości użyj jednej z klas span-1, span-2 i kolejnych. Ich szerokość jest zdefiniowana w pliku screen.css. Ostatnia kolumna musi być dodatkowo oznaczona klasą last.

Zachęcamy do przyjrzenia się bardziej zaawansowanemu przykładowi strony, który przygotowaliśmy na potrzeby tekstu: http://www.internetmaker.pl/pobierz/161,z.html.

Wiele dodatkowych informacji na temat Blueprinta znaleźć można także na stronie domowej projektu oraz dedykowanej stronie wiki: http://wiki.github.com/joshuaclayton/blueprint-css/home.

960 Grid System

http://960.gs

960 Grid System to kolejny interesujący framework CSS. Dostępny jest na licencji MIT lub GPL. Jego podstawowe przeznaczenie to budowa siatki o szerokości 960 pikseli, czyli nieznacznie większej od tej zastosowanej we frameworku Blueprint.

Główne pliki znajdują się w katalogu code. Znajdziesz tam plik demo.html demonstrujący działanie siatki. Może ona być tworzona na bazie 12 lub 16 wirtualnych kolumn. Trzy pliki ze stylami znajdują się w katalogu css. Możesz ograniczyć się jedynie do pliku 960.css zawierającego reguły tworzące siatkę. Dwa kolejne pliki zawierają dodatkowe reguły, które mogą być dla ciebie przydatne, ale nie są niezbędne. Prace zacznijmy od dołączenia wszystkich plików:

Załóżmy, że chcemy skorzystać z 12-kolumnowej siatki i stworzyć 4 kolumny. Posłużymy się poniższym kodem:


	
		Kolumna 1
	

	
		Kolumna 2
	
	
		Kolumna 3
	

	
		Kolumna 4

Kolumny są otoczone divem o klasie container_12, który oznacza, że korzystamy z 12 kolumn. Każda z nich ma szerokość 80 pikseli. Możemy też skorzystać z wersji 16-kolumnowej zmieniając klasę na container_16.

W powyższym przykładzie tworzymy cztery kolumny. Posługujemy się klasami grid_3. Zmieniając tą liczbę możesz danej kolumnie przypisać inną szerokość. Na końcu koniecznie musi wystąpić div z klasą clear.

Zalecamy dokładne przestudiowanie pliku demo.html znajdującego się w paczce z frameworkiem. Dodatkowo ciekawe przykłady jego wykorzystania w komercyjnych projektach są podane na stronie domowej, pod adresem http://960.gs.

Warto także wspomnieć o tym, że Bill Heaton, autor bloga http://pixelhandler.com połączył ze sobą framework Blueprint oraz siatkę z 960 Grid System. Ten interesujący mash-up jest dostępny do pobrania na stronie http://pixelhandler.com/design/mash-up-of-two-rockin-css-grids-960gs-blueprint. Jest to wartościowe narzędzie dla każdego webmastera, któremu podobają się elementy Blueprinta, ale woli szerszą siatkę 960.gs.

BlueTrip

http://bluetrip.org

Projekt BlueTrip to połączenie kilku frameworków i dostępnych publicznie arkuszy stylów, między innymi projektów Blueprint, 960.gs oraz Elements (ten framework opisujemy w dalszej części tekstu). Jest również udostępniany na podwójnych licencjach MIT i GPL.

W katalogu css znajdziesz pliki frameworka, a w katalogu examples kilka praktycznych przykładów. Jak od razu widać, grid jest bardzo podobny do Blueprinta i w przypadku siatki jedynie kilka nazw klas zostało zmienionych przez autora. Jeżeli poznałeś już Blueprinta, to z zastosowaniem BlueTripa także nie będziesz mieć problemów.

Czym wyróżnia się ten framework? Przede wszystkim oferuje większą liczbę gotowych reguł CSS. Na pierwszy rzut oka część zastosowanych stylów jest bardziej elegancka, niż w przypadku np. Blueprinta. Z frameworka Elements pochodzą gotowe ikonki używane przy formularzach i do oznaczania typów dokumentu. Bardziej szczegółowo jego możliwości możesz sprawdzić w pliku index.html w katalogu z przykładami lub na stronie http://www.bluetrip.org/example/index.html.

Obecnie BlueTrip, pomimo mniejszej popularności, wysuwa się na pozycję lidera wśród frameworków CSS. Łączy zalety wielu różnych projektów i jest zdecydowanie godny uwagi.

YAML

http://www.yaml.de/en/home.html

Framework YAML prezentuje całkowicie inne podejście niż pozostałe projekty. Nie znajdziesz tutaj dynamicznej siatki, która w innych projektach jest podstawą. YAML posiada sztywną strukturę HTML, podstawowy szablon o nie do końca jasnym kodzie i sporą liczbę plików CSS, w których czasem niełatwo się zorientować. Nie tego oczekujemy od dobrej jakości frameworka CSS.

Nie jest on na pewno uniwersalny, a jego możliwości są bardzo ograniczone. Przypomina rozbudowaną stronę, a obszerna dokumentacja to poradnik jej modyfikowania. Uwaga, dokumentacja jest zdecydowanie zbyt obszerna! Nie możemy go więc polecić. Każdy z wcześniej omawianych frameworków CSS wydaje się być lepszym wyborem.

Elements

http://elements.projectdesigns.org

Elements jest czymś pośrednim pomiędzy YAML, a frameworkami typu Blueprint i BlueTrip. Nie posiada wbudowanej siatki i nie umożliwia szybkiej budowy układu kolumnowego. Dostarcza prostą strukturę HTML, podstawowe reguły CSS, zielony, przyjemny dla oka wygląd, pliki JavaScript i CSS umożliwiające użycie Lightboksa oraz zestaw ikonek. I to właściwie wszystko. Jest to pakiet plików idealny dla każdego, kto chce po prostu szybko zacząć tworzyć nowy projekt, ale nie lubi pisać kodu w oparciu o siatkę.

A może coś własnego?

Wielu webmasterów mających dużo do czynienia z kodem HTML/CSS tworzy z czasem własny „pakiet startowy” zawierający najważniejsze reguły CSS, strukturę katalogów, szkielet HTML, czasem kod JavaScript. Nic nie stoi na przeszkodzie, aby przekształcić go w bardziej zaawansowany framework dodając do niego np. grid. Może to mocno uprościć codzienną pracę i pozwoli pominąć każdorazowy etap męczącego „rzeźbienia”. Tak przygotowany kod można potem opisać w dokumentacji i z powodzeniem opublikować w internecie.