Хорошо, ребята, у меня есть 15 минут, чтобы объяснить кое-что потрясающее о создании фреймворков из CSS. Я создам фреймворк, но в дальнейшем вы можете сделать свой, это просто пример. Это объяснение не займет много времени.
Зачем создавать фреймворк?
Опираясь на эту структуру, можно получить более глубокое представление о том, как люди работают и что делает их подходящими для меняющихся потребностей индустрии. Таким образом, это зависит от варианта использования и может быть изменено или создано новое.
Что вам нужно?
Опыт работы с bootstrap версии 3 или 4, базовые знания CSS (обязательны медиа-запросы) и базовое понимание SASS. Даже если вы сделаете это позже без SASS (или любого CSS-процессора), вы серьезно нарушите многие существующие принципы программирования, такие как KISS, DRY и т. д.
Давайте создадим структуру CSS
Начнем с того, как это сделать. Нам нужно уделить внимание созданию фреймворка, такого как бутстрап, который имеет множество функций, таких как адаптивная сетка, типографика, повторно используемые разноцветные элементы/компоненты, формы, навигация и т. д. Мы сосредоточимся на создании адаптивных сеток и пользовательских тем. на основе компонентов в первую очередь. Давайте начнем с создания кнопки на основе темы, а затем создадим адаптивную сетку.
- Создать файл app.scss
Во-первых, давайте начнем с создания приложения. scss, в котором будет храниться весь код фреймворка. Теперь запишем все основные цвета нашей темы на карту app.scss.
2. Создайте базовый стиль для класса btn
После того, как вы создали файл app.scss, следующим шагом будет создание базового стиля для класса btn:
Теперь, где бы мы ни использовали класс btn, элемент получит базовый стиль, определенный выше.
3. Создание цветных кнопок с помощью начальной загрузки
Теперь давайте сосредоточимся на том, как мы можем создавать кнопки цвета темы с классами, подобными начальной загрузке, такими как btn-primary, btn-secondary и т. д. Для этого мы должны повторить нашу карту цветов, как показано ниже:
@each позволяет нам перебирать карту в SCSS и дает нам доступ к парам ключей и значений карты. Мы можем использовать ключ, чтобы назвать класс, и значение, чтобы применить цвет фона. Это создаст класс, который позволит нам стилизовать наши кнопки в соответствии с цветами нашей темы.
Зачем останавливаться на кнопке, когда вы можете использовать тот же процесс для создания некоторых компонентов, таких как значки, таблетки, индикаторы выполнения, счетчики и т. д.
4. Создание базовых стилей для Loop
Подводя итог, создайте базовый стиль для компонента, перебирая цвета темы, чтобы получить компонент стиля темы.
Ты все еще здесь? Я рад, что ты все еще читаешь.
Позвольте мне рассказать вам кое-что удивительное и быстрое в приготовлении.
Вы когда-нибудь хотели сетку с нечетным количеством столбцов или разными контрольными точками? Вы скоро научитесь это делать. Если вы сделали предыдущие шаги правильно, вы сделаете это довольно легко.
Давайте сначала определимся с количеством столбцов, точек останова сетки и базовым стилем для контейнеров и строк.
Теперь давайте перейдем к динамической генерации стилей для наших столбцов. Для этого мы будем использовать карту точек останова и прокручивать ее, как показано ниже:
Затем мы будем использовать медиа-запрос, чтобы ограничить стили наших столбцов, чтобы они включались только после выполнения условий запроса. Следующие условия будут перебирать карту точек останова и создавать для них медиа-запрос:
Теперь у нас будет переменная «количество столбцов», проходящая через нее с помощью специального цикла @for. В нашем случае она будет зацикливаться между 1 и количеством столбцов, предоставляя при этом текущий номер столбца в цикле.
Основной стиль столбца — это отступ и его ширина. Ширина рассчитывается в зависимости от количества занятых столбцов.
Приведенный выше код будет генерировать адаптивные стили и классы столбцов для всех наших точек останова, но нам все еще нужно создавать стили и классы столбцов для очень маленьких устройств, что нам придется делать вручную.
Тада! Вот он! Мы закончили создание нашего каркаса.
Сводка
Подводя итог, в первой части мы определили цвета нашей темы, создали базовый стиль кнопок, а затем, используя эти цвета темы, мы создали парк многотематических цветных кнопок для нашего использования.
Для адаптивных сеток мы определяем количество столбцов, точек останова и базовых стилей для нашего контейнера (сетки) и строк. Затем мы перебираем точки останова и с помощью медиа-запросов создаем стили столбцов для каждой из наших точек останова. Затем мы перебираем столбцы, чтобы создать стиль для каждого столбца.
Я надеюсь, что эта статья дала вам общее представление о строительных блоках фреймворков CSS и показала, как вы можете использовать SASS, чтобы быстро создать его для себя или просто создать компоненты на основе тем за считанные минуты для ваших существующих проектов.
Спасибо, что прочитали!
