Продвинутые CCS Макеты

Мы начнем с краткого обзора использования Flexbox для создания сложной веб-страницы. Мы рассмотрим, как решить, как писать макет на основе скриншотов желаемого результата. Мы также создадим кнопку гамбургера для нашей навигации с использованием только CSS-подхода - JavaScript не требуется.

Мы быстро перейдем к введению в calc (), способности выполнять математику непосредственно в CSS, включая ее преимущества и требования. Мы также рассмотрим пользовательские свойства (переменные CSS). Хотя многие переменные принципы верны, есть несколько интересных особенностей, связанных с каскадом. Мы также обсудим, когда использовать calc () и пользовательские свойства и их эквиваленты в Sass. Спойлер: это не просто поддержка браузера!

Мы применим все то, что мы только что узнали о calc () и пользовательских свойствах, к 4-колоночной грид-системе на основе Flexbox, которую мы писали в моем предыдущем курсе Flexbox и Grid. Наконец, мы применим эти принципы к домашней странице, которую мы создали ранее.

Во второй половине семинара мы рассмотрим модульные шкалы типов, которые создадут алгоритм для наших размеров шрифтов. Мы применим эти масштабы к нашему дизайну, используя эти принципы с помощью calc () и пользовательских свойств.

Наконец, мы рассмотрим таблицы и формы, а также влияние адаптивного дизайна на эти элементы. Как вы можете сочетать правильную разметку таблицы HTML с адаптивным дизайном? Это проще, чем вы думаете, и есть несколько возможных подходов. Мы также рассмотрим макеты форм и то, как их можно быстро и легко адаптировать.

• Научитесь планировать свой подход к дизайну страницы с заданным макетом
• Поймите calc () и пользовательские свойства (переменные CSS), включая их правильное использование и отличия от эквивалентов Sass.
• Научитесь комбинировать Flexbox, calc (), пользовательские свойства и медиазапросы для создания невероятно сухих макетов.
• Поймите модульные шкалы для типа и использовать принципы для СУХОЙ компоновки для создания разных размеров шрифта при разных разрешениях экрана
• Создайте кнопку с CSS для навигации
• Создавайте адаптивные таблицы, используя правильную разметку таблицы и различные методы отображения
• Создавайте адаптивные формы, которые хорошо работают на разных устройствах