Wszyscy zaczynamy gdzieś. Jako nowy projektant nie mogłem mniej dbać o strukturę w moich projektach. Otworzyłem Photoshopa i pchnąłem piksele, dopóki nie zrobiłem czegoś, co moim zdaniem wyglądało fajnie. Jak nauczyłem się kodu, mój proces był podobnie przypadkowe.
Nie patrzę wstecz na dawne czasy z nadmierną sympatią. Moja praca była niechlujna i nieostra. Nie miałem jasnych celów. Na początku wydaje mi się, że nie jest tak źle, biorąc pod uwagę, że większość moich studiów projektowych pochodziła z tutoriala Photoshopa, moja praca nie była straszna.
Ale potem dowiedziałem się o systemach gridowych. Zapomniałem dokładnie, kiedy i jak zostały one powszechnie używane w projektowaniu stron internetowych, ale nagle, każda strona związana z projektem strony internetowej, do której poszedłem, była pełna artykułów o 960.gs lub innym systemie gridowym. Znaczenie zapewnienia spójnej struktury wizualnej w naszych układach zostało podkreślone przez wszystkie wielkie nazwiska i zmienione w trend.
Równie szybko trend stał się standardem branżowym, a teraz większość z nas nie zastanawia się dwa razy nad tym, czy zamierzamy wdrożyć system gridowy. Pytanie tylko, który? Czy pójdziemy z jedną z wielkich nazwisk lub mniej znaną odmianą, czy nawet zrobimy własną?
W tym artykule chciałbym rzucić okiem na drugą opcję: nowe i mniej znane systemy sieciowe. Zawsze jest ktoś, kto wymyśla nowe sposoby rozwiązania różnych problemów związanych z układem i myślę, że ważne jest, aby znać jak najwięcej podejść, więc spójrzmy na kilka podstawowych struktur siatki.
34Grid chodzi o równy rozkład kolumn. Może on również uwzględniać nierówne rozkłady, ale nie jest to główny cel tego systemu sieci. Dla tych z was, którzy chcą podzielić większość lub wszystkie strony na równe części w poziomie, jest to wasza struktura.
Jak to działa
Ramy są zaprojektowane tak, aby można było je dostosować do twoich potrzeb, abyś nie tylko pobierał i odtwarzał. Najpierw musisz skonfigurować swoją siatkę na stronie głównej projektu. Szybki formularz pozwala określić, ile kolumn będzie pasować w rzędzie, jak duże będą marginesy i czy zastosować zmiany CSS3 w kolumnach, gdy rozmiar ekranu zmieni się.
Sam kod jest podzielony na dwa pliki CSS: jeden z kodem podstawowym i jeden ze wszystkimi zapytaniami o media. Klasy CSS są proste. Zastosowanie ".col_1" do kolumny spowoduje wypełnienie tego wiersza do 100%. '.col_2' utworzy kolumnę o szerokości 50% i tak dalej.
Ponadto elementy img, obiekty i niektóre inne są automatycznie zmieniane. Istnieje dodatkowa klasa, która pomaga zachować zachowanie obiektów wideo. Witryna internetowa projektu zawiera porady, jak zagrać w Facebook i Twitter.
Wady
Wygląda na to, że nie ma sposobu na zagnieżdżanie kolumn lub tworzenie bardziej złożonych układów kolumn wewnątrz jednego wiersza. Z drugiej strony, jeśli nie potrzebujesz kompleksowości, a potrzebujesz tylko prostego schematu, który możesz dostosować, kiedy zajdzie taka potrzeba, 34Grid wykona zadanie.
Prosta siatka jest responsywną opcją, która ma maksymalną szerokość 1140 pikseli. Innymi słowy, podczas gdy jest zaprojektowany do miłego grania na tabletach i telefonach, Simple Grid zapewnia, że większe ekrany nie zostaną pominięte.
Jak to działa
Jak sama nazwa wskazuje, ten system siatki jest dość lekki. Całość pochodzi z nieskompresowanego pliku CSS o wielkości czterech kilobajtów.
Nazwy klas mają na celu łatwe zrozumienie: ".col-2-6" podzieli wiersz na sześć kolumn i zdefiniuje szerokość kolumny na dwie kolumny. Każdy rząd może być podzielony na jedną kolumnę, ".col-1-1", lub dwa, trzy, cztery itd., Aż do dwunastu.
Wady
Podobnie jak 34Grid, nie ma żadnego przepisu dla kolumn zagnieżdżania. Również sposób obsługi marginesów dla pierwszej i ostatniej kolumny może powodować trudności podczas tworzenia, na przykład, galerii zdjęć.
Ten jest dla każdego, kto woli prostą siatkę o zwykłych angielskich nazwach klasowych. Jest responsywny, łatwy do zrozumienia i szybko wdrożony.
Jak to działa
Po ustawieniu zwykłych elementów ".container" i ".grid", kolumny zostaną zaimplementowane w staroświecki sposób. Jedna klasa (".itit") służy do definiowania ogólnych atrybutów kolumny, a inna klasa służy do definiowania szerokości. Wiersze można podzielić na 2-5 kolumn, a nazwy klas wyglądają mniej więcej tak: ".one-of-three, .two-of-three".
Zawiera również kilka podstawowych stylów typograficznych.
Wady
Po raz kolejny jest to struktura gridowa przeznaczona dla nieskomplikowanych układów, więc nie ma postanowień dla zagnieżdżonych kolumn. Ponadto istnieje tylko jeden punkt przerwania, ustawiony na szerokość rzutni równą 650 pikseli, więc niektóre z twoich kolumn mogą przedwcześnie zakończyć się dość szeroko.
Matt (AKA Dar ) jest trochę jak ja. Uwielbia projektowanie, ale nie lubi matematyki tak bardzo. W rezultacie jego Siatki proporcjonalne Wydaje się, że w nieskończoność kalkuluje się tak wiele, jak to tylko możliwe, w zależności od box-sizing własność. Rezultatem jest kompletny, ale wciąż całkiem lekki, system kratek, który obejmuje twoje podstawy dla elastycznego układu.
Jak to działa
Kiedy mówię, że ten system zależy od box-sizing Mam na myśli, że kolumny mają podane szerokości procentowe bez uwzględnienia rynien. Rynny o ustalonej szerokości są definiowane przez padding ; i box-sizing upewnia się, że kolumny ładnie się odtwarzają.
Szerokość rynny i większość innych pomiarów określa się za pomocą "ems". Zgodnie z nazwą tej siatki, klasy kolumn są proporcjonalne (tj. .col-one-third , .col-two-thirds ), a kolumny są mniej lub bardziej nieskończenie zagnieżdżone, co bardzo mi się podoba.
Klasy uwzględniają zmiany wymiarów kolumn w trzech różnych punktach załamania. Same zapytania o media są zorganizowane w sposób "mobilny", zgodnie ze standardowymi praktykami.
Istnieje osobny arkusz stylów dla programu Internet Explorer 8 i starszych. Postrzeganie jako IE8 nie obsługuje zapytań o media, a wersje starsze niż te nie obsługują box-sizing , są one dostarczane w układzie o stałej szerokości.
Dołączone są również pliki SASS (oba .sass i .scss) do szybkiego i łatwego dostosowywania systemu siatki.
Wady
Nie miałbym nic przeciwko posiadaniu większej liczby szerokości kolumn (piątej, szóstej, ósmej). W przeciwnym razie jest to w dużym stopniu pozbawiony błędów i dobrze zaokrąglony system sieci.
Z zaawansowanych systemów gridowych na tej liście, Jeden% jest najprostszy, ale w żadnym wypadku nie jest niekompletny. Jest przeznaczony do obsługi nieco większych ekranów i dużych elementów interfejsu użytkownika, jeśli jego strona główna jest jakimkolwiek wskazaniem.
Nazwa pochodzi od faktu, że szerokość siatki i kolumny jest obliczana tak, aby zawsze była równa 99% zamiast 100%. Eliminuje to potrzebę stosowania niektórych bardziej złożonych powtarzających się liczb dziesiętnych i liczbowych, które często są zmuszane przeglądać.
Jak to działa
Sama siatka podzielona jest na klasyczne dwanaście kolumn. Zajęcia są proste ( .onerow , .col1 , .col6 ) i podoba mi się, że ty, w większości, używasz tylko jednej klasy na kolumnę.
Domyślnie są dostępne dwa punkty przerwania: 768 pikseli i 1024 pikseli. Jeśli mam być szczery, ten pierwszy wydaje się trochę ... duży ... ale zawsze możesz dodać kolejny punkt przerwania, jeśli go potrzebujesz. Podano również dwa przykłady szerokości pulpitu: 1000 pikseli i 1200 pikseli.
Na stronie głównej projektów można pobrać pliki akcji programu Photoshop i pliki PSD odpowiednie do korygowania układów za pomocą tego systemu siatki.
Wady
Moje dwa duże problemy są tutaj zwyczajne. Po pierwsze: bez kolumn zagnieżdżających. Zagnieżdżanie kolumn jest dobre, ludzie! Po drugie: ostatnia kolumna w każdym wierszu musi mieć .last klasa zastosowana do niego.
Struktura siatki CSS z różnymi przeglądarkami, która nie ukryje pikseli na marginesach! To jest slogan dla Flurdy, i szybkie przejrzenie dokumentacji pokaże, dlaczego: Twórca Flurid naprawdę nie chce, aby twój układ się zepsuł. Zawsze.
W tym przypadku, ze względu na sposób, w jaki działa zaokrąglanie podpikselowe, przeglądarka czasami mówi "wkręć" i umieści ostatnią kolumnę w wierszu gdzieś, gdzie nie powinno się iść. Flurid jest zbudowany dla stabilności, dzięki czemu twój układ zawsze działa, nawet w starszych wersjach IE. (Kompatybilność jest wymieniona jako IE5 +.)
Jak to działa
Flurid ma wszystkie potrzebne funkcje: zwykłe kolumny, mieszane kolumny, zagnieżdżone kolumny i przesunięte kolumny. Lista możliwych szerokości i klas kolumn jest obszerna i zależy od proporcji, więc warto poświęcić czas na zapoznanie się z nimi.
Pewna dostatecznie kompletna dokumentacja jest dostarczana za pośrednictwem GitHub, a także wtyczka jQuery, która dodaje dodatkowe funkcje - tak, jest dostarczana z własną wtyczką jQuery, która zapewnia kolumny o równej wysokości i może umieszczać naprzemiennie klasy na twoich kolumnach, dla twojej przyjemności stylizacji.
Wady
To takie brzydkie .last klasę ponownie. Mimo to, zgodnie z dokumentacją, tym razem jest ku temu dobry powód.