Перед прочтением. Этому блогу больше года. После проверки этой статьи я обнаружил, что информация может быть устаревшей и просто неактуальной в настоящее время. Некоторые ссылки также могут быть 404.

Эта статья предназначена для начинающих интерфейсных разработчиков.

Часто при создании веб-сайтов Front-end разработчик сталкивается с самой распространенной проблемой - выбором сеток. В этой статье я сравню различные сетки, которые я использовал в прошлом, и ту, которую предпочитаю использовать сейчас.

Выбор чего-либо конкретного во многом зависит от того, что вы строите. Если это такой веб-сайт, как unsplash.com или cerisal.com, то ваш очевидный выбор, возможно, выбрать что-нибудь, наиболее популярное в наши дни: Кладка . Или Bootstrap. Хотя оба они поистине шедевры, они могут не подходить для всех требований.

Использование пользовательских сеток

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

Использование CSS-фреймворков

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

Но я не совсем фанат Bootstrap, и мне не стыдно признаться в этом, помимо того факта, что он чертовски популярен. И все причины упакованы в эту маленькую веб-страницу:

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

Говоря о овцах, я тоже не использую Foundation. Я еще даже не пробовал. Foundation содержит слишком много предварительно стилизованных компонентов, таких как кнопки, раскрывающиеся списки, аккордеоны и тому подобное. Просто взглянув на страницу загрузки, вы поймете, о чем я говорю. И в этом проблема, дамы и господа. Ну, по крайней мере, для меня это так. Я всегда предпочитаю фреймворк, основанный на минималистичном подходе; тот, который большую часть времени держит его подальше от бизнеса и дает вам свободу создавать свои собственные вещи. Это рождает оригинальность, качество, которое действительно выделяет вас как Front-end разработчика и даже как дизайнера в этом отношении.

Именно поэтому я использую Скелет. Он очень легкий, я думаю, сейчас около 11 КБ. Да, многого не хватает. Но это то, за что мне это нравится, и я уже объяснил почему. Минимализм. Подобные рамки побуждают вас заниматься своим делом.

Впрочем, я тоже не фанат сеток в Skeleton. Вот почему я использую индивидуализированную версию Skeleton для своих проектов. По сути, я удалил сетку из файла theskeleton.css и добавил сетки из MaterializeCSS, другого фреймворка CSS, который можно использовать для включения Материалов Google. Дизайн на вашем сайте.

Моя библиотека CSS Maskeleton (сетки MaterializeCSS + Skeleton) размещена здесь, на Github Gist, если вы хотите ее попробовать.

Забудьте о материальном дизайне, MaterializeCSS содержит чертовски классную систему сеток. Это просто, но настолько функционально, что вы сразу влюбитесь в него. Я предлагаю попробовать один раз, прежде чем вы сделаете окончательный выбор.

Я также хотел бы добавить здесь, что хорошее понимание Bootstrap или Foundation является важным навыком для Front-end разработчика. Могут быть сценарии, в которых вам может потребоваться использовать Bootstrap. Причина, по которой я настаиваю, чтобы вы потратили некоторое время на эти фреймворки, заключается в их популярности. Вы не можете отрицать числа.

Использование библиотек сетки JavaScript

Это еще одна категория для сеток, где у вас есть фиксированное пространство для заполнения предметами. Неважно, имеют ли все предметы одинаковый размер или нет. Здесь мы используем библиотеки сеток JavaScript, или, как я люблю их называть, «автоматизированные сетки». Автоматизировано, потому что эти сеточные системы вычисляют пустое пространство, а затем грамотно размещают в нем элементы, поэтому макет выглядит как кирпичная стена:

Самым популярным примером такой системы сеток является Масонство Дэвида Десандро. Дэвид также создал Изотоп, который является продвинутой формой масонства. Оба основаны на JavaScript и используют его для упорядочивания элементов сетки. Этот подход, основанный на JavaScript, требует больших ресурсов. На устройствах с низким ОЗУ сайты, использующие Masonry, часто замедляют работу всего браузера. Я знаю это, потому что использовал Masonry на ноутбуке с процессором Pentium B940 и 2 ГБ оперативной памяти. Так что это проверено и проверено.

Альтернативой является использование подхода на основе CSS, например Salvattore. Именно это я использовал на веб-сайте Cerisal.com, посвященном фотографиям. Salvattore быстрее, чем Masonry, и работает так же хорошо. Причина в том, что Salvattore настраивается исключительно в вашем CSS. Он не требует инициализации JavaScript (или jQuery) и также работает с динамическим контентом.

Заключение

Выбор сетки - это то, что нельзя игнорировать на начальном этапе Front-end разработки. Это базовый и простой навык, который необходимо освоить, потому что в будущем вы можете иметь дело с огромным количеством данных и информации и можете подумать:

"О, парень! Как, черт возьми, мне все это изящно устроить? "

Ответом будет сетка. Представления сетки будут время от времени встречаться на вашем пути во Front-end Development. Так что сделайте свой выбор с умом и попробуйте отработать разные макеты - от листа бумаги до браузера. Попробуйте разные библиотеки и фреймворки. И придерживайтесь того, что вам нравится. Со временем вы станете более изобретательными с ними и сможете создавать потрясающие веб-сайты в кратчайшие сроки.

Этот пост изначально был размещен в моем личном блоге Ken.

Исходная статья: https://preeteshjain.com/ken/choose-better-grids

Статьи в моем профиле Medium добавляются через несколько дней после их публикации на Ken. Чтобы быть в курсе моих статей, добавьте Кена в закладки!

Если у вас есть предложения, оставляйте их в комментариях. Буду признателен за ваши конструктивные замечания.