Chciałbym w tym wpisie pokrótce przedstawić świetny „framework” dla CSS – 960 Grid System, który znacząco skróci Twoje prace nad szablonami stron WWW.
Nie wiem czy framework jest tutaj odpowiednią nazwą dla tego narzędzia, niemniej jednak 960.gs udostępnia strukturę znacząco ułatwiającą rozbudowę szablonów HTML/CSS, udostępniając gotowe klasy i style.
Z początku miałem opory, by zabrać się za zabawę z tym narzędziem. W końcu style CSS to nie tak ciężki orzech do zgryzienia, a konieczność ładowania 3 plików, aby zainicjować kilka dodatkowych klas, odstraszała.
Spróbowałem jednak i nie żałuję. Od samego początku praca z 960gs jest banalnie prosta. Mamy kilka podstawowych klas, które pomagają w zarządzaniu kolumnami na stronie. Tak opisują to autorzy:
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
Witryna, którą wtedy tworzyłem, została ukończona dużo szybciej, niż gdybym musiał grzebać samemu w dokumencie CSS. Myślałem nawet nad napisaniem własnego tutorialu, jednak ktoś mnie uprzedził (i to dużo wcześniej).
Od czasu opublikowania tutorialu minęło jednak trochę czasu, a sam system dostał kilka nowych funkcjonalności (co mogę opisać, gdyby było zainteresowanie). Warto też zajrzeć na stronę projektu i samodzielnie zorientować się w nowych funkcjonalnościach narzędzia.
Pozostaje mi więc zaprosić wszystkich do zabawy z 960 Grid System, który przydaje się zwłaszcza przy małych i prostych stronach (firmowych, wizytówkach, blogach, portfolio, etc).
Ciekawy system – framework dla CSS. Kiedy będzie jakiś framework dla HTML ? :)
Hmm.. Boilerplate po części jest takim „frameworkiem” do HTMLa, bo daje „fundament” aplikacji i podstawową strukturę kodu :-)
Witam
Ja polecam do takiej zabawy Adobe Dreamweaver CS6 w tej wersji szczególnie !!! Jest tam właśnie obsługa modelu opartego na kolumnach dopasowującego się do każdego rodzaju „wyświetlacza” od urządzeń mobilnych po zwykłe ekrany poczciwych monitorów nie zależnie od rozdzielczości, bo zostały wstępnie zdefiniowane dla urządzeń mobilnych… Polecam sprawdzić jak to działa bo soft dostarcza wiele innych rozwiązań godnych zastosowania i co najważniejsze w wielu przypadkach skraca czas spędzony na wymyślaniu koła od początku ;-)…
@GuruZjeb: z tego co widzę to oryginalna wersja Adobe Dreamweaver CS6 kosztuje 387 euro, natomiast za wspomniany we wpisie 960 Grid System zapłacisz jedyne 0 zł :-) A przy tym wszystkim dostajesz otwarty, zweryfikowany przez społeczność kod, który został wykorzystany na tysiącach stron (w tym także na kilkunastu moich), podczas gdy od Adobe dostaniesz potworka (widziałem kod generowany w ichnim oprogramowaniu). Wybór jest prosty :)
Witaj Kamil
Oczywiście zgodzę się z tym co napisałeś, ale w sytuacji kiedy czas jest tym luksusem którym nie dysponujesz szuka się zazwyczaj ułatwień gdzie po kilkunastu minutach masz gotowy produkt. Oczywiście dodam że jestem nieco starej daty programistą w porównaniu z Tobą i nie bardzo lubię klikać, a w zasadzie wolę konwencjonalne rozwiązania jak chociażby notepad++, to czasem, niestety nie mam większego wyjścia niż Adobe Dreamweaver… tym bardziej jak cały team działa właśnie na tym… Oczywiście prawdą jest też to że nieco opasłe w kod wychodzą spod tego narzędzia stronki czy app, ale tempo narzucane przez młode pokolenie dev jest właśnie podyktowane tym że wolą właśnie takie rozwiązania. Z resztą w Polsce mamy spore grono dobrych programistów wolących dogłębnie zbadać temat a zagranicą niestety grono młodych i w zasadzie bez ambicji, którzy wolą jak toolsy zrobią za nich całą robotę… Dlatego właśnie czytam Twój blog w wolnych chwilach (w zasadzie to na urlopie ;-))
Szczerze mówiąc nigdy w życiu nie korzystałem z Adobe Dreamweaver i trudno mi oceniać. Pamiętam tylko przebłyski sprzed kilku lat, że zainstalowałem wersję trial, uruchomiłem w ramach testów, nie spodobało się i wywaliłem :) Pamiętam też kody wyprodukowane w tym programie i niestety nie przypadły mi do gustu. Trudno wobec tego wypowiadać mi się w temacie, aczkolwiek wspomniany 960 Grid System w zupełności wystarcza i również pozwala w ekspresowym tempie tworzyć strony :)
Niestety 960 Grid System nie jest responsywny, ale dogranie tej funkcjonalności nie będzie trudne: http://adapt.960.gs/ (jeszcze nie testowałem).
Tak czy siak, zaproponowane tutaj rozwiązanie nie jest jedyną drogą budowy CSS – jednym się spodoba, innym nie. Najważniejsze, że na rynku jest dostępnych wiele innych narzędzi i każdy może znaleźć coś dla siebie.