Nie powtarzaj się w stylach, czyli 5 wartych uwagi frameworków CSS

Frameworki CSS to fascynująca sprawa, nie tylko dla webdesignerów, ale też wszystkich, którzy szybko chcą zmontować atrakcyjnie wyglądającą witrynę. Jednym ruchem pozbywamy się tych niekończących się problemów z niekompatybilnością przeglądarek i oszczędzamy całe godziny pracy, potrzebne do zbudowania interesujących layoutów. Przedstawiamy Wam pięć frameworków CSS, które pomogły nam w naszej webmasterskiej pracy – i które z takich czy innych powodów polubiliśmy.

Emastic

Emastic to framework CSS, który wyruszył na drogą sercu każdego geeka misję: by poznawać dziwne nowe świat, poszukiwać nowych form życia i nowych miejsc w Sieci, by śmiało podążać tam, gdzie żaden framework CSS jeszcze nie dotarł.

To elastyczny framework, pozwalający na kontrolę szerokości stron zarówno w jednostkach względnych jak i bezwzględnych (px, %, em), wykorzystanie w siatce kolumn, efektowne pozycjonowanie i rozmaite typograficzne efekty. Zajmuje przy tym niecałe 4 KB. Tutaj można znaleźć dokumentację Emastica, same zaś pliki frameworka dostępne są na stronie code.google.com/p/emastic/.

xCSS

Ucieleśnienie idei „Nie powtarzaj się” (DRY) w frameworku xCSS oznacza przyspieszenie czasu robienia strony dzięki uzyskaniu intuicyjnego wglądu w strukturę CSS, możliwość wykorzystania zmiennych, dziedziczenia i zagnieżdżania selektorów oraz składnię na tyle elastyczną, że „każdy plik CSS jest ważnym plikiem xCSS.

Dorzućmy do tego prostą konfigurację przez jeden plik, niewielkie rozmiary i łatwość zarządzania rozbudowaną strukturą plików CSS – a jasne się stanie, że warto zainteresować się dokumentacją xCSS i pobrać framework ze strony code.google.com/p/xcssframework/.

Typogridphy

Typogridphy to dzieło Harry'ego Robertsa z serwisu CSS Wizardry, udostępniono go na wolnej licencji do użytku tak osobistego jak i komercyjnego. Bazuje na frameworku 960 Grid System i pozwala na budowanie ciekawych, typograficznie atrakcyjnych układów siatek. Ich kod w pełni się waliduje – to w pełni poprawne, semantyczne xHTML i CSS.

Jak wyjaśnia autor, Typogridphy wykorzystuje metodę znaną w typografii jako „tworzenie pionowego rytmu”, w której wszystkie przystające linie tekstu układają się poziomo, bez względu na przerwy w liniach i nowe paragrafy. Zbudowane w ten sposób layouty ładnie się skalują. Dokumentację frameworka oraz jego pliki znaleźć można na stronie csswizardry.com/typogridphy/.

1Kb CSS Grid

Przedstawione wyżej projekty wydają ci się zbyt skomplikowane – chciałeś po prostu wygenerować sobie siatkę? Na stronie www.1kbgrid.com/ znajdziesz kreator, w którym wybierzesz sobie liczbę kolumn, ich szerokość oraz rozmiar odstępów, klikniesz w przycisk Download i dostaniesz gotową siatkę. Według autora, 1Kb CSS Grid może posłużyć też jako alternatywa dla engine'u szablonów strony, gdy nie można tego zrobić po stronie serwera.

Framework pozwala na zagnieżdżanie wierszy i tworzenie siatek elastycznych, jak sama nazwa wskazuje, całość ma mniej niż 1 kilobajt.

Baseline

Jeśli chcesz szybko zbudować witrynę, to Baseline jest dobrym punktem startu. Gratis dostaniesz przyjemny układ i niezłą typografię. Dzięki temu frameworkowi zresetujesz domyślne style przeglądarki, ustylizujesz podstawowe elementy HTML-a (w tym formularze i nowe elementy z HTML5) i zbudujesz prostą siatkę.

Znacznie lepiej niż inne frameworki, Baseline radzi sobie z problemem poprawnego zawijania tekstu pomiędzy nagłówkami i kolumnami. Framework ten „próbuje ustawić metrykę fontu tak, by właściwie ustawić nagłówki, paragrafy, etykiety formularzy i inne główne elementy na stronie, tworząc harmonijny układ” – pisze autor projektu, który znaleźć można na stronie www.baselinecss.com/.

A jak wyglądają Wasze doświadczenia z frameworkami CSS? Czy zaoszczędziliście dzięki nim czas? A może uważacie je za dodatkową, zbędną warstwę obcego kodu?

źródło: code.google.com, csswizardry.com, baselinecss.com, 1kbgrid.com

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

4 skomentuj »

Komentarze

#1 dge 2011-02-07 16:55:14 1
wspanialy tytul naprawde mnie rozbawil:D
IP: 90.156.73.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.86 Safari/534.13
#2 qqq 2011-02-07 16:55:58 0
wspomniałbym tutaj jeszcze o języku LESS,

dużo lepszym odpowiedniku xCSSa, który działa tylko z PHP i generalnie jest mniej rozwiniętym projektem
IP: 77.254.204.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.18 Safari/534.16
#3 hipertracker^® 2011-02-08 00:21:04 0
A gdzie Blueprint? http://blueprintcss.org/, że nie wspomnę o YUI 2 http://developer.yahoo.com/yui/grids/. Niezły jest też SASS/SCSS http://sass-lang.com/ i Compass http://compass-style.org/ (który łączy SASS/SCSS z Blueprint)
IP: 78.16.32.[...] Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b10) Gecko/20100101 Firefox/4.0b10
#4 HTD 2011-02-14 07:35:07 0
Przyda się przy tworzeniu własnych layoutów. Jak się dostanie layout w PS, trzeba i tak wszystko robić ręcznie, plus całe wiadro hacków użyć, żeby oszukać CSS i przeglądarki, żeby jednak "w pionie też się dało".

Do własnych produkcji to jednak idealna sprawa, a przynajmniej warta zbadania. W szczególności Baseline wydaje się warty uwagi - z tego co widziałem na ich stronie potrafi rozłożyć sensownie elementy formularzy.
IP: 87.207.172.[...] Opera/9.80 (Windows NT 6.1; U; pl) Presto/2.7.62 Version/11.01

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.