Сучасні підходи у верстці

пам-пам

10 рецептов лазаньи

Юрий Артюх

Современные подходы в верстке

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

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

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

Emmet Hayaku

Emmet-Hayaku

•

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

Photoshop

CSS Hat

PNG Hat

Avocode

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

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

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

icons.png

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

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

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

github.com/coderiver/sass

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

тот…

использует постпроцессор!*

*(на самом деле нет)

Зачем (rework, postcss, autoprefixer)

• Пишем обычный CSS, по спецификации .css

• Он обрабатывается, добавляя префиксы и прочее для поддержки в текущих браузерах

Но никто так не делает

• Используют Sass для кода (без компаса)

• Постпроцессят его с autoprefixer

Grunt/Gulp

Что там есть

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

• Компиляция

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

• Автоматизация тупых задач(скопировать, удалить, заменить)

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

или использовать Jade

b

Сохранять только в SVG PNG фоллбек автоматически

https://github.com/filamentgroup/grunticon

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

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

для Gulp gulp-changed

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

• БЭМ

• MCSS

• UBERCSS

• PonyCSS

• WTFCSS

• MLP:FIM

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

БЭМ

• .block__element

• .block—element

• block~(-_-)~element

Подробнее

Картинки в вебе

• Обычные контент картинки

• Иконки

Обычные

• Для ретины отдавать в x2 но с качеством сжатия 0

• Использовать SVG маски для сжатия

Иконки

• PNG-спрайт

• Иконочный шрифт (gulp, icomoon, fontastic)

• SVG-спрайт (js)

PNG-спрайт

Шрифт

SVG-спрайт

• gulp-svg-sprites

• jade

Всякие лайфхаки

Адаптивный сайт

3 дня

• Добавляем новый CSS(можно через плагины для браузера)

• .site{width:auto !important;max-width:1024px}

• meta name=“viewport”

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

python -m SimpleHTTPServer

Alfred

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

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

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

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

twitter.com/akella

facebook.com/akella

skype: akella_