autoclasscss

CSS skeleton generator

AutoclassCSS

Инструмент для формирования каркаса из CSS-селекторов на основании полученного HTML по БЭМ-методологии.

Можно использовать AutoclassCSS онлайн.

Документация на основе JSDoc.

Достаточно подключить один файл.

<script src="autoclasscss.js"></script>

Создание экземпляра без параметров.

var autoclass = new Autoclasscss();

Можно сразу передать HTML, который следует обработать.

var autoclass = new Autoclasscss('<div class"block">...</div>');

Дополнительно, конструктор принимает объект опций.

var autoclass = new Autoclasscss('<div class"block">...</div>', {
    brace: 'newline',
    ...
    indent: ['tabs', 2]
});

Так же, конструктор способен принимать только опции, а обрабатываемый HTML можно указать позже.

var autoclass = new Autoclasscss({
    brace: 'newline',
    ...
    indent: ['tabs', 2]
}).set('<div class"block">...</div>');

Для получения результата, достаточно вызвать метод get().

var css = new Autoclasscss('<div class"block">...</div>').get();

Опции можно указать в виде объекта при создании экземпляра.

new Autoclasscss({
    brace: 'default',
    flat: false,
    ignore: false,
    indent: ['spaces', 4],
    inner: true,
    line: false,
    tag: false
});

Так же, опции можно изменять с помощью одноимённых методов.

new Autoclasscss()
    .brace('default')
    .flat(false)
    .ignore(false)
    .indent('spaces', 4)
    .inner(true)
    .line(false)
    .tag(false);

Способ отображения открывающей скобки.

Значение по умолчанию: 'default'.

Принимает одно из следующих значений:

  • 'default' — через пробел после селектора
  • 'newline' — на новой строке под селектором

Установление плоского или вложенного списка селекторов.

Значение по умолчанию: true.

Принимает true или false.

Указание игнорируемых классов.

Значение по умолчанию: false.

Принимает параметр в разном виде:

  • 'class' — добавить игнорируемый класс
  • ['class1', 'class2'] — добавить несколько игнорируемых классов
  • /i\-.+/ — игнорировать классы по регулярному выражению
  • false — очистить список игнорируемых классов

Настройка отступов.

Значение по умолчанию: ['spaces', 4].

Принимает один или два аргумента:

  1. Обязательный, 'tabs' или 'spaces' — символ отступа
  2. 1 — количество символов в одном отступе

Добавлять или не добавлять отступы внутри фигурных скобок.

Значение по умолчанию: true.

Принимает true или false.

Отбивка селекторов пустой строкой.

Значение по умолчанию: false.

Принимает один или два аргумента:

  1. Обязательный, true или false — отбивать или не отбивать
  2. 1 — количество строк для отбива

Указание тега в селекторе.

Значение по умолчанию: false.

Принимает параметр в разном виде:

  • true или false — указывать или не указывать все теги
  • 'div' — указывать тег div
  • ['ul', 'li'] — указывать теги ul и li

Устанавливает HTML-разметку к обработке.

В качестве параметра принимает строку с HTML-разметкой.

Возвращает CSS-каркас на основе заданной HTML-разметки.

Установить из NPM.

npm install autoclasscss

Получить CSS-каркас из HTML-файла.

./bin/autoclasscss index.html

Сформировать CSS-каркас с заданными опциями и сохранить результат в файл. Файл опций удобно хранить в JSON-формате. Файл для сохранения результата создастся автоматически.

./bin/autoclasscss -o options.json -s save.css index.html

Для разработки требуется node.js и npm. В проекте используется пакетный менеджер bower.

Клиентские тесты написаны на Jasmine, для прогона всех тестов, надо открыть страницу test/test.html.

Установить зависимости.

make install

Запустить тесты CLI. Написаны на Mocha

make test

Сгенерировать документация на основе JSDoc.

make doc

Обновить gh-pages.

make gh-pages