Юрій Артюх CEO у Coderiver Мова піде про сучасні підходи у верстці, інструментах, варіантах реалізації компонентного підходу та шаблонах для верстки

1. пам-пам

2. 10 рецептов
лазаньи
Юрий Артюх

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

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

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

15. Emmet
Hayaku

18. Emmet-Hayaku
•

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

20. Photoshop

21. CSS Hat

25. PNG Hat

31. Avocode

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

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

39. +s(bigorel) - миксин
icons.png

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

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

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

50. github.com/coderiver/
sass

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

52. использует
постпроцессор!*
*(на самом деле нет)

53. Зачем
(rework, postcss, autoprefixer)
• Пишем обычный CSS, по спецификации .css
• Он обрабатывается, добавляя префиксы и прочее
для поддержки в текущих браузерах

55. Но никто так не делает
• Используют Sass для кода (без компаса)
• Постпроцессят его с autoprefixer

57. Grunt/Gulp

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

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

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

62. b

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

64. Компилировать
только изменившееся
https://github.com/tschaub/grunt-newer

65. для Gulp
gulp-changed

67. Методология верстки
• БЭМ
• MCSS
• UBERCSS
• PonyCSS
• WTFCSS
• MLP:FIM

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

69. БЭМ
• .block__element
• .block—element
• block~(-_-)~element

70. Подробнее

71. Картинки в вебе
• Обычные контент картинки
• Иконки

72. Обычные
• Для ретины отдавать в x2 но с качеством сжатия
0
• Использовать SVG маски для сжатия

73. Иконки
• PNG-спрайт
• Иконочный шрифт (gulp, icomoon, fontastic)
• SVG-спрайт (js)

74. PNG-спрайт

75. Шрифт

76. SVG-спрайт
• gulp-svg-sprites
• jade

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

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

81. 3 дня
• Добавляем новый CSS(можно через плагины для
браузера)
• .site{width:auto !important;max-width:1024px}
• meta name=“viewport”

82. Вебсервер в любой папке
python -m SimpleHTTPServer

83. Alfred

85. Если вы не автоматизируете
Вы работаете больше чем надо

87. Дякую! Запитання?
Юрiй Артюх
cssing.org.ua
twitter.com/akella
facebook.com/akella
skype: akella_