Доброго дня, друзi!

Как верстать сайты быстрее чем их рисуют

Юрий Артюх

Текстовый редактор

Emmet Hayaku

Emmet-Hayaku

•

https://gist.github.com/akella/9757676

Photoshop

CSS Hat

PNG Hat

Препроцессоры

На самом деле:

+s(bigorel) - миксин

icons.png

15 иконок в спрайте:

Наследование

Чем это компилировать

Кто не использует препроцессор

тот…

github.com/akella/sass

Методология верстки

• БЭМ

• MCSS

• UBERCSS

• PonyCSS

• WTFCSS

• MLP:FIM

плевать какая лишь бы она была

Полезный Grunt

Что там есть

• Автоматическое тестирование

• Компиляция

• Запуск чего угодно

• Автоматизация всех задач

HTML инклуды https://github.com/alanshaw/grunt-include-replace

Сохранять только в SVG PNG автоматически https://github.com/filamentgroup/grunticon

Компилировать только изменившееся

https://github.com/tschaub/grunt-newer

Вебсервер в любой папке

python -m SimpleHTTPServer

Alfred

Если вы не автоматизируете

Вы работаете больше чем надо

Тратьте меньше времени Делайте больше работы

Получайте удовольствие от процесса Идите и живите жизнь

Дякую! Запитання?!

Юрiй Артюх coderiver.com.ua

cssing.org.ua

twitter.com/akella

-20%

bit.ly/csshat-discountbit.ly/pnghat-discount