Hocus-Pocus — это Sass-фреймворк без дизайна, над которым я работаю в свободное время. Основная идея Hocus-Pocus — сделать универсальный и легкий стартовый набор таблиц стилей, который фокусируется на наиболее распространенных функциях. В этой статье я расскажу, почему я решил создать свою собственную среду Sass, и подход, который я использовал при этом.
Почему я начал работать над Sass Framework?
Короче говоря, я бы сказал, что начал работать над фреймворком Sass, потому что хотел сэкономить время при запуске новых веб-проектов. Я заметил, что даже когда я работаю над действительно нестандартными проектами, я всегда добавляю один и тот же набор инструментов, включаю одни и те же стандартные пакеты и реализую аналогичную коллекцию базовых компонентов CSS.
Тогда возникает второй вопрос: почему вы не используете существующую, хорошо известную и проверенную среду, такую как Bootstrap?
Мой ответ сводится к предпочтениям и моему подходу к CSS. Я думаю, что библиотеки, такие как Bootstrap или Foundation, великолепны и сильно изменили отношение людей к CSS. Однако в большинстве случаев в рамках моей собственной работы над проектом мне просто не нужны все эти функции и компоненты пользовательского интерфейса, такие как индикаторы выполнения или хлебные крошки. Вместо этого я предпочитаю иметь что-то более универсальное. Я предпочитаю что-то, что я могу использовать в любом проекте, без необходимости переопределять рамки CSS классов.
По указанным выше причинам в Hocus-Pocus вы можете изменять внешний вид каждого компонента с помощью переменных. Вы даже можете отключить некоторые функции или определить диапазон помощников. Недостатком этого подхода является то, что я не могу предоставить скомпилированную CSS-версию фреймворка, поскольку нет разумного способа использовать Hocus-Pocus без возможности обновления переменных.
Предварительные требования и принципы
Установка
Каркас доступен и прост в установке благодаря двум различным менеджерам пакетов: Bower и npm. Для работы требуется Sass (минимально необходимая версия — 3.3.0) и Autoprefixer . Autoprefixer используется для добавления необходимых префиксов вендора в окончательный скомпилированный файл CSS. В настоящее время я не слишком беспокоюсь о совместимости между различными браузерами, так как лично я считаю, что авторефикса достаточно. Кроме того, я использую sass linter ( scss-lint ), но это не требуется для запуска Hocus-Pocus и правильной работы. Hocus-Pocus будет работать без него.
Соглашение об именовании
Следующий принцип важен для каждой структуры — соглашение об именах. Я предпочитаю обычные имена классов в стиле тире без БЭМ. Я не буду жаловаться, если вы являетесь поклонником BEM и предпочитаете использовать соглашение об именах BEM, если оно работает для вас — продолжайте. С моей точки зрения, БЭМ не решает все проблемы ответственности в CSS. Я также обнаружил, что при использовании БЭМ я подхожу к своему CSS, используя меньше элементов уровня класса. Добавить новый элемент в существующий блок слишком просто.
Документация
И последнее, но не менее важное: я уделяю пристальное внимание написанию документации и обновлению журнала изменений Hocus-Pocus. Документация не должна быть идеальной, особенно в начале, но я всегда стараюсь найти время, чтобы ее улучшить. Это помогает новичкам узнать, как работает инструмент, и позволяет мне отслеживать особенности фреймворка.
Особенности фреймворка
Следующие особенности фреймворка являются наиболее характерными для Hocus-Pocus, на мой взгляд, и дают лучший обзор того, чем они на самом деле являются.
Большинство базовых классов основаны на существующих проектах, над которыми я работал в прошлом. Вы также можете заметить некоторые сходства с другими CSS-фреймворками, которые вдохновили меня, особенно мои любимые — Primer и InuitCSS .
Особенности фреймворка в Hocus-Pocus включают в себя:
- Нормализовать с некоторыми улучшениями, такими как глобальный
box-sizingborder-box - Новая цветовая палитра по умолчанию на основе clrs.cc.
- Текучая сетка на основе flexbox с помощниками ширины, которые используют дроби в качестве имен классов (
.1/2.1/3 - Широкая поддержка адаптивного веб-дизайна. В качестве предпочтительного варианта вы можете выбрать «сначала мобильный» или «сначала рабочий стол». Вы также можете определить точки останова для каждого, и каждый из них получает свой собственный набор помощников для интервалов, сетки, видимости и отдельного миксина Sass.
Например:
$rwd-type: desktop-first;
$rwd-map: (
'mobile': 680px
);
$spacing-map: (
'double': double($spacing-unit)
);
Затем в скомпилированном CSS вы получите доступ к таким классам, как .mobile-1/2.mobile-hidden.mobile-padding-double
- Общие стили по умолчанию для текстовых элементов с вертикальным ритмом на основе Gridlover .
- Дополнительные модификаторы для других элементов HTML, таких как встроенный список, список меню, изображение круга или таблица зебры.
- Различные типы кнопок и три варианта форм: встроенные, сложенные и горизонтальные.
- Основные компоненты пользовательского интерфейса, такие как медиа-объект, блок-объект, панель навигации, элемент hero для целевых страниц и липкий нижний колонтитул. Ничего больше.
Будущие надежды на Hocus-Pocus
Моя цель — сделать Hocus-Pocus идеальным стартовым комплектом Sass, независимо от сложности ваших проектов. Таким образом, вы можете сосредоточиться на написании компонентов пользовательского интерфейса проекта и определении вашей темы.
Я не планирую реализовывать какие-либо важные новые функции. Я думаю, что включенные функции представляют собой разумное количество функций и, вероятно, будут последними. Я, вероятно, улучшу синтаксис для некоторых компонентов или изменю отдельные имена классов, но я не прогнозирую каких-либо нарушений совместимости по сравнению с текущей версией. На данный момент я более привержен исправлению ошибок, возникающих по мере того, как все больше людей пробуют Hocus-Pocus.
Если вы думаете, что фреймворк Hocus-Pocus может быть полезен для вас в будущем проекте, вы можете найти полную документацию на hocus-pocus.io . Код Hocus-Pocus имеет открытый исходный код и доступен на GitHub . Я ценю любые комментарии, отзывы и информацию о потенциальных проблемах.