БЭМ (BEM) от Яндекс

26 сентября 2016, 16:21

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

Установка

Минимальные требования

Node.js 0.10+;
Git Bash — для пользователей операционной системы Windows.

Сделайте локальную копию project-stub

git clone https://github.com/bem/project-stub.git --depth 1 start-project
cd start-project
npm install

Важно: Не используйте права суперпользователя (root) при установке npm- и bower-зависимостей.
bower-зависимости ставятся при выполнении npm postinstall в папку libs.

Запустите

npm start

Проверить работу по адресу: http://localhost:8080/desktop.bundles/index/index.html

Должна открыться страница с примерами блоков библиотеки.

Пошаговая инструкция: https://ru.bem.info/platform/tutorials/quick-start-static/

Презентация

bem-xjst — шаблонизатор для тех, кто ведёт веб-разработку в рамках БЭМ-методологии.

Шаблонизатор содержит два движка:
BEMHTML — для преобразования BEMJSON в HTML.
BEMTREE — для преобразования BEMJSON с данными в BEMJSON с БЭМ-деревом для последующего преобразования с помощью BEMHTML.

Как писать шаблоны на оф. сайте: https://ru.bem.info/platform/bem-xjst/

нет комментариев

Онлайн редакторы кода HTML + CSS + JS

26 октября 2015, 16:00

Главное преимущество редакторов онлайн, это просмотр готового варианта в реальном времени.
После создания аккаунта, Вы можете зайти, посмотреть код и отредакторовать его, с любого места, где есть интернет.

Итак, список редакторов:
http://www.cssdesk.com/ — самый старый редактор, включает в себя html + css без js.
http://cssdeck.com/ — полноценный редактор с возможностью подключить разные библиотеки
http://jsbin.com/ — полноценный редактор, по сути похожий функционал, что и предыдущего редактора
http://jsfiddle.net/ — аналог предыдущим редакторам, одно основное отличие это дизайн.
http://codepen.io/ — еще один современный редактор.
http://rendera.herokuapp.com/ — еще один, хороший редактор для обучения, потому что, одна из вкладок это примеры, что сразу можно вставить и посмотреть код.
http://plnkr.co/ — и еще один.

Выбираете на свой вкус.

css editor HTML javascript js online Онлайн редактор кода

нет комментариев