• Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt
Niebieski Pomarańczowy Zielony Różowy Fioletowy

960 Grid System

Opublikowane 4 sierpnia 2010. Autor: Kamil Brenk. Wizyt: 3 537.

Kategorie: Front-end Development
Tematyka: CSS, css framework, framework, narzędzia dla webmasterów

sie 04

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).

Przydatne linki
  • 960 Layout System – generator szablonów

Komentarze (6)

  1. Grid 3 września 2011

    Ciekawy system – framework dla CSS. Kiedy będzie jakiś framework dla HTML ? :)

  2. Kamil Brenk 3 września 2011

    Hmm.. Boilerplate po części jest takim „frameworkiem” do HTMLa, bo daje „fundament” aplikacji i podstawową strukturę kodu :-)

  3. GuruZjeb 13 września 2012

    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 ;-)…

  4. Kamil Brenk 13 września 2012

    @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 :)

  5. GuruZjeb 17 września 2012

    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 ;-))

  6. Kamil Brenk 18 września 2012

    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.



Kamil Brenk Blog

PHP, JavaScript, SQL, HTML

  • Informacje o blogu

    Kamil Brenk

    Blog o tworzeniu aplikacji na potrzeby sieci Web.

    Praktyczne przykłady, porady i sztuczki. PHP, SQL, AJAX, JavaScript, HTML i pochodne.

    Kanał RSS

    • Najnowsze
    • Komentarze
    • Popularne
    • Liczniki w CSS
    • Wyprzedaż książek o programowaniu!
    • Niestandardowy placeholder
    • JavaScript w modułach
    • Co dalej z blogiem?
    • Interaktywna mapa w HTML i CSS
    • Olsztyn: Jak wyseparować zawartość zassaną przez file_get_content?
    • ERMLAB: Od czegoś trzeba zacząć :) Wiele osób właśnie stawia na...
    • david: co nalezy wkleić na stronę aby plik ze stylami był ladowany...
    • krynicz: Nie jestem pewien czy dobrze to rozumiem: wpisujemy OG w...
    • yaro: Jak zmienić re_write znak "_" na "-"?
    • Piotr: stworzyłem prostą stronkę w PHP, czy jest możliwość aby...
    • MichalR: Super sprawa... bardzo przydatne.. dzieki i pozdrawiam..
    • Niestandardowe czcionki na stronie
    • Sposoby wczytywania JavaScript
    • Gramatyka w PHP, część 1
    • Umowa i zaliczka dla freelancera
    • Wysyłanie wiadomości SMS w PHP
    • Projekt aplikacji po stronie klienta
    • Własny mechanizm Feed
  • Szukajka
    Wpisz co chcesz wyszukać na stronie…
  • Kategorie
    • Apache
    • Freelancer
    • Front-end Development
    • HTML5 & CSS3
    • Inne
    • JavaScript
    • Książki
    • PHP
    • Po godzinach
    • Pozycjonowanie
    • Protokół HTTP
    • SQL
    • Wyrażenia regularne
  • Moje serwisy
    • Testy zawodowe
    • Miłość, uczucia i seks
  • Czytane blogi
    • Wojciech Sznapka
    • Wojciech Soczyński
    • Michał Wachowski
    • Tomasz Kowalczyk
    • Filip Górczyński
  • Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt

Kamil Brenk © 2010. All rights reserved.

Designed by FTL Wordpress Themes brought to you by Smashing Magazine.

Do góry ∧