Описание
Курс научит работать с CSS-in-JS — новым подходом к стилизации веб-приложений, нацеленным на преодоление ряда ограничений и проблем традиционных методов работы с CSS.
Раздел 1
Введение
Узнаем, что такое CSS-in-JS и почему он появился. Ознакомимся с основными идеями на практике по ходу стилизации небольшого компонента.
— Что такое CSS-in-JS и почему он появился
Практика
— Кейс: пошаговая демонстрация — разработка компонента кнопки
— Задание: разработка компонента кнопки
— Кейс: эталонное решение — разработка компонента кнопки
— Тест по первому разделу
— Дополнительные материалы
Раздел 2
Глобальные стили
Начнем работу над проектами курса и подготовим базовые стили.
— Обзор демо-проекта
— Формирование глобальных стилей при помощи CSS-in-JS
— Кейс: подключение дизайн-токенов и ресетов стилей в проекте
Практика
— Обзор учебного проекта
— Задание: подключение дизайн-токенов и ресетов стилей
— Кейс: эталонная реализация подключения дизайн-токенов и ресетов стилей в проекте
— Тест по второму разделу
Раздел 3
Компоненты
Продолжим работу над проектами курса и разработаем различные компоненты - простые и посложнее.
— Разработка компонентов в терминах CSS-in-JS
Типографика и иконки
— Кейс: пошаговая демонстрация — реализация компонентов для работы с типографикой и иконками
— Задание: разработка компонентов для работы с типографикой и иконками
— Кейс: эталонное решение — разработка компонентов для работы с типографикой и иконками
Кнопки
— Кейс: реализация «кнопочных» компонентов
— Задание: разработка «кнопочных» компонентов
— Кейс: эталонное решение — разработка «кнопочных» компонентов в проекте
Чекбокс и тоггл
— Кейс: реализация компонента чекбокса
— Задание: разработка компонента переключателя
— Кейс: эталонное решение — разработка компонента тоггла в проекте
Фильтр и поля форм
— Кейс: реализация компонента фильтра
— Задание: разработка полей форм
— Кейс: эталонное решение — разработка полей форм в проекте
Карточки
— Кейс: реализация «карточных» компонентов в проекте
— Задание: разработка «карточных» компонентов
— Кейс: эталонное решение — разработка «карточных» компонентов в проекте
— Тест по третьему разделу
Раздел 4
Крупные разделы и страницы
Реализуем страницы для проектов курса.
— Стилизация крупных разделов и целых страниц при помощи CSS-in-JS
Хедер, футер и базовый лейаут
— Кейс: реализация компонентов хедера, футера и базового лейаута
— Задание: разработка компонентов шапки, подвала и базового лейаута
— Кейс: разработка компонентов хедера, футера и базового лейаута в проекте
Главная страница
— Кейс: реализация главной страницы
— Задание: разработка главной страницы
— Кейс: разработка главной страницы в проекте
Страница каталога товаров
— Кейс: реализация страницы каталога товаров в проекте
— Задание: разработка страницы каталога товаров
— Кейс: разработка страницы каталога товаров в проекте
— Тест по четвёртому разделу
Раздел 5
Темизация
Реализуем альтернативные темы для проектов курса.
— Темизация приложения при помощи CSS-in-JS
— Кейс: пошаговая демонстрация — темизация в проекте
Практика
— Задание: темизация приложения
— Кейс: темизация в проекте, эталонное решение
— Обзор применяемых на курсе инструментов СSS-in-JS.
— Тест по пятому разделу
Раздел 6
Альтернативные реализации идей CSS-in-JS
Ознакомимся с новыми библиотеками для работы с CSS-in-JS и научимся выбирать наиболее подходящее под задачу решение, а также подведём итоги курса.
— Дополнительные возможности и альтернативные реализации CSS-in-JS
— Кейс: дополнительные возможности библиотеки styled-components в проекте
', ''],
pagination: false
});
$('select[name=\'recurring_id\'], input[name="quantity"]').change(function(){
$.ajax({
url: 'index.php?route=product/product/getRecurringDescription',
type: 'post',
data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
dataType: 'json',
beforeSend: function() {
$('#recurring-description').html('');
},
success: function(json) {
$('.alert, .text-danger').remove();
if (json['success']) {
$('#recurring-description').html(json['success']);
}
}
});
});
$('.date').datetimepicker({
pickTime: false
});
$('.datetime').datetimepicker({
pickDate: true,
pickTime: true
});
$('.time').datetimepicker({
pickDate: false
});
$('button[id^=\'button-upload\']').on('click', function() {
var node = this;
$('#form-upload').remove();
$('body').prepend('');
$('#form-upload input[name=\'file\']').trigger('click');
if (typeof timer != 'undefined') {
clearInterval(timer);
}
timer = setInterval(function() {
if ($('#form-upload input[name=\'file\']').val() != '') {
clearInterval(timer);
$.ajax({
url: 'index.php?route=tool/upload',
type: 'post',
dataType: 'json',
data: new FormData($('#form-upload')[0]),
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
$(node).button('loading');
},
complete: function() {
$(node).button('reset');
},
success: function(json) {
$('.text-danger').remove();
if (json['error']) {
$(node).parent().find('input').after('
