Верстка и другие развлеченияЮрий Артюх, SEConf, 2014

Привет!

• Меня зовут Юра • Я верстаю сайты

• Давно

Зачем верстать?

проще всего начать

получать удовольствие

можно показать девушке

Написал код

Сверстал сайт

работать можно где-угодно

как верстаю я

Постоянно

• 5-6 проектов одновременно

• 10 часов в день

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

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

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

Emmet Hayaku

Emmet-Hayaku

•

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

Photoshop

CSS Hat

PNG Hat

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

Зачем они

• Чтобы работать быстрее

• Так делают все модные пацаны (и девчонки, ок)

Переменные

Вложенность

Свои функции

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

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

icons.png

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

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

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

Всякие модные слова

• Angular

• Backbone

• React

• Responsive Web Design

• SASS/LESS/Stylus

• Node.js

Коммерческая верстка или как срубить бабла

• Почитать про все что я рассказал пару месяцев (спросить меня что читать)

• Сделать десяток любых сайтов используя знания

• Profit

занимайтесь только тем что вам интересно

занимайтесь только тем что вам интересно!

занимайтесь только тем что вам интересно!!

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

Идите и живите жизнь

Спасибо! Спросите же хоть что-то!

!

Юрий Артюх cssing.org.ua

facebook.com/akella

twitter.com/akella