Топ-21 грид-систем и фреймворков HTML5 / CSS3

Традиционные методы дизайна всего несколько лет назад означали, что вам приходилось создавать домашнюю страницу самостоятельно, сшивая вместе каркасы и блоки контента, а затем надеяться на лучшее, но постепенно этот метод исчез и появились новые, более современные методы быстрой разработки веб-сайтов. появились. В частности, CSS3 представил Flex-box - простую в использовании функцию сетки, которую вы можете использовать для создания макетов контента, но тем не менее - некоторые из них устойчивы, в то время как другие используют еще более сложные подходы для абсолютной точности дизайна.

Когда вы открываете новый веб-сайт, как правило, вы видите заголовок сайта, область содержимого и боковую панель - эти основные области также включают собственные макеты дизайна и спецификации, а кроличья нора продолжает углубляться. Крайне важно найти способ разработать макет домашней страницы (или любой другой страницы), который бы хорошо смотрелся на всех носителях, устройствах и программном обеспечении. Итак, мы подумали, что нашим коллегам-разработчикам будет полезно собрать коллекцию фреймворков и систем CSS и HTML для разработки макетов сеток.

Хотите больше фреймворков? Попробуйте другие наши обзоры:

• Фреймворки JavaScript
• HTML5 фреймворки
• CSS3 фреймворки
• Фреймворки Node.js

Излишне говорить, что эти дизайны адаптируются к любой ситуации, поэтому вы можете избавить себя от головной боли, связанной с необходимостью прорабатывать изгибы и причуды самого макета дизайна, и вместо этого сосредоточиться на заполнении этих ячеек сетки тем контентом, который вам нужен. положить туда. Существует множество разнообразных и разных стилей, которые вы найдете в этих сеточных системах, найдите время, чтобы посетить демонстрационные страницы и, возможно, даже запишите, что вы ищете, чтобы вам было легче найти подходящую структуру. для ваших нужд.

Мертвая простая сетка

Сетки никогда не должны быть сложными, по своей сути они всего лишь HTML-элементы, составляющие общий дизайн, и Владимир Агафонкин - один из разработчиков, разделяющих эту концепцию. Его сеточная структура Dead Simple Grid состоит всего из двухсот байт кода CSS; это такой минимальный объем кода, что ваши страницы даже не заметят, что он там есть. Вы можете разделить сетку, чтобы показать основную область содержимого и гибкую боковую панель, если хотите. Такая сетка подходит для блогов и общих макетов домашней страницы, где предпочтительнее минималистичный дизайн. Адаптивный дизайн интегрирован благодаря медиа-запросам, поэтому сетка будет выглядеть безупречно на любом устройстве, на котором она используется.

Бурбон Чистый

Bourbon - очень успешная библиотека миксинов для препроцессора SASS. Это, конечно, сделало Neat привлекательным выбором для тех, кто уже использует Bourbon и SASS. Neat предоставляет разработчикам доступ к гибкой сеточной системе, которая достаточно быстрая и простая для настройки за считанные минуты, но гибкая до такой степени, что неограниченные изменения и корректировки не станут проблемой.

Grd

Grd - это сеточная система CSS, которая использует Flexbox в качестве внутреннего инструмента для создания гибких и современных адаптивных макетов. Используя Live Demo, вы можете поиграть с настройками и различными настройками дизайна, чтобы увидеть, сможет ли Grd решить вашу проблему интеграции определенного элемента дизайна в существующий рабочий процесс. Нам было легко создавать верхние и нижние колонтитулы и области общего содержимого, используя только раскрывающийся список настроек.

СОСТАВ

Структура, которая также основана на Flexbox, использует декларативные шаблоны синтаксиса (аналогичные тем, что в Angular.js) для определения разделов и параметров макета. Некоторые разработчики жаловались, что окончательная разметка страницы не может быть проверена, но идея состоит в том, что с помощью структуры вы можете создать декларативную сетку, которая не вмешивается в традиционные атрибуты CSS, такие как классы и идентификационные имена.

960 Сетка

Сотни тысяч веб-сайтов использовали систему сеток Натана Смита 960 для создания своих макетов. Это эффективный инструмент для оптимизации рабочего процесса трудолюбивых веб-разработчиков. Благодаря выбору двух разных макетов столбцов (12 и 16 соответственно) разработчики могут быстро создать домашнюю страницу, которая будет поддерживать любой тип динамического и статического ввода. Можно добавить больше столбцов, но вам нужно будет поработать с документацией, чтобы более четко понять использование.

Бессмысленный

Unsemantic - это следующая версия сетки 960, которая обеспечивает полные возможности адаптивного дизайна. С помощью уникальных вытягивающих классов разработчики могут изменять макет создаваемой страницы, что может помочь продвигать и демонстрировать наиболее важный контент в любой момент времени - известная стратегия, помогающая поисковым системам лучше понять назначение каждого элемента контента. Unsemantic также гордится тем, что использует Media Queries, поэтому у опытных разработчиков интерфейсов не будет проблем с настройкой этой сетки для своих нужд.

Простая сетка

Отсюда и название Simple Grid для всех, кто ценит простоту и удобство использования. Макет адаптивный, совместим со смартфонами, планшетами и настольными компьютерами. Другими словами, исполнение вашего проекта без тени сомнения будет на высшем уровне. Он полностью совместим с большими экранами и более высоким разрешением. Кроме того, Simple Grid - это просто сетка без каких-либо дополнительных ресурсов, что делает ее очень легкой. Благодаря удобной структуре из двенадцати столбцов у вас есть свобода создавать макет, который вам больше всего нравится. Вы можете безупречно разделить его на две, три, четыре или шесть колонок.

csswizardry-сетки

С помощью HTML-сетки, такой как csswizardry-grids, вы можете сэкономить время и силы. Это надежный инструмент, который вы можете использовать сколько душе угодно. Он очень удобен и легко структурирован, поэтому веб-разработчики всех уровней могут извлечь из него максимум пользы. На скриншоте выше вы можете взглянуть на все различные варианты, которые поддерживает csswizardry-grids. Вы можете свободно переупорядочивать вещи, чтобы они соответствовали вашим желаниям. Выполняйте свою деятельность, избегая выполнения задач с нуля с помощью csswizardry-grids прямо сейчас и начните с правильного пути.

Глубокая сетка

Свобода, которую предлагает вам Profound Grid, выходит далеко за рамки. Вы можете использовать эту гибкую и расширяемую сетку как для фиксированных, так и для гибких макетов. В итоге будет работать на всех современных устройствах масло плавно из коробки. Вы можете создать точную структуру, которую хотите, изменяя, удаляя или добавляя столбцы по своему вкусу. Вы можете сначала проверить несколько примеров, чтобы увидеть, что возможно с Profound Grid. Более того, с отрицательными полями при вычислении столбцов, Profound Grid гарантирует, что гибкие макеты будут одинаковыми независимо от размера экрана и веб-браузера.

Griddle

Преимущества использования системы сеток огромны, поскольку вы не только экономите время, но и не беспокоитесь о технических деталях. Например, Griddle обеспечивает полную совместимость с популярными устройствами и веб-браузерами. Это означает, что производительность вашего приложения всегда будет первоклассной. С помощью Griddle вы можете воплотить в жизнь все, что угодно, от пропорциональных и вложенных сеток до центрированных и гибридных единиц. Что касается последнего, с некоторыми настройками вы можете объединить фиксированные и плавные блоки в одной впечатляющей сборке. У вас есть контроль над горизонтальным центрированием единиц, и вы даже можете изменить вертикальное выравнивание.

CSS Smart Grid

CSS Smart Grid следует последним тенденциям и правилам для обеспечения совместимости с различными устройствами. Короче говоря, это легкий, отзывчивый и мобильный инструмент, позволяющий создавать с его помощью эпические вещи. Независимо от того, используете ли вы смартфон или большой экран рабочего стола, CSS Smart Grid гарантирует, что макет без проблем работает на обоих. К вашему сведению, даже если кто-то использует обычный телефон для работы в Интернете, ваш проект, основанный на CSS Smart Grid, будет работать так же хорошо - с представлением в одну колонку. На официальном сайте вы также можете быстро узнать, как это сделать, поэтому при использовании инструмента у вас не возникнет проблем.

Gridlex

Gridlex действительно выделяется своим великолепным дизайном и простотой использования. Простота этой структуры сетки на основе Flexbox поразительна, концепция проста - оберните столбцы в сетку и, если необходимо, внесите какие-либо дополнительные корректировки, чтобы ваш окончательный дизайн выглядел неотразимо. Просто взглянув на демонстрацию веб-сайтов, использующих Gridlex, становится очевидным, что это вершина линейной сеточной системы, и вы не будете разочарованы тем, что она может сделать для ваших собственных проектов и рабочего процесса.

Адаптивная сетка

У Responsive Grid System есть много возможностей, идеальное доменное имя, четкое видение и необходимые инструменты, чтобы сделать адаптивный дизайн сетки простым ветерком! Генератор сетки предоставляет простую форму ввода, где вы можете указать количество столбцов, которые вы хотите использовать, и расстояние, которое вы хотели бы видеть между ними ... нажмите "Отправить", и вы получите готовый к работе вывод кода. вашего следующего адаптивного макета сетки. Автор, Грэм, счастлив сделать за вас всю тяжелую работу, если вы того пожелаете, вы можете связаться с ним в нижнем колонтитуле страницы.

По сетке

Разработчики создали Gridly как минимальную систему разметки сетки для поддержки самых современных браузеров. Эта легкая структура помогает разработчикам легко настроить и запустить макет сетки / столбца без особых хлопот. В целом, абсурдно минимальный размер этой библиотеки заставит вас хотеть большего для будущих проектов.

Formstone

Formstone - это не единая управляемая сетка сама по себе, это фактически библиотека для интерфейсных разработчиков, которые нуждаются в настраиваемых компонентах и ​​веб-элементах, составляющих традиционную веб-страницу, с которой вы сталкиваетесь ежедневно. Будучи модульной, адаптивной и автоматизированной библиотекой, Formstone можно использовать не только для масштабирования масштабного проекта веб-сайта, но и для использования самого макета сетки.

Бутстрап

Где был бы Bootstrap сегодня, если бы не его сеточная система, на которой было построено все остальное? Мы все еще с нетерпением ждем появления Bootstrap 4, но пока что… вы не можете не сказать «да» фреймворку, который сумел зарекомендовать себя как один из самых известных интерфейсных фреймворков этого века. Миллионы веб-сайтов работают на функциях Bootstrap, но ни одна из них не была бы возможна, если бы не сетка, интегрированная в ядро ​​Bootstrap.

Фонд

Foundation - еще одна успешная интерфейсная библиотека, которая поддерживает адаптивный дизайн, последняя версия (Foundation 6) предлагает еще больше современных функций и элементов, которые могут помочь разработчикам предоставить своим клиентам невероятно универсальный дизайн. Простые в использовании шаблоны, предоставляемые Foundation, дают вам возможность отдохнуть от всей этой разработки сетки и вместо этого сосредоточиться на том, что важно - на том, что вы собираетесь поместить в эту сетку.

Скелет

Skeleton имеет красивый и естественный дизайн, который заставит вас захотеть большего. Создатели придумали, что Skeleton - лучший выбор для небольших проектов. Кроме того, вы можете использовать его в проектах, где вам не подходит полноценный фреймворк. Skeleton предоставляет вам все необходимое для создания и запуска прототипа веб-сайта; макет сетки, варианты типографики для заголовков и разделов, элементы кнопок для всех ваших потребностей формы и, по сути, настраиваемые формы, так что вы можете сэкономить время на необходимость кодировать свой собственный, красивое добавление списков, таблиц и синтаксиса кода, а также мультимедиа фреймворк запросов, чтобы ваши проекты стали полностью адаптивными!

Адаптивная сетка 2

Responsive Grid System (версия 2) - это мобильная сеточная система, очень крошечная по размеру, но очень эффективная по стилю. Вы можете выбрать из ряда макетов столбцов (24, 16, 12). Вы также можете настроить поля и отступы между столбцами и использовать полифилы для создания звездного макета дизайна.

Адаптивная сетка для вашего следующего проекта

Адаптивная сеточная система для вашего следующего проекта использует те же классы, что и сеточная система 960. Он создан для обслуживания мобильных посетителей в первую очередь и предоставляет шаблон для управления заголовками. Разработчики протестировали его во всех современных браузерах, так что вы в надежных руках. Вы можете использовать это как базовую сетку, которая поможет вам создавать адаптивный веб-дизайн. Это сохранит ваш существующий уровень владения популярной сеткой.

HTML5 шаблон

HTML5 Boilerplate - это надежный шаблонный фреймворк (шаблон) для интерфейсных разработчиков. Это для разработчиков, которые хотят запустить свой проект без хлопот, связанных с более крупными фреймворками, такими как Bootstrap или Foundation.