Zestaw narzędzi i zasobów systemu 960 Grid
System 960 Grid został stworzony przez Nathana Smitha jako sposób na usprawnienie pracy nad tworzeniem stron internetowych poprzez udostępnienie powszechnie używanych wymiarów, w oparciu o szerokość 960 pikseli.
Struktura 960.gs (lub jakakolwiek struktura CSS) została opracowana przede wszystkim do szybkiego prototypowania, ograniczania powtarzalnych i żmudnych zadań, ale jest również bardziej niż odpowiednia do użycia w każdym projekcie projektowania stron internetowych.
Zapewni to Twojej witrynie solidną podstawę do budowania i stylizowania Twojego projektu.
W tym artykule znajdziesz samouczki, prezentację stron zaprojektowanych przy użyciu 960.gs, spin offów, podstawowe motywy WP zbudowane na 960.gs i możliwych frameworkach alternatywnych, jeśli z jakiegoś powodu nie podoba ci się siatka 960 system.
W pakiecie do pobrania znajdują się arkusze szkiców do drukowania, układy projektów i plik CSS, które mają identyczne wymiary.
Masz dwa szablony, 12 siatek słupów podzielonych na części o rozmiarze 60 pikseli i 16 siatek kolumn podzielonych na 40 pikseli. Każda kolumna ma 10 pikseli marginesów po lewej i prawej stronie, co tworzy szerokie na 20 pikseli rynny między kolumnami.
Strona domowa: 960.gs Strona główna .
Pobieranie : Pobierz 960.gs .
Próbny : Zobacz stronę demonstracyjną 960.gs .
960.gs Poradniki
960 CSS Framework - poznaj podstawy
Jest to świetny podstawowy samouczek do rozpoczęcia, napisany przez Stefana Vervoorta z divitodesign. Przejmuje się podstawy ładowania frameworka, dzięki czemu można szybko rozpocząć pracę z 960.gs.
Praca z 960.gs
Kolejny samouczek, który poprowadzi cię przez podstawy instalacji 960.gs, szczególnie przydatny dla kwestionowanego CSS.
Szczegółowe spojrzenie na strukturę CSS 960
Gdy wykorzystasz okazję, aby spędzić trochę czasu z 960.gs, będziesz zdumiony, ile czasu można zaoszczędzić podczas tworzenia projektów internetowych.
Prototypowanie za pomocą platformy Grid 960 CSS
W tym artykule omówiono cały proces prototypowania, objaśniono podstawy Grid 960, planowanie siatki dla projektu i kodowanie prototypu. Tak szybko.
Zbuduj motyw gazety z WP_Query i 960 CSS Framework
Ten samouczek nauczy Cię, jak używać WP_Query do stworzenia 3-kolumnowego motywu z gazetami, który ma wszystkie główne posty na blogu w głównej kolumnie, i odstawia na bok zestaw wpisów z wybranej kategorii. Korzystając z frameworku CSS 960 dla układu i reszty motywu, pokazano, jak to znacznie przyspieszy twoją produktywność.
Zaprojektuj nowy motyw na bloga w sieci 960
Ten samouczek uczy kształtować motyw blogu w Photoshopie, który jest przeznaczony do użycia w ramach 960. Ten samouczek został zaprojektowany bardziej dla teorii projektowania stron internetowych niż technika Photoshopa, ale spędza znacznie więcej czasu na teorii projektu i aplikacji.
960 Spin Offs
Typogridphy - układ CSS Typographical i Grid Layout
Typogridphy to framework CSS skonstruowany w celu umożliwienia projektantom stron internetowych i programistom front-end szybkiego kodowania typograficznie przyjemnych układów gridowych. Pozwala na tworzenie układów gridowych, które są wszechstronne i atrakcyjne, sprawdzają ścisłe xHTML i CSS. Używa również metody typograficznej znanej jako "tworzenie pionowego rytmu" , przy czym wszystkie sąsiednie linie tekstu są ułożone poziomo, niezależnie od linii podziału i nowych akapitów.
Próbny : Typogridphy Demo
Uwertura - Fluid 960 Grid System 1.0
Opracowany przez Stephena Bau z Design7 , zbudował bibliotekę powszechnie używanych elementów HTML, łącząc je z CSS dla typografii i układu oraz dodając podstawowe efekty z popularnych bibliotek JavaScript (głównie MooTools). Po pobraniu możesz wybrać jeden z trzech szablonów: o stałej szerokości 960 px, szerokości 12-kolumnowej lub szerokości 16-kolumnowej . Te szablony są niesamowite, musisz zobaczyć szczegóły, aby w to uwierzyć.
Próbny : Uwertura demonstracyjna .
Gablota
Wszystkie piękne miejsca poniżej zostały zbudowane przy użyciu systemu siatki 960:
Motywy WordPress
Podobnie jak w rzeczywistych 960.gs, te motywy WP są praktycznie niezaangażowane i mają bardzo podstawową funkcjonalność, ale zostały zbudowane przy użyciu 960.gs. Bardzo przydatne dla każdego programisty WP.
5-letni motyw WordPress
Podstawowy motyw WP zbudowany przy użyciu 960.gs.
960bc Motyw WordPress
Motyw 960bc to w zasadzie puste płótno z minimalną stylizacją i brak obrazów opartych na systemie siatki 960 (tylko 12 kolumn) dla programistów WordPress, którzy chcą pracować w tradycyjnym układzie opartym na siatce.
Możliwe alternatywy
Wybór struktury CSS może być trudny, jeśli 960.gs nie jest odpowiedni dla ciebie, być może możesz wypróbować niektóre z poniższych frameworków.
Blueprint: A CSS Framework
Blueprint to framework CSS, którego celem jest ograniczenie czasu projektowania CSS. Daje solidną podstawę CSS do zbudowania projektu na szczycie, z łatwą w użyciu siatką, sensowną typografią, a nawet arkusz stylów do drukowania. Jest znacznie mniej nadęty niż ramy YUI i prawdopodobnie jest podobny do 960.gs pod względem łatwości użycia.
CSS-Boilerplate
Od jednego z autorów Blueprint. Stworzył uproszczoną konstrukcję, która zapewnia niezbędne elementy niezbędne do rozpoczęcia dowolnego projektu. Ta struktura jest lekka i stara się nie sugerować niesymantycznych konwencji nazewnictwa.
Elements - A Down to Earth CSS Framework
Został zbudowany, aby pomóc projektantom pisać CSS szybciej i wydajniej. Elementy wykraczają poza bycie tylko ramą, to jest własny proces projektowy. Ma wszystko, czego potrzeba do ukończenia projektu.
WYMstyle - framework CSS - Przegląd
Celem tego projektu jest dostarczenie zestawu dobrze przetestowanych modułowych plików CSS, które można wykorzystać do szybkiego projektowania witryn internetowych.
Jeszcze inny układ Multicolumn | YAML
"Yet Another Multicolumn Layout" (YAML) to framework (X) HTML / CSS do tworzenia nowoczesnych i elastycznych układów pływających. Struktura jest niezwykle wszechstronna w programowaniu i absolutnie dostępna dla użytkowników końcowych.
CleverCSS
CleverCSS to mały język znaczników dla CSS zainspirowany przez Python, który może być użyty do zbudowania arkusza stylów w czysty i uporządkowany sposób. Pod wieloma względami jest czystszy i bardziej wydajny niż CSS2.
sparkl CSS Framework
Sparkl łączy znaczniki POSH, Bulletproof CSS i dyskretną JavaScript w jeden łatwy w użyciu framework do tworzenia stron internetowych, który ułatwia tworzenie witryn kuloodpornych, które są zgodne ze standardami sieciowymi. Korzysta z modularnego szkieletu, umożliwiając korzystanie z tego, czego potrzebujesz i pomijając to, czego nie.
Framework CSS jQuery UI
Interfejs zapytań zawiera solidną strukturę CSS zaprojektowaną do budowania niestandardowych widgetów jQuery. Struktura obejmuje klasy, które obejmują szeroki zakres powszechnych potrzeb interfejsu użytkownika i można nimi manipulować przy użyciu jQuery UI ThemeRoller. Budując komponenty interfejsu użytkownika przy użyciu struktury CSS jQuery UI, będziesz przyjmował wspólne konwencje znaczników i pozwala na łatwą integrację kodu w całej społeczności wtyczek.
Napisany specjalnie dla WDD przez Paula Andrew z Speckyboy.com
Czy używasz 960gs na swoich stronach internetowych? Jakie są główne zalety? Bardzo chcielibyśmy usłyszeć od ciebie ...