Использование Sass и Compass для созданиях командных стайлгайдов

В этом докладе я расскажу о том зачем нужны стайлгайды и почему они упрощают командную работу. А также о том, какие инструменты для их создания я советую использовать.

Transcript

2. Любой код пишется для человека, а не для компьютера!
3. Стайлгайды • Общего характера / брендовые • Для кода / для дизайна • Публичные / закрытые
4. Google JavaScript Style Guide
5. Ubuntu Web Style Guide
6. Работай в команде!
7. GitHub
8. Trello
9. Невозможность быстро что-то изменить ↓ неэффективность
10. Рефакторинг + стайлгайды + Sass = быстрая командная работа
11. Sargent Sass
13. Переменные – $var: #069; • числа, строки, цвета; • boolean, null; • массивы (lists); • хеши (maps).
14. Хеши (maps)
15. Вложенность
16. Миксины (@mixin)
17. Не забывайся! (D.R.Y.)
18. Наследование (@extend)
19. Тихие селекторы (%placeholder)
20. Функции (@function)
21. Условия и циклы
22. sassmeister.com
23. Ожидание
24. Реальность
25. Импорты (@import)
26. Архитектура
27. Методологии CSS • BEM (bem.info) • SMACSS (smacss.com) • MCSS (operatino.github.io/MCSS)
28. SMACSS
29. Структура проекта meta/
 _config.scss // переменные для модулей
 _colors.scss // хеши с цветами
 _mixins.scss // миксины O_o
 modules/
 _banner.scss // все стили относящиеся к
 _menu.scss // модулям, включая стэйты
 vendor/
 _normalize.scss // CSS Reset
 _foundation.scss // Zurb Foundation
 _base.scss // общие стили (можно опустить)
 app.scss // единственный компилируемый файл

30. Стайлгайд • Брендовые цвета и логотип • Типографика • UI-элементы (формы, кнопки, etc.) • Демонстрация всех модулей • Документация по коду и архитектуре проекта
31. Цвета
32. Типографика
33. Иконки
34. Кнопки
35. Know you tools!
36. Captain Compass
37. Спрайты
38. susy.oddbird.net
39. type-scale.com
40. gruntjs.com
41. incident57.com/codekit
42. alphapixels.com/prepros
43. rubygems.org
44. sass-lang.com/styleguide
47. vk.com/uwebdesign
48. uwebdesign.ru
49. Спасибо за внимание!