arturican / arturican.study.devlato.com Goto Github PK

Что должно быть сделано:

• Страница создана
• Код страницы проходит валидацию на W3C с подтверждающим скриншотом
• Страница запушена в репозиторий в отдельную ветку для код ревью
• В репозитории настроен GitHub Pages
• Страница выложена на GitHub Pages и доступна по ссылке

Что должно быть сделано:

• В assets/button.css добавлен код для стилей кнопки:
  • Все классы должны быть именованы в соответствии с БЭМ, это значит, что классы должны быть разделены на Блоки, Элементы и Модификаторы;
  • Должен быть создан класс (Блок) .button для кнопки, который может применяться к элементам div, span, input, button и a;
  • Должны быть созданы классы-модификаторы для кнопки в соответствии с тем, какого типа может быть кнопка (главная/второстепенная, по умолчанию любая кнопка – второстепенная), при этом главная кнопка должна иметь фон акцентного (accent) цвета из выбранной в предыдущей задаче палитры и контрастный цвет текста тоже из палитры;
  • Должны быть созданы классы-модификаторы для размера кнопки – в зависимости от класса-модификатора меняется размер шрифта (выбирается также из палитры шрифтов из прыдедущей задачи) и размер padding'а из палитры отступов и размеров из предыдущей задачи;
• Файл assets/button.css подключен в styleguide.html
• В styleguide.html есть секция с образцами всех видов кнопок и всех видов размеров кнопок, каждая кнопка в отдельной строке
• Все изменения закоммичены с правильным форматированием коммита и запушены в репозиторий в отдельную ветку для код ревью
• Изменения выложены на говностранице на GitHub Pages

Что должно быть сделано:

• Создан файл assets/styles/palette.css;
• Файл assets/styles/palette.css подключен в styleguide.html
• В palette.css добавлены следующие классы, соответствующие правилам именования БЭМ:
  • Классы для шести основных цветов, используемых в фреймворке, цвета брать из таблицы Web colors:
    • Главный (акцентный) цвет – какой-нибудь яркий цвет, который будет обозначать элементы, которые должны привлекать внимание (главные кнопки, ссылки и т.д.);
    • Главный фоновый (акцентный фоновый) цвет – какой-нибудь цвет из той же таблицы, который будет контрастно, но не уродливо смотреться с акцентным цветом;
    • Цвет границ элементов – просто цвет, который будет применяться к границам элементов, блоков и т.д., может быть контрастным оттенком серого из таблицы;
    • Цвет текста – тёмный оттенок серого (из той же таблицы) или чёрный;
    • Цвет фона или пустого пространства – белый или любой достаточно светлый из таблицы;
    • Цвет второстепенных активных элементов – кнопок, ссылок и т.д., которые не должны привлекать много внимания. Может быть светло-серый или любой другой из таблицы, но он должен быть темнее и заметнее цвета фона/пустого пространства;
    • Классы должны быть названы не по цветам (типа .color--red), а по функциям (.color--accent, .color--background) и т.д.
    • Для каждого цвета добавить в styleguide.html секцию с блоками div – каждый в отдельной строке – с примером цвета и описанием функции цвета, каждый цвет должен быть в отдельной строке;
  • Классы для размеров шрифтов – пять классов, соответствующих разным уровням иерархии заголовков и просто текста. Т.е.,например, .text--extra-large (или .text--xl) и т.д.
    • Имена классов должны соответствовать БЭМ;
    • Все эти классы должны иметь одинаковый шрифт (font-family + font-face). У каждого класса должен быть разный размер шрифта, причем должно быть очевидно, шрифт какого класса больше какого (например, очевидно, что .text--xxl больше, чем .text--xl и text--m, но ты можешь назвать их по-другому);
    • Среди них могут быть как жирные варианты текста, так и нет, но учитывай, что среди этих вариантов стилей могут быть классы как для заголовков, так и для обычного текста, так и для мелкого текста;
    • Стили одного из этих классов должны быть применены по умолчанию на body в качестве внешнего вида шрифта по умолчанию для любого текста;
    • Для всех этих классов в styleguide.hmtl должна быть добавлена секция с примерами – пять div, каждый в отдельной строки, каждый div содержит текст, написанный текстом с одним из этих классов. Расположи их от большего к меньшему;
  • Классы для размеров отступов – предусмотреть классы для пяти вариантов padding и margin (по пять для padding и margin соответственно).
    • Имена классов должны соответствовать БЭМ;
    • Принцип именования классов можно использовать тот же, что и для классов для шрифтов, т.е. должно быть понятно, какой класс соответствует какому размеру padding и margin;
    • В классах для паддингов могут быть заданы следующие паддинги: например, 8px, 16px, 24px, 32px и 64px
    • Для классов марджинов имеет смысл использовать те же величины, что и для паддингов;
    • В styleguide.hmtl должна быть добавлена секция с десятью div с каким-нибудь текстом (пять для паддингов и пять для марджинов) для демонстрации соответствующих классов.
      В будущем, если тебе потребуется использовать для чего-нибудь цвета, шрифты или марджины/паддинги, используй значения, которые есть у тебя в стилях всех этих классов. Т.е. если тебе нужно применить цвет к ссылке, не тащи в стили новый цвет, а используй например акцентный цвет из палитры. Или если тебе нужно сделать заголовок, возьми размер и стиль шрифта из одного из классов (или просто используй класс). Или если тебе нужно сделать кнопку с паддингом, используй в качестве значния один из имеющихся в стилях паддингов. Иначе всё будет выглядеть как кусок ебаного говна;
• Все изменения должны быть закоммичены с правильным форматированием коммита и запушены в репозиторий в отдельную ветку для код ревью
• Изменения выложены на говностранице на GitHub Pages

Что должно быть сделано:

• Создана папка assets
• Создана папка assets/styles
• Создана папка assets/images
• Создана папка assets/scripts
• В папке assets/styles создан файл reset.css с кодом для сброса стилей
• В папке assets/styles создан пустой файл button.css
• Оба файла подключены в styleguide.html
• Все изменения закоммичены с правильным форматированием коммита и запушены в репозиторий в отдельную ветку для код ревью
• Изменения выложены на говностранице на GitHub Pages