Создание социконок с помощью Gulp, stylus, bower, font-awesome, yeoman

Создание рабочей папки проекта с помощью Yeoman

Создадим папку с названием myicons и воспользуемся генератором Tapp, который создаст все директории с пакетами Stylus, Jade, Gulp, Browserify, Bower и остальными.

При успешном запуске Yeoman у вас должна получится такая картинка:

После выполнения этих команд у вас получится приблизительно такая структура:

Запустим Gulp командой:

gulp serve

Остальные команды вы можете просмотреть в файле .gulpfile.

При успешном запуске у вас должна получится следующая картинка:

кроме этого должно открыться окно браузера по-умолчанию по адресу http://localhost:9000, которая будет иметь следующий вид:

Перейдём к нашему главному шаблону app/index.jade и вставим туда код для социконок, у меня получился такой:

Пару слов о том, как работает gulp с jade шаблоном в нашем случае при запуске команды gulp serve, если совсем упрощённо:

1. Он наблюдает за изменениями файлов jade в папке app
2. Конвертирует все файлы .jade в .html, сжимает и передаёт их в папку dist

Установка и подключение Font-awesome

Tapp генератор установит также и Bower — установщик пакетов. Воспользуемся им и установим иконочный шрифт Font Awesome:

bower install font-awesome

Укажем стили в index.jade:

После этого в браузере у вас должны отобразится иконки:

Создание стилей с помощью Stylus

В комплекте у нас шёл и Stylus, цвета для социконок я брал с Brandcolors. Давайте воспользуемся мощью Stylus, создадим пару функций и придадим стили нашему коду, сделанному по BEM-методологии:

Для красоты я добавил transition свойство при наведении и уходе с иконки, поэтому получился такой код.

В результате этого должны получится вот такие иконки:

Код для вставки в ваш сайт можете найти в dist/index.html и dist/styles/main.css

Я создал на Github репозиторий с этим кодом, поэтому можете сразу склонировать себе и запустить проект:

Демо можете увидеть внизу на этом сайте. Как обычно - не стесняйтесь задавать вопросы и давать замечания в комментариях.