Самый первый основной выпуск Semantic UI теперь официально. С тех пор, как я впервые обнаружил этот замечательный фреймворк — почти год назад — я внимательно наблюдал за ним и могу сказать, что очень доволен его текущим состоянием с точки зрения структуры, внешнего вида, функциональности и возможностей настройки.
Следует упомянуть о многих новых интересных функциях и возможностях, но прежде чем мы рассмотрим их, давайте посмотрим, что отличает Semantic от других аналогичных сред и почему он называется «Semantic».
О структуре семантического интерфейса
Как следует из названия, главная цель Semantic UI — быть значимым . Есть несколько вещей, которые помогают с этой целью. Все компоненты Semantic называются определениями пользовательского интерфейса и делятся на 5 различных типов: элементы, коллекции, представления, модули и поведения (подробнее об этом см. В этой статье ).
Такое разделение делает структуру намного более понятной, упорядоченной и простой в работе по сравнению с тем, как другие структуры группируют свои компоненты. Кроме того, все соглашения об именах для CSS-классов Semantic построены на принципах естественных языков для описания элементов — множественности, времени и порядка слов — что делает ваш код совершенно понятным.
Новые функции и компоненты
Первый основной выпуск Semantic UI, версия 1.0, содержит много новых функций и множество улучшений. Также произошли дальнейшие улучшения, приведшие к текущей версии 1.2 . Посмотрим, что это.
Новые инструменты сборки
В этой версии Grunt заменен на Gulp . Итак, чтобы использовать фреймворк в полную силу, вам нужно установить Node.js и Gulp. Это в основном справедливо, когда вы настраиваете пользовательский интерфейс вашего сайта, а также в процессе создания / редактирования темы.
Новые определения пользовательского интерфейса
Semantic предлагает две новые базовые компоненты: Site и Reset . Сайт содержит все глобальные переменные по умолчанию, используемые для настройки общего внешнего вида вашего сайта. Сброс используется для устранения аберраций в браузерах по умолчанию.
Новые элементы — это Flag , List и Rail . Флаг обеспечивает значки с флагами страны. Список используется для группировки связанных материалов. Rail — это своего рода боковая панель; он показывает дополнительный контент как сторону основного вида веб-сайта.
Новые представления — это Реклама , Карта и Статистика . Реклама используется для отображения стороннего рекламного контента. Карта используется для отображения фрагмента контента, напоминающего игровую карту. Статистика используется, чтобы подчеркнуть текущую стоимость атрибута, например, количество людей, имеющих на своем счету более миллиона долларов.
Новые модули — это Nag , Sticky и Video . Nag используется для отображения важного сообщения, которое сохраняется до тех пор, пока пользователь не отклонит его. Sticky помогает закрепить часть содержимого или определенный компонент, например панель навигации, в окне просмотра браузера при прокрутке страницы. Видео позволяет отображать видеофайлы с YouTube и Vimeo.
Новые ресурсы документации
Помимо подробной документации по каждому компоненту, в фреймворке есть новый раздел под названием Kitchen Sink, в котором представлены все элементы интерфейса.
Но еще важнее то, что теперь Semantic предлагает отдельный веб-сайт, посвященный изучению фреймворка. Хотя стандартная документация на основном веб-сайте объясняет, как можно использовать различные компоненты, они не дают вам рекомендаций по настройке и настройке вашего пользовательского интерфейса в целом. Новый веб-сайт выполняет эту роль, показывая вам, как начать работу с фреймворком, как настроить его внешний вид по умолчанию и как создавать темы для полного изменения внешнего вида вашего веб-сайта.
Сделайте ваш сайт выделиться
Одна из самых больших проблем с готовыми к использованию фреймворками заключается в том, что зачастую наши сайты выглядят довольно узнаваемо. Например, люди всего за несколько секунд скажут: «Эй, я видел это раньше — держу пари, что этот сайт создан с помощью Bootstrap!»
Для наших веб-сайтов важно быть уникальными, но для того, чтобы они выделялись, требуется дополнительная работа и усилия. К счастью, благодаря новой системе настройки Semantic эта задача стала намного проще. Теперь Semantic использует механизм наследования, похожий на файлы настроек Sublime Text , для изменения переменных Less . В Sublime Text пользовательские настройки помещаются в отдельный файл, который переопределяет файл настроек по умолчанию . Этот вид разделения защищает настройки по умолчанию от изменения, что сводит к минимуму риск нарушения функциональности приложения и сохраняет настройки пользователя неизменными при обновлении / обновлении приложения. Чтобы увидеть, как эта логика применяется в Semantic, взгляните на их руководство по темам .
Короче говоря, с более чем 50 компонентами пользовательского интерфейса, более чем 3000 переменными Less и 3 уровнями наследования переменных, Semantic дает вам полную свободу изменять дизайн вашего сайта любым возможным способом.
Теперь Semantic поставляется с несколькими готовыми темами, предназначенными для того, чтобы вы могли быстро начать работу с фреймворком. И в разработке находится отдельный сайт, посвященный сторонним темам. Он будет предоставлять упакованные темы, которые можно скачать и распространять в Интернете.
Почему стоит выбрать семантический интерфейс?
Шумиха вокруг Semantic велика, но почему вы должны выбирать Semantic по сравнению с другими? Ну, есть несколько веских причин:
- Semantic — это современный фреймворк, предлагающий практически все, что вам нужно для создания современных веб-сайтов. При таком количестве компонентов необходимость в сторонних надстройках минимальна.
- Семантика находится в стадии активного развития. Функции и функциональность постоянно улучшаются и расширяются.
- Семантика удобна для дизайнеров. Соглашения об именах на естественном языке, используемые фреймворком, без сокращений и сокращений, понятны всем.
- Структура, разделение и именование компонентов Semantic намного более значимы и упорядочены, чем в других средах.
- Semantic предлагает мощную и гибкую систему настройки. Если вы хотите настроить свой пользовательский интерфейс или полностью изменить внешний вид вашего сайта, Semantic дает вам возможность сделать это.
Есть ли недостатки в выборе семантики?
Мне очень нравится Semantic, но в духе честной игры я должен упомянуть некоторые аспекты, которые я считаю слабыми:
- Несмотря на растущую популярность Semantic, фреймворк недостаточно тестируется на реальных веб-сайтах. Я не знаю многих сайтов, которые его используют (два примера — Quirky и New Republic ). Это не означает, что мы не можем успешно использовать его в реальных проектах; это просто означает, что у нас нет большого количества доказательств того, насколько это эффективно и надежно в реальных условиях.
- Семантика — это своего рода сложная структура, и новички могут немного потрудиться, чтобы привыкнуть работать с ней. Это действительно легко изучить и использовать, но может потребоваться время, чтобы ориентироваться с его инфраструктурой.
- Там нет GUI настройщик для изменения переменных. С таким количеством переменных, размещенных в разных файлах, было бы здорово, если бы мы могли изменить их более простым способом. Отличным примером этого является UIkit Customizer . Я признаю, что создание такого рода настройщика не легкая работа (особенно с 3000+ переменными Semantic и 3 уровнями наследования), но если они предоставят один в будущем выпуске, это будет просто потрясающе.
Резюме
Как видите, Semantic — это современный, привлекательный, полнофункциональный и простой в настройке фреймворк. Фактически, это была одна из самых популярных CSS-фреймворков в 2014 году .
Его можно использовать в самых разных проектах, причем во многих из них даже без необходимости использования сторонних продуктов. Несмотря на это, не так много известных проектов, использующих Semantic. Итак, если у вас есть некоторый опыт работы с фреймворком и вы хотите показать нам что-то построенное с его помощью, пожалуйста, поделитесь своими мыслями в комментариях.