Презентация с fdconf.by

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

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

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

11. Emmet
Hayaku

14. Emmet-Hayaku
•

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

16. Photoshop

17. CSS Hat

21. PNG Hat

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

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

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

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

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

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

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

45. github.com/akella/sass

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

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

48. Полезный Grunt

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

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

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

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

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

55. Alfred

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

60. Тратьте меньше времени
Делайте больше работы
Получайте удовольствие от процесса
Идите и живите жизнь

61. Дякую! Запитання?
!
Юрiй Артюх
coderiver.com.ua
cssing.org.ua
twitter.com/akella

62. -20%
bit.ly/csshat-discountbit.ly/pnghat-discount