Автор Сэмюэля Доусона для учебников по сценариям
Сравнение Сьюзи и Bootstrap. Сравнение Susy и Bootstrap. С момента создания макетов системы сетки они широко используются в дизайне веб-сайтов для упорядочивания графических элементов, таких как изображения и текст. С ростом популярности макетов сетки сегодня на рынке доступно множество сеточных структур. Один из самых популярных фреймворков — Bootstrap, предлагает великолепные функции и функции, которые сделали веб-дизайн легким. Он поддерживает как фиксированную сетку, так и адаптивную сетку для отображения содержимого. Susy — это еще одна структура, которая дополняет построение сетки.
Давайте рассмотрим две основы Bootstrap и Susy и поймем разницу между ними.
Бутстрап — Предисловие
Bootstrap — это полноценный фреймворк, который включает в себя очень изобретательные инструменты. Он не только предлагает сеточную систему, но также облегчает стилизацию веб-элементов, таких как значки, навигация, оповещения и т. Д., По желанию. Кроме того, он также включает в себя плагины jQuery, которые могут быть реализованы для проектирования даже сложных элементов пользовательского интерфейса, таких как карусели.
Сьюзи — Предисловие
Традиционная сеточная система жесткая по своей природе и не подходит в эпоху гибкой разработки и большой адаптации. Фреймворк Susy предлагает инструменты для поддержки асимметричной грид-системы, которую пользователи могут умело использовать, чтобы адаптировать грид согласно своим потребностям и создать желаемый макет с легкостью.
Таким образом, среда Susy дает веб-дизайнерам отличный контроль над эффективностью создания персонализированной сетки, отвечающей требованиям их сайтов.
В то время как Susy представляет собой асимметричную сеточную инфраструктуру, Bootstrap представляет собой полную инфраструктуру, которая поддерживает весь дизайн веб-сайта. Таким образом, принципиально, сравнивать их нелогично. Тем не менее, будет интересно углубиться в эти рамки и определить, чем система сетки начальной загрузки отличается от Susy.
Сравнение Сьюзи и Bootstrap Grid System
Чтобы сравнить эти две структуры сетки, я приму во внимание несколько аспектов проектирования сетки. Давайте начнем.
1. Поддержка нескольких точек останова
С помощью системы сетки Bootstrap вы можете обрабатывать до четырех точек останова для вашей сетки, и они записаны в классах Bootstrap.
Давайте создадим дизайн сетки для меньшего видового экрана (который меньше, чем 991 пиксель) с половиной экрана, отображающей .content, а оставшаяся половина предназначена для .sidebar. Для этого дизайна HTML будет включать несколько аргументов точки останова.
Фрагмент кода HTML при использовании системы сетки Bootstrap:
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-md-9 content"><h2>Content</h2></div>
<div class="col-sm-4 col-md-3 sidebar"><h2>Sidebar</h2></div>
</div>
</div>
Хотя для создания такого же дизайна в Susy нам нужно внести соответствующие изменения в файл CSS, а не файл HTML. Следовательно, при работе со средой Susy ничего не нужно добавлять в файл HTML.
Фрагмент кода HTML при использовании Susy:
<div class="wrap">
<div class="content"><h2>Content</h2></div>
<div class="sidebar"><h2>Sidebar</h2></div>
</div>
Тем не менее, точки останова должны быть включены в файл Sass. Здесь вы можете начать с мобильного подхода. Для этого вам просто нужно выделить половину экрана как .content, так и .sidebar. И, когда размер экрана увеличивается на 980 пикселей, вы можете сделать .content занимать девять столбцов, а .sidebar — три столбца.
.content {
@include span(12 of 12);
@media (min-width: 768px) {
@include span(8 of 12);
}
@media (min-width: 980px) {
@include span(9 of 12);
}
}
.sidebar {
@include span(12 of 12);
@media (min-width: 768px) {
@include span(4 of 12);
}
@media (min-width: 980px) {
@include span(3 of 12);
}
}
В отличие от Bootstrap, который требует большой точности при работе с точками останова (указанными через специфические аббревиатуры) в классах HTML, среда Susy не имеет ничего общего с HTML для определения точек останова, как они определены в файле Sass. Таким образом, только таблица стилей требует тщательного управления. Таким образом, Susy обеспечивает безопасное разделение HTML и CSS, что имеет первостепенное значение для любого последующего веб-сайта.
2. Язык
Крайне важно иметь в руках избранные языки препроцессора фреймворка, поскольку это помогает оптимизировать рабочий процесс и с легкостью выполнить задачу.
Если мы рассмотрим последнюю версию Susy, то есть Susy 2.2.3, она работает с Sass 3.3 или более поздними версиями. Это потому, что для этого нужно реализовать карты Sass. И это не поддерживает Меньше.
Напротив, Bootstrap поддерживает и Sass, и Less. Таким образом, вы можете легко работать с Bootstrap, не ограничиваясь языком препроцессора.
3. Поддержка настройки
Сьюзи предлагает дизайнерам большую гибкость, позволяя им настраивать сетку желаемым образом. Хотите ли вы персонализировать количество столбцов, размер каждого столбца, размер желоба, количество точек останова, размер точек останова и т. Д.
Принимая во внимание, что система сетки Bootstrap не так гибка, как Сьюзи. Хотя он предлагает настройку сетки, он также использует определенные ограничения. С платформой Bootstrap вы можете изменить количество столбцов, размер 4 контрольных точек и размер желоба. И эти изменения могут быть сделаны через вкладку настройки или путем изменения переменных с желаемыми значениями в парциальном _variables вашего препроцессора (Меньше или Sass, в зависимости от того, что вы используете).
4. Управление количеством столбцов
Хотя в Susy есть настройки по умолчанию, их можно соответствующим образом изменить, чтобы создать необходимую сетку. Тем не менее, его настройки по умолчанию идеально подходят для начала работы, но вам все равно нужно обновить три из его свойств, включая столбцы, контейнер и глобальный размер поля, в карте $ susy.
Фрагмент кода CSS для Susy — для создания сетки:
@import "susy"
/* Changing the default settings*/
$susy: (
/* Assigning value to the column property */
columns: 12,
/* Assigning max-width for the container */
container: 980,
/* for using the border-box */
global-box-sizing: border-box
);
/* To make border-box property*/
@include border-box-sizing;
.wrap {
@include container;
}
.content {
@include span(9 of 12);
}
.sidebar {
@include span(3 of 12);
}
Обновив свойства подходящими значениями и определив содержимое и боковую панель в виде столбцов (в отличие от системы Bootstrap Grid), Susy автоматически рассчитает соответствующие проценты и пиксели, необходимые для определенного макета. Таким образом, вам не нужно тратить время на выполнение этих расчетов самостоятельно.
Более того, вы не обязаны придерживаться строгих правил при работе с Susy при увеличении или уменьшении количества столбцов. Напротив, не так просто изменить количество столбцов в Grid-системе Bootstrap, не влияя на остальную часть сетки.
Вот некоторые из различий между Bootstrap Grid System и Susy. С учетом этих различий можно сделать вывод, что, хотя Susy не так популярен, как среда Bootstrap, но он предлагает большую гибкость и замечательную производительность веб-дизайнерам для создания макетов сетки. Однако есть и определенные ограничения, такие как язык препроцессора, которые нельзя игнорировать. В конце концов, это полностью индивидуальный выбор — выбрать Сьюзи или Bootstrap.