В последние несколько лет наблюдается рост использования интерфейсных рамок. Эти инструменты, такие как Bootstrap и Foundation, позволяют разработчикам быстро создавать веб-сайты и приложения. Вместо того, чтобы создавать собственные кнопки и навигационные панели, эти фреймворки делают всю тяжелую работу за вас.
Проблема с этими фреймворками заключается в том, что разработчики довольно часто загружают свои огромные таблицы стилей, хотя большинство функций фреймворка использовать не будут. Но разве не было бы замечательно, если бы мы использовали платформу, которая очень мало предполагает нашего дизайна и поощряла более модульную архитектуру?
Представляем inuitcss
inuitcss — основанный на Sass фреймворк, созданный Гарри Робертсом . Прелесть inuitcss в том, что это то, что ты делаешь из этого. Вместо центральной базы кода inuitcss состоит из набора независимых модулей. Вместо включения набора модулей, которые мы никогда не будем использовать, inuitCSS позволяет нам объединить нашу собственную архитектуру.
В отличие от других платформ, inuitcss не предоставляет вам много элементов пользовательского интерфейса. Часто при использовании фреймворка мы берем существующие компоненты и настраиваем их по своему вкусу. Inuitcss отвергает этот подход в пользу того, что вы можете сделать свой собственный выбор дизайна.
Установка inuitcss
Мы можем загрузить и импортировать модули, которые составляют inuitcss вручную, но более простой вариант — использовать Bower или NPM . Bower и npm — менеджеры пакетов, которые управляют зависимостями и рабочими проектами. Поскольку оба они основаны на Node.js, вам нужно сначала установить Node.js.
Мы можем использовать Bower для создания нового проекта со всеми установленными зависимостями intuitcss. Мы также можем использовать его для инициализации существующего проекта.
Установка и использование Bower
После установки Node.js откройте командную строку и введите:
npm install -g bower Это просто, и вы установили Bower. Если у вас есть существующий проект, теперь вы можете использовать Bower для добавления inuitcss. Перейдите в папку вашего проекта и запустите:
bower init
Это создает каталог bower_components . Чтобы вручную импортировать отдельные модули, используйте следующую команду:
bower install --save inuit-(module-name)
Например, чтобы импортировать модуль макета inuitcss, мы бы использовали:
bower install --save inuit-layout
Это установит модуль в каталог bower_components . В качестве альтернативы, мы можем использовать стартовый набор inuitcss, чтобы создать новый проект или добавить его в наш существующий проект.
bower install --save inuit-starter-kit
Это установит основные зависимости для проекта inuitcss вместо того, чтобы вручную устанавливать их по одному.
Настройка и порядок импорта
После настройки стартового комплекта нам нужно будет импортировать компоненты. Порядок импорта имеет решающее значение и должен соблюдаться. Как вы знаете, если мы импортируем компоненты, для которых требуются переменные, которые еще не были импортированы, наш Sass выдаст нам ошибки. В следующем порядке импортируйте следующие файлы из стартового комплекта (или установите следующие модули вручную).
@import "bower_components/inuit-defaults/settings.defaults"; @import "bower_components/inuit-functions/tools.functions"; @import "bower_components/inuit-mixins/tools.mixins"; @import "bower_components/inuit-normalize/generic.normalize"; @import "bower_components/inuit-box-sizing/generic.box-sizing"; @import "bower_components/inuit-page/base.page";
Из-за модульной природы inuitcss важно, чтобы вы собрали вещи в правильном порядке.
Настройки: глобальные переменные, общесайтовые настройки, конфиг
Инструменты: миксины и функции всего сайта
Универсальный: далеко идущие наборы правил
База: не классифицированные элементы HTML
Объекты: объекты, абстракции и шаблоны проектирования
Компоненты: пользовательский интерфейс
Козыри: вспомогательные классы и переопределения
Основная функциональность
Несмотря на то, что inuitcss имеет модульную конструкцию, все еще есть некоторые необходимые модули.
Первый модуль, который требуется, это settings.defaults . Это включает в себя настройки для таких вещей, как font-size и line-height которые будут использоваться в остальных модулях.
Модуль tools.functions содержит вспомогательные математические функции. Эти функции используются для создания вариантов размеров объектов.
Последний обязательный модуль — tools.mixins . У этого есть миксин размера шрифта, который используется в определенных основанных на типе модулях.
Кроме того, inuitcss не имеет много других зависимостей. Если какие-либо модули имеют зависимости, они будут управляться Bower (именно поэтому мы использовали Bower).
Модификация inuitcss
Несмотря на то, что inuitcss полностью настраиваем, мы никогда не должны напрямую редактировать основной код фреймворка. Обычно мы создаем собственный файл переопределения и манипулируем настройками и переменными платформы. Хотя это приемлемо, Гарри предлагает альтернативный способ передачи переменных непосредственно перед импортом файла.
Помните, я упоминал файл settings-defaults с его переменными font-size и line-height . Если бы мы хотели изменить их по умолчанию, мы передали бы эти переменные перед импортом.
$inuit-base-font-size: 12px; $inuit-base-line-height: 18px; @import "bower_components/inuit-defaults/settings.defaults";
Мы можем передать переменные для всех модулей, как это. Мы также можем создать файл переопределения, но если вы сделаете это, убедитесь, что импортировали его первым.
Модули и компоненты
Любые варианты модулей inuitcss по умолчанию отключены. Например , объект кнопки inuitcss имеет различные варианты в зависимости от размера. Они отключены по умолчанию. Включить их так же просто, как включить их перед оператором импорта для модуля.
$inuit-enable-btn--large: true; @import "bower_components/inuit-buttons/objects.buttons";
Одна из основных вещей, которые нужно понимать в inuitcss, заключается в том, что он не предоставляет ничего, кроме некоторых кнопок на пути компонентов пользовательского интерфейса. Гарри оставил отдельные компоненты на ваше усмотрение. Если вы ищете платформу с готовыми компонентами пользовательского интерфейса, тогда inuitcss не для вас.
Вывод
inuitcss — это другой тип фреймворка, который оставляет за вами выбор дизайна. В отличие от большой платформы с множеством правил, которые вы никогда не будете использовать, inuitcss действительно позволяет вам выбирать то, что вы хотите использовать. Фреймворк полезен тем, что он убирается с вашего пути и позволяет вам приступить к работе.
inuitcss не для всех. Как библиотека, она все еще находится в стадии разработки, но общая концепция весьма перспективна и идеальна, когда вам нужен модуль или два, но не нужны раздутые наборы правил, которые предлагают другие платформы.