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

Добрий вечiр!

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

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

!Некоторые школы предпочитают сверхдлинные мечи. Это слабые школы. Они не принимают принципа «рубить врага любыми средствами». Они предпочитают особо длинный меч.

Книга пяти колец, XVII век, Миямото Мусаси

Emmet Hayaku

Emmet-Hayaku

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

Photoshop

CSS Hat

PNG Hat

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

15 иконок в спрайте: (png или base64, что угодно)

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

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

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

Тот Андрей Ситник и использует постпроцессор!

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

• 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 (launchy)

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

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

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

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

Дякую!

!

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

cssing.org.ua

twitter.com/akella