Top 21 systemów i frameworków HTML5/CSS3 Grid

Tradycyjne metody projektowania jeszcze kilka lat temu oznaczały, że trzeba było samodzielnie zaprojektować stronę główną, łącząc ze sobą makiety i pola treści, a potem mieć nadzieję na najlepsze, ale stopniowo ta technika zniknęła i pojawiły się nowe, bardziej nowoczesne metody szybkiego tworzenia stron internetowych pojawiły się. Przede wszystkim CSS3 wprowadził Flex-box — łatwą w użyciu funkcję siatki, której można użyć do tworzenia układów treści, ale mimo to — niektóre są odporne, podczas gdy inne przyjmują jeszcze bardziej skomplikowane podejście do absolutnej precyzji projektowania.

Kiedy otwierasz nową witrynę, zazwyczaj zobaczysz nagłówek witryny, obszar zawartości i pasek boczny — te główne obszary zawierają również własne układy i specyfikacje projektu, a królicza nora wciąż się pogłębia. Ważne jest, aby znaleźć sposób na zaprojektowanie układu strony głównej (lub dowolnej innej strony), który będzie dobrze wyglądał na wszystkich nośnikach, urządzeniach i oprogramowaniu. Pomyśleliśmy więc, że dla naszych kolegów programistów może być przydatne, abyśmy zebrali kolekcję frameworków CSS i HTML oraz systemów do tworzenia układów siatki.

Chcesz więcej frameworków? Wypróbuj nasze inne łapanki:

• Ramy JavaScript
• Ramy HTML5
• Ramy CSS3
• Frameworki Node.js

Nie trzeba dodawać, że te projekty można dostosować do każdej sytuacji, więc możesz oszczędzić sobie bólu głowy związanego z załamaniem i dziwactwami samego układu projektu, a zamiast tego skoncentruj się na wypełnieniu tych pól siatki z żądaną treścią umieścić tam. Istnieje wiele różnorodnych i różnych stylów, które można znaleźć w tych systemach siatki, poświęć trochę czasu na odwiedzenie stron demonstracyjnych, a może nawet zapisz, czego szukasz, aby łatwiej znaleźć pasujące ramy dla twoich potrzeb.

Martwa prosta siatka

Siatki nigdy nie powinny być skomplikowane, w swojej istocie są tylko elementami HTML, które składają się na ogólny projekt, a Vladimir Agafonkin jest jednym z programistów, którzy popierają tę koncepcję. Jego szkielet siatki Dead Simple Grid zawiera tylko dwieście bajtów kodu CSS; to jest tak minimalna ilość kodu, że twoje strony nawet nie zauważą, że tam jest. Możesz oddzielić siatkę, aby zawierała główny obszar treści i elastyczny pasek boczny, jeśli chcesz. Ten rodzaj siatki pasowałby do blogów i ogólnych układów stron głównych, w których preferowany jest minimalny projekt. Responsywny projekt jest zintegrowany dzięki zapytaniom o media, dzięki czemu siatka będzie wyglądać bezbłędnie na każdym urządzeniu, na którym jest używana.

Burbon schludny

Bourbon to bardzo udana biblioteka domieszek dla preprocesora SASS. To oczywiście sprawiło, że Neat jest atrakcyjnym wyborem dla tych, którzy już używają Bourbon i SASS. Neat daje programistom dostęp do systemu płynnej siatki, który jest wystarczająco szybki i łatwy do skonfigurowania w ciągu kilku minut, ale elastyczny do tego stopnia, że ​​nieograniczone zmiany i regulacje nie będą stanowić problemu.

Grd

Grd to system CSS, który wykorzystuje Flexbox jako narzędzie zaplecza do tworzenia elastycznych i nowoczesnych układów responsywnych. Korzystając z Live Demo, możesz bawić się ustawieniami i różnymi dostosowaniami projektu, aby sprawdzić, czy Grd może rozwiązać Twój problem polegający na zintegrowaniu określonego elementu projektu z istniejącym przepływem pracy. Uznaliśmy, że tworzenie nagłówków, stopek i ogólnych obszarów treści jest łatwe, używając wyłącznie listy ustawień.

STRUKTURA

Struktura, która również bazuje na Flexboksie, używa deklaratywnych wzorców składniowych (podobnych do tych w Angular.js) w celu zdefiniowania sekcji i parametrów układu. Niektórzy programiści skarżyli się, że ostateczny znacznik strony nie może zostać zweryfikowany, ale chodzi o to, że używając Structure można stworzyć deklaratywną siatkę, która nie miesza z tradycyjnymi atrybutami CSS, takimi jak klasy i nazwy identyfikacyjne.

System siatki 960

Setki tysięcy stron internetowych wykorzystało system 960 Grid Nathana Smitha do obsługi układu projektowego. Jest to skuteczne narzędzie do usprawnienia pracy ciężko pracujących twórców stron internetowych. Poprzez wybór dwóch różnych układów kolumn (odpowiednio 12 i 16), programiści mogą szybko załadować stronę główną, która będzie obsługiwać wszelkiego rodzaju dynamiczne i statyczne dane wejściowe. Możliwe jest dodanie większej liczby kolumn, ale musisz popracować z dokumentacją, aby lepiej zrozumieć zastosowanie.

Niesemantyczny

Unsemantic to kolejna wersja siatki 960, która zapewnia pełne możliwości responsywnego projektowania. Dzięki unikalnym klasom ściągania programiści mogą zmienić układ tworzonej strony, co może pomóc w promowaniu i prezentowaniu najważniejszych treści w dowolnym momencie, co jest znaną strategią, która pomaga wyszukiwarkom lepiej zrozumieć cel każdego elementu treści. Unsemantic jest również dumnym użytkownikiem Media Queries, więc uznani deweloperzy front-end nie będą mieli trudności z dostosowaniem tej struktury siatki do własnych potrzeb.

Prosta siatka

Stąd nazwa Simple Grid jest dla każdego, kto szuka prostoty i łatwości użytkowania. Układ jest responsywny, kompatybilny ze smartfonami, tabletami i komputerami stacjonarnymi. Innymi słowy, wykonanie Twojego projektu będzie na najwyższym poziomie bez cienia wątpliwości. Jest całkowicie zgodny z dużymi ekranami i wyższymi rozdzielczościami. Ponadto Simple Grid jest tylko siatką, bez żadnych dodatkowych zasobów, co czyni ją bardzo lekką. Dzięki wygodnej dwunastokolumnowej konstrukcji masz swobodę tworzenia układu dokładnie według własnych upodobań. Możesz bezbłędnie podzielić go na dwie, trzy, cztery lub sześć kolumn.

csswizardry-grids

Dzięki siatce HTML, takiej jak csswizardry-grids, możesz zaoszczędzić czas i energię. Jest to solidne narzędzie, które możesz dokładnie wykorzystać do woli. Jest bardzo przyjazny dla użytkownika i łatwo zorganizowany, dzięki czemu programiści stron internetowych na wszystkich poziomach mogą w pełni z niego korzystać. Na powyższym zrzucie ekranu możesz rzucić okiem na wszystkie różne odmiany obsługiwane przez csswizardry-grids. Możesz dowolnie zmieniać kolejność rzeczy, aby dopasować swoje pragnienia do koszulki. Wykonuj teraz swoją aktywność, unikając wykonywania zadań od podstaw za pomocą csswizardry-grids i zacznij na właściwej stopie.

Głęboka siatka

Swoboda, którą oferuje Ci Głęboka Siatka, wykracza daleko poza granice. Ten elastyczny i rozszerzalny system siatek można stosować zarówno w układach stałych, jak i płynnych. Rezultat będzie działał na wszystkich nowoczesnych urządzeniach masło bezproblemowo po wyjęciu z pudełka. Możesz stworzyć dokładnie taką strukturę, jaką chcesz, zmieniając, usuwając lub dodając kolumny zgodnie z własnymi upodobaniami. Możesz najpierw sprawdzić kilka przykładów, aby zobaczyć, co jest możliwe dzięki Profound Grid. Co więcej, dzięki ujemnym marginesom podczas obliczania kolumn, Profound Grid gwarantuje, że płynne układy będą wyglądać tak samo niezależnie od rozmiaru ekranu i przeglądarki internetowej.

Rodzaj patelni

Korzyści z używania systemu grid są ogromne, ponieważ nie tylko oszczędzasz czas, ale także nie musisz martwić się o kwestie techniczne. Na przykład Griddle zapewnia pełną kompatybilność z popularnymi urządzeniami i przeglądarkami internetowymi. Oznacza to, że wydajność Twojej aplikacji będzie zawsze pierwszorzędna. Dzięki Griddle możesz zrealizować wszystko, od proporcjonalnych i zagnieżdżonych siatek po jednostki wyśrodkowane i hybrydowe. Jeśli chodzi o te ostatnie, z pewnym dostosowaniem, możesz połączyć jednostki stałe i płynne w jedną imponującą wersję. Masz kontrolę nad centrowaniem jednostek w poziomie, a nawet możesz zmienić wyrównanie w pionie.

Inteligentna siatka CSS

CSS Smart Grid podąża za najnowszymi trendami i przepisami, aby zapewnić kompatybilność z różnymi urządzeniami. Krótko mówiąc, narzędzie jest lekkie, responsywne i mobilne, dzięki czemu możesz tworzyć za jego pomocą niesamowite rzeczy. Niezależnie od tego, czy używasz smartfona, czy dużego ekranu komputera, CSS Smart Grid zapewnia, że ​​układ działa na obu bez problemu. Dla Twojej informacji, nawet jeśli ktoś używa telefonu z internetem do przeglądania Internetu, Twój projekt oparty na CSS Smart Grid będzie działał równie dobrze – z widokiem jednokolumnowym. Na oficjalnej stronie możesz również szybko dowiedzieć się, jak to zrobić, więc nie napotkasz problemów podczas korzystania z narzędzia.

Gridlex

Gridlex wyróżnia się gwiezdnym designem i łatwością użytkowania. Prostota tej struktury siatki opartej na Flexbox jest zdumiewająca, wizja jest prosta — zawinąć kolumny w siatkę i, jeśli to konieczne, wprowadzić dodatkowe poprawki, aby ostateczny projekt wyglądał nie do odparcia. Wystarczy spojrzeć na demo stron internetowych, które używają Gridlex, aby zobaczyć, że jest to najwyższy system siatki liniowej i nie zawiedziesz się tym, co może zrobić dla twoich własnych projektów i przepływu pracy.

Responsywny system siatki

Responsive Grid System ma wiele zalet, idealną nazwę domeny, jasną wizję i wymagane narzędzia, aby responsywne projektowanie siatki było dziecinnie proste! Generator siatki daje proste dane wejściowe formularza, w którym możesz określić liczbę kolumn, których chcesz użyć, oraz margines, który chcesz zobaczyć między nimi. Kliknij Prześlij i masz gotowy kod wyjściowy następnego responsywnego układu siatki. Autor, Graham, z radością wykona dla Ciebie całą ciężką pracę, jeśli chcesz, możesz się z nim skontaktować w stopce strony.

Gridly

Deweloperzy zbudowali Gridly jako system minimalnego układu siatki do obsługi najnowocześniejszych obecnie przeglądarek. Jego lekka struktura pomaga programistom w łatwym uruchomieniu układu siatki/kolumn bez większych problemów. Ogólnie rzecz biorąc, absurdalnie minimalny rozmiar tej biblioteki sprawi, że będziesz chciał więcej dla przyszłych projektów.

Kamień Własny

Formstone sam w sobie nie jest pojedynczym zarządzanym systemem grid, jest to w rzeczywistości biblioteka dla programistów front-end, którzy potrzebują wysoce konfigurowalnych komponentów i elementów internetowych, które składają się na tradycyjną stronę internetową, z którą spotykasz się na co dzień. Będąc modułową, responsywną i zautomatyzowaną biblioteką — Formstone może być używany nie tylko do skalowania dużego projektu strony internetowej, ale także do wykorzystania samego układu siatki.

Bootstrap

Gdzie byłby Bootstrap dzisiaj, gdyby nie jego system siatki, na którym zbudowano wszystko inne? Nadal z niecierpliwością czekamy na pojawienie się Bootstrap 4, ale w międzyczasie nie możesz się oprzeć, aby powiedzieć „tak” frameworkowi, który zdołał ugruntować swoją pozycję jako jeden z najbardziej znanych frameworków front-end tego stulecia. Miliony stron internetowych są oparte na funkcjach Bootstrapa, ale żadna z nich nie byłaby możliwa, gdyby nie framework sieciowy zintegrowany z rdzeniem Bootstrapa.

Fundacja

Foundation to kolejna udana biblioteka front-end, która obsługuje projektowanie responsywne, najnowsza wersja (Foundation 6) oferuje jeszcze bardziej nowoczesne funkcje i elementy, które mogą pomóc programistom zapewnić swoim klientom niezwykle wszechstronne projekty. Łatwe w użyciu szablony dostarczone przez Fundację dają Ci szansę na odpoczynek od całego rozwoju siatki, a zamiast tego skupienie się na tym, co jest ważne — rzeczach, które zamierzasz umieścić w samej siatce.

Szkielet

Szkielet ma piękny i naturalny wygląd, który sprawi, że będziesz chciał więcej. Twórcy stworzyli ideę Skeleton, aby był najlepszym wyborem dla małych projektów. Możesz także używać go w projektach, w których nie masz ochoty używać pełnoprawnego frameworka. Skeleton zapewnia podstawowe informacje potrzebne do uruchomienia i uruchomienia prototypu witryny; układ siatki, opcje typografii dla nagłówków i sekcji, elementy przycisków dla wszystkich potrzeb formularzy, a właściwie niestandardowe formularze, dzięki czemu możesz zaoszczędzić czas na kodowanie własnego, ładne dodanie list, tabel i składni kodu oraz media ramy zapytań, dzięki czemu Twoje projekty stają się w pełni responsywne!

Responsywny system siatkowy 2

Responsive Grid System (wersja 2) to mobilny system gridowy, który jest bardzo mały, ale bardzo skuteczny w stylu. Możesz wybierać spośród wielu układów kolumn (24, 16, 12). Możesz także dostosować marginesy i dopełnienia między kolumnami oraz użyć wypełniaczy, aby stworzyć gwiezdny układ projektu.

Responsywny system gridowy dla Twojego następnego projektu

Responsive Grid System dla Twojego następnego projektu wykorzystuje te same klasy, co system 960 grid. Stworzony, aby służyć przede wszystkim użytkownikom mobilnym, i zapewnia szablon do zarządzania nagłówkami. Deweloperzy przetestowali go we wszystkich nowoczesnych przeglądarkach, dzięki czemu jesteś w dobrych rękach. Możesz użyć tego jako podstawowego systemu siatki, który pomoże Ci w tworzeniu responsywnego projektowania stron internetowych. To utrzyma twoją obecną biegłość w popularnym systemie sieciowym.

Płyta kotłowa HTML5

HTML5 Boilerplate to solidny framework (szablon) dla programistów front-end. Jest przeznaczony dla programistów, którzy chcą rozpocząć swój projekt bez kłopotów związanych z większymi frameworkami, takimi jak Bootstrap lub Foundation.