Размышляя о том, какой CSS-фреймворк использовать для нового проекта, сразу приходят в голову такие опции, как Bootstrap и Foundation. Они соблазнительны к использованию из-за своих готовых, заранее разработанных компонентов, которые разработчики могут легко использовать сразу. Этот подход хорошо работает с относительно простыми веб-сайтами с общим внешним видом. Но как только мы начинаем создавать более сложные, уникальные сайты с конкретными потребностями, возникает пара проблем.
В какой-то момент нам нужно настроить определенные компоненты, создать новые компоненты и убедиться, что конечная кодовая база унифицирована и ее легко поддерживать после изменений.
Трудно удовлетворить вышеупомянутые потребности с помощью таких фреймворков, как Bootstrap и Foundation, которые дают нам множество самоуверенных и, во многих случаях, нежелательных стилей. В результате мы должны постоянно решать проблемы специфичности, пытаясь переопределить стили по умолчанию. Это не похоже на забавную работу, не так ли?
Готовые решения просты в реализации, но негибки и ограничены определенными границами. С другой стороны, стилизация веб-сайтов без CSS-среды является мощной и гибкой, но ее нелегко управлять и поддерживать. Итак, каково решение?
Решение, как всегда, состоит в том, чтобы следовать золотой середине. Нам нужно найти и применить правильный баланс между конкретным и абстрактным. Низкоуровневая CSS-структура предлагает такой баланс. Существует несколько фреймворков такого рода, и в этом уроке мы рассмотрим наиболее популярный фреймворк Tailwind CSS .
Что такое попутный ветер?
Tailwind — это больше, чем CSS-фреймворк, это движок для создания систем проектирования. — Веб-сайт попутного ветра
Tailwind — это коллекция служебных классов низкого уровня. Их можно использовать как лего-кирпичи для создания любых компонентов. Коллекция охватывает наиболее важные свойства CSS, но ее можно легко расширить различными способами. С Tailwind настройки больше не являются болью в шее. Фреймворк имеет отличную документацию, подробно описывающую каждую утилиту класса и показывающую способы ее настройки. Поддерживаются все современные браузеры и IE11 +.
Зачем использовать Utility-first Framework?
Низкоуровневый CSS-фреймворк, основанный на утилитах, такой как Tailwind, имеет множество преимуществ. Давайте рассмотрим наиболее значимые из них:
- Вы имеете больший контроль над внешним видом элементов. Мы можем гораздо проще изменить и настроить внешний вид элемента с помощью служебных классов.
- Легко управлять и поддерживать в больших проектах, потому что вы поддерживаете только HTML-файлы, а не большую кодовую базу CSS.
- Легче создавать уникальные, индивидуальные дизайны сайтов, не борясь с нежелательными стилями.
- Он легко настраивается и расширяется, что дает нам неограниченную гибкость.
- У него мобильный подход и простая реализация адаптивных шаблонов дизайна.
- Существует возможность извлекать общие, повторяющиеся шаблоны в пользовательские, повторно используемые компоненты — в большинстве случаев без написания ни одной строки пользовательского CSS.
- У этого есть очевидные классы. Мы можем представить, как выглядит элемент стиля, только читая классы.
Наконец, как говорят создатели Tailwind:
почти невозможно думать, что это хорошая идея, когда вы впервые ее видите — вы должны на самом деле попробовать ее.
Итак, попробуем!
Начало работы с попутным ветром
Чтобы продемонстрировать возможности настройки Tailwind, нам нужно установить его через npm:
npm install tailwindcss Следующим шагом является создание файла styles.css , в который мы включаем стили фреймворка, используя директиву @tailwind :
@tailwind base; @tailwind components; @tailwind utilities;
После этого мы запускаем npx tailwind init , которая создает минимальный файл npx tailwind init , в который мы поместим наши параметры настройки во время разработки. Сгенерированный файл содержит следующее:
module.exports = { theme: {}, variants: {}, plugins: [], }
Следующим шагом является создание стилей для их использования:
npx tailwind build styles.css -o output.css
Наконец, мы связываем сгенерированный файл output.css и Font Awesome в нашем HTML:
<link rel="stylesheet" type="text/css" href="output.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
И теперь мы готовы начать создавать.
Создание одностраничного шаблона сайта
В оставшейся части руководства мы создадим шаблон веб-сайта на одну страницу, используя мощь и гибкость классов утилит Tailwind.
Здесь вы можете увидеть шаблон в действии .
Я не собираюсь объяснять каждую отдельную утилиту (которая была бы скучной и утомительной), поэтому я предлагаю вам использовать чит-лист Tailwind в качестве краткого справочника. Он содержит все доступные утилиты с их эффектом, а также прямые ссылки на документацию.
Мы будем строить шаблон раздел за разделом. Это заголовок, сервисы, проекты, команда и нижний колонтитул.
Сначала мы оборачиваем весь раздел в контейнере:
<div class="container mx-auto"> <!-- Put the sections here --> </div>
Заголовок (логотип, навигация)
Первый раздел — заголовок — будет содержать логотип с левой стороны и навигационные ссылки с правой стороны. Вот как это будет выглядеть:
Теперь давайте рассмотрим код, стоящий за ним.
<div class="flex justify-between items-center py-4 bg-blue-900"> <div class="flex-shrink-0 ml-10 cursor-pointer"> <i class="fas fa-drafting-compass fa-2x text-orange-500"></i> <span class="ml-1 text-3xl text-blue-200 font-semibold">WebCraft</span> </div> <i class="fas fa-bars fa-2x visible md:invisible mr-10 md:mr-0 text-blue-200 cursor-pointer"></i> <ul class="hidden md:flex overflow-x-hidden mr-10 font-semibold"> <li class="mr-6 p-1 border-b-2 border-orange-500"> <a class="text-blue-200 cursor-default" href="#">Home</a> </li> <li class="mr-6 p-1"> <a class="text-white hover:text-blue-300" href="#">Services</a> </li> <li class="mr-6 p-1"> <a class="text-white hover:text-blue-300" href="#">Projects</a> </li> <li class="mr-6 p-1"> <a class="text-white hover:text-blue-300" href="#">Team</a> </li> <li class="mr-6 p-1"> <a class="text-white hover:text-blue-300" href="#">About</a> </li> <li class="mr-6 p-1"> <a class="text-white hover:text-blue-300" href="#">Contacts</a> </li> </ul> </div>
Как вы можете видеть, классы довольно понятны, как я уже говорил выше. Мы будем исследовать только основные моменты.
Сначала мы создаем гибкий контейнер и центрируем его элементы по горизонтали и вертикали. Мы также добавили верхний и нижний отступы, которые Tailwind объединяет в одной утилите py . Как вы можете догадаться, есть также вариант px для левого и правого. Мы увидим, что этот тип сокращения широко используется во многих других утилитах. В качестве цвета фона мы используем темно-синий ( bg-blue-900 ) из цветовой палитры Tailwind. Палитра содержит несколько цветов с оттенками для каждого цвета, распределенными от 100 до 900. Например, blue-100 , blue-200 , blue-300 и т. Д.
В Tailwind мы применяем цвет к свойству, указав свойство, за которым следуют цвет и номер оттенка. Например, text-white , bg-gray-800 , border-red-500 . Очень просто.
Для логотипа на левой стороне мы используем элемент div , который мы установили, чтобы не сжимать ( flex-shrink-0 ), и немного отодвинем его от края, применяя свойство margin-left ( ml-10 ). Далее мы используем иконку Font Awesome, классы которой идеально сочетаются с классами Tailwind. Мы используем один из них, чтобы сделать иконку оранжевой. Для текстовой части логотипа мы используем большой светло-синий полужирный текст с небольшим смещением вправо.
В середине мы добавляем значок, который будет виден только на мобильном телефоне. Здесь мы используем один из отзывчивых префиксов точки останова ( md ). Tailwind, как Bootstrap и Foundation, следует мобильному подходу. Это означает, что когда мы используем утилиты без префикса ( visible ), они применяются от самых маленьких до самых больших устройств. Если нам нужны разные стили для разных устройств, нам нужно использовать префиксы точек останова. Таким образом, в нашем случае значок будет виден на небольших устройствах и невидим ( md:invisible ) на средних и последующих ресурсах.
На правой стороне мы помещаем ссылки навигации. Мы ссылаемся на ссылку Home по- разному, показывая, что это активная ссылка. Мы также перемещаем навигацию от края и устанавливаем ее скрытой при переполнении ( overflow-x-hidden ). Навигация будет скрыта ( hidden ) на мобильном телефоне и настроена на сгибание ( md:flex ) на средних и последующих.
Подробнее об отзывчивости вы можете прочитать в документации .
Сервисы
Давайте теперь создадим следующий раздел, Услуги. Вот как это будет выглядеть:
И вот код:
<div class="w-full p-6 bg-blue-100"> <div class="w-48 mx-auto pt-6 border-b-2 border-orange-500 text-center text-2xl text-blue-700">OUR SERVICES</div> <div class="p-2 text-center text-lg text-gray-700">We offer the best web development solutions.</div> <div class="flex justify-center flex-wrap p-10"> <div class="relative w-48 h-64 m-5 bg-white shadow-lg"> <div class="flex items-center w-48 h-20 bg-orange-500"> <i class="fas fa-bezier-curve fa-3x mx-auto text-white"></i> </div> <p class="mx-2 py-2 border-b-2 text-center text-gray-700 font-semibold uppercase">UI Design</p> <p class="p-2 text-sm text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac est massa.</p> <div class="absolute right-0 bottom-0 w-8 h-8 bg-gray-300 hover:bg-orange-300 text-center cursor-pointer"> <i class="fas fa-chevron-right mt-2 text-orange-500"></i> </div> </div> ... </div> </div>
Создаем раздел с голубым фоном. Затем мы добавляем подчеркнутый заголовок и подзаголовок.
Далее мы используем гибкий контейнер для пунктов обслуживания. Мы используем flex-wrap чтобы элементы были перенесены при изменении размера. Мы устанавливаем размеры для каждой карты и добавляем пространство и тень. Каждая карточка имеет цветной раздел с иконкой темы, заголовком и описанием. И мы также поместили кнопку с иконкой в правом нижнем углу.
Здесь мы используем один из вариантов псевдокласса (hover, focus и т. Д.). Они используются так же, как отзывчивые точки останова. Мы используем префикс псевдокласса, затем двоеточие и имя свойства ( hover:bg-orange-300 ).
Вы можете узнать больше о вариантах псевдокласса в документации .
Для краткости я показываю код только для первой карты. Другие похожи. Вы должны изменить только цвета, значки и заголовки. См. Окончательный HTML-файл в репозитории GitHub для справки.
проектов
Давайте перейдем к следующему разделу, Проекты. Вот последний взгляд:
И вот код:
<div class="section bg-blue-200"> <div class="section-title">OUR PROJECTS</div> <div class="section-subtitle">Explore our rich and diverse portfolio.</div> <nav class="flex justify-center flex-wrap mt-4 mb-8 text-white"> <div class="h-8 mr-2 px-3 py-1 bg-blue-400 hover:bg-blue-600 text-center cursor-pointer -skewx-20">All</div> <div class="h-8 mr-2 px-3 py-1 bg-blue-800 text-center -skewx-20">UI Design</div> <div class="h-8 mr-2 px-3 py-1 bg-blue-400 hover:bg-blue-600 text-center cursor-pointer -skewx-20">Web Dev</div> <div class="h-8 mr-2 px-3 py-1 bg-blue-400 hover:bg-blue-600 text-center cursor-pointer -skewx-20">Mobile Apps</div> <div class="h-8 mr-2 px-3 py-1 bg-blue-400 hover:bg-blue-600 text-center cursor-pointer -skewx-20">SEO</div> </nav> <div class="flex justify-center flex-wrap"> <div class="w-48 h-48 m-2 hover:-mt-1 border-4 border-orange-600 rounded-tl-2xl rounded-br-2xl cursor-pointer hover:shadow-lg"> <img class="w-full h-full object-cover rounded-tl-2xl rounded-br-2xl" src="design1.jpg" /> </div> ... </div> </div>
Во-первых, вы можете заметить, что здесь я использую классы section . Они не из попутного ветра. Я создал их и покажу вам, как сейчас.
Поскольку все три промежуточных раздела будут иметь один и тот же базовый внешний вид — что приводит к повторению кода — сейчас самое время начать думать о компонентах. Одной из замечательных функций, предлагаемых Tailwind, является возможность легко и безболезненно извлекать и создавать любые компоненты. Итак, здесь мы извлечем пользовательский компонент section .
Вот как. Откройте styles.css и добавьте следующие классы сразу после объявления components :
... @tailwind components; .section { @apply w-full p-6; } .section-title { @apply w-48 mx-auto pt-6 border-b-2 border-orange-500 text-center text-2xl text-blue-700; } .section-subtitle { @apply p-2 text-center text-lg text-gray-700; } ...
Как видите, для создания класса компонента мы используем директиву @apply а затем необходимые утилиты. Вот больше информации о извлечении компонентов .
Теперь, чтобы использовать новые классы, нам нужно заново создать стили:
npx tailwind build styles.css -o output.css
Теперь вместо длинного массива утилит мы просто используем один отдельный класс для каждого элемента. И, как вы можете видеть, пользовательские классы можно безопасно использовать вместе с обычными утилитами ( section bg-blue-200 ).
Давайте перейдем к кнопкам навигации. Мы помещаем их в гибкий контейнер и оформляем их как красивые прямоугольники. Но мы хотим сделать их немного более динамичными и стильными, применив небольшой перекос. Проблема в том, что Tailwind не предлагает такой утилиты. Итак, пришло время научиться создавать собственные утилиты. Это супер просто.
styles.css откройте styles.css и добавьте нужный класс сразу после объявления utilities :
... @tailwind utilities; .-skewx-20 { transform: skewX(-20deg); } ...
Мы хотим наклонить прямоугольники по горизонтали. Для этого нам понадобится skewX() с отрицательным значением. В Tailwind утилиты с отрицательными значениями создаются путем помещения знака минус перед названием утилиты.
Мы можем увидеть эффект от нашей новой утилиты сразу после того, как мы перестроим стили.
Вот больше информации о добавлении новых утилит .
Теперь мы создаем еще один гибкий контейнер для карточек проекта. Мы хотим округлить их верхний левый и нижний правый углы, но количество округлостей, которое предлагает rounded утилита, меньше, чем нам нужно. Итак, на этот раз мы узнаем, как настроить тему Tailwind по умолчанию.
Откройте borderRadius и добавьте опцию borderRadius после ключа theme.extend :
theme: { extend: { borderRadius: { xl: '1rem', '2xl': '2rem', '3xl': '3rem' } } },
Здесь мы используем ключ extend , потому что мы не хотим переопределять другие параметры, мы хотим включить дополнительные параметры. После того, как мы перестроим стили, мы увидим, как наши новые опции вступают в силу.
Чтобы узнать больше о настройке темы, посетите документацию .
Мы хотим сделать еще одну вещь, которую Tailwind не предлагает по умолчанию. Мы хотим, чтобы карта немного поднималась при наведении. Поэтому нам нужно добавить тонкую отрицательную маржу при наведении. Но чтобы это сработало, нам нужно включить вариант hover для утилиты margin .
Для этого мы помещаем следующее в tailwind.config.js :
variants: { margin: ['responsive', 'hover'] },
Здесь важно то, что мы всегда должны предоставлять полный список вариантов, которые мы хотим включить, а не только новые.
Узнайте больше о настройке вариантов в документации .
Теперь давайте перестроим стили и посмотрим на результат.
команда
На этом этапе у вас есть довольно хорошее представление о том, как работает Tailwind, и создание раздела Team будет довольно знакомым. Вот как это будет выглядеть:
Вот код:
<div class="section bg-blue-100"> <div class="section-title">OUR TEAM</div> <div class="section-subtitle">Meet our skilled professionals.</div> <div class="flex justify-center flex-wrap"> <div class="w-48 m-4 py-2 bg-white shadow-lg"> <img class="w-24 h-24 mx-auto rounded-full" src="jessica.jpg" /> <p class="mx-2 mt-2 text-center text-lg text-gray-700 font-semibold">Jessica Thompson</p> <p class="text-center text-gray-600">UI Artisan</p> <div class="flex justify-center items-center mt-2"> <i class="fab fa-facebook-square fa-2x mx-1 text-blue-500 hover:text-orange-500 cursor-pointer"></i> <i class="fab fa-twitter-square fa-2x mx-1 text-blue-500 hover:text-orange-500 cursor-pointer"></i> <i class="fab fa-google-plus-square fa-2x mx-1 text-blue-500 hover:text-orange-500 cursor-pointer"></i> </div> </div> ... </div> </div>
Здесь мы создаем набор профильных карт. Код для них очень повторяющийся, поэтому мы извлечем его в карточный компонент многократного использования. Мы уже знаем, как это сделать.
Мы создаем классы карт и помещаем их в файл styles.css :
... .card { @apply w-48 m-4 py-2 bg-white shadow-lg; } .card-image { @apply w-24 h-24 mx-auto rounded-full; } .card-title { @apply mx-2 mt-2 text-center text-lg text-gray-700 font-semibold; } .card-subtitle { @apply text-center text-gray-600; } .card-icons { @apply flex justify-center items-center mt-2; } .card-icon { @apply mx-1 text-blue-500 cursor-pointer; } .card-icon:hover { @apply text-orange-500; } ...
Теперь давайте перестроим стили и используем классы card в нашем файле. Мы меняем утилиты на классы, и в результате мы получаем гораздо более короткую версию кода.
<div class="section bg-blue-100"> <div class="section-title">OUR TEAM</div> <div class="section-subtitle">Meet our skilled professionals.</div> <div class="flex justify-center flex-wrap"> <div class="card"> <img class="card-image" src="jessica.jpg" /> <p class="card-title">Jessica Thompson</p> <p class="card-subtitle">UI Artisan</p> <div class="card-icons"> <i class="fab fa-facebook-square fa-2x card-icon"></i> <i class="fab fa-twitter-square fa-2x card-icon"></i> <i class="fab fa-google-plus-square fa-2x card-icon"></i> </div> </div> ... </div> </div>
Нижний колонтитул (О компании, Контакты)
Теперь посмотрим на последний раздел нижнего колонтитула. Это будет содержать три столбца и будет выглядеть так:
Вот код:
<div class="w-full bg-blue-900"> <div class="flex flex-wrap text-center text-white"> <!-- ABOUT COLUMN --> <div class="w-full md:w-1/3 p-5 border-r border-blue-800 md:text-left"> <div class="my-6 ml-3 text-xl font-semibold">ABOUT US</div> <p class="p-3 text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac est massa. Donec eget elementum sapien, tincidunt tempor nunc. Cras sodales id ipsum at convallis.</p> <p class="p-3 text-gray-400">Morbi tristique massa nec massa auctor, at scelerisque felis consectetur. Morbi tempus et odio sit amet feugiat. Maecenas dignissim a turpis in molestie. Fusce tincidunt vestibulum iaculis.</p> </div> <!-- CONTACTS COLUMN --> <div class="w-full md:w-1/3 p-5 border-r border-blue-800"> <div class="my-6 text-xl font-semibold">CONTACT US</div> <p class="mt-8 text-gray-400"> A108 Adam Street <br> New York, NY 535022 <br> United States <br> <strong>Phone:</strong> +1 5589 55488 55 <br> <strong>Email:</strong> [email protected] </p> <div class="relative w-20 h-20 mx-auto my-12 bg-blue-300 rotate-45"> <div class="flex justify-center items-center absolute left-0 top-0 w-10 h-10 hover:-ml-1 hover:-mt-1 bg-blue-800 cursor-pointer"> <i class="fab fa-facebook-f fa-lg text-blue-500 -rotate-45"></i> </div> <div class="flex justify-center items-center absolute top-0 right-0 w-10 h-10 hover:-mt-1 hover:-mr-1 bg-blue-800 cursor-pointer"> <i class="fab fa-twitter fa-lg text-blue-500 -rotate-45"></i> </div> <div class="flex justify-center items-center absolute right-0 bottom-0 w-10 h-10 hover:-mr-1 hover:-mb-1 bg-blue-800 cursor-pointer"> <i class="fab fa-google-plus-g fa-lg text-blue-500 -rotate-45"></i> </div> <div class="flex justify-center items-center absolute bottom-0 left-0 w-10 h-10 hover:-mb-1 hover:-ml-1 bg-blue-800 cursor-pointer"> <i class="fab fa-linkedin-in fa-lg text-blue-500 -rotate-45"></i> </div> </div> </div> <!-- FORM COLUMN --> <div class="w-full md:w-1/3 p-5"> <div class="mt-6 text-xl font-semibold">SAY HELLO!</div> <form class="w-4/5 mx-auto mt-2 px-6 pt-6 pb-4 rounded"> <div class="flex items-center mb-4"> <input class="w-full h-10 p-2 border-b border-blue-800 bg-blue-900 text-white" type="text" placeholder="Username"> </div> <div class="flex items-center mb-4"> <input class="w-full h-10 p-2 border-b border-blue-800 bg-blue-900 text-white" type="text" placeholder="Email"> </div> <div class="mb-6"> <textarea class="w-full h-24 px-2 pt-2 border-b-2 border-blue-800 bg-blue-900 text-white" placeholder="Message"></textarea> </div> <div class="flex justify-between items-center"> <button class="w-full py-2 px-4 rounded bg-orange-600 hover:bg-orange-700 text-white font-bold" type="button">SEND</button> </div> </form> </div> </div> </div>
Здесь мы создаем адаптивную сетку из трех столбцов. Для этого мы используем утилиту Flexbox и утилиту width с ее адаптивными вариантами. Используя классы w-full md:w-1/3 , мы принудительно размещаем столбцы на мобильных устройствах и в ряд на средних и последующих.
В первом столбце текст будет выровнен по левому краю на среднем и последующем ( md:text-left ).
Во втором столбце мы поместили некоторую контактную информацию и виджет для обмена информацией в социальных сетях. Посмотрим, как его создать.
Мы используем квадратный гибкий контейнер, в который мы помещаем четыре меньших квадрата, расположенных равномерно в каждом углу. Мы вращаем все квадраты на 45 градусов. Внутри каждого квадрата мы помещаем социальный значок, который поворачиваем на -45 градусов, чтобы выровнять его по контейнеру. При наведении курсора каждый маленький квадрат немного выходит за пределы большого квадрата.
Как видим, нам нужно создать еще две утилиты для операций поворота. Итак, мы снова открываем styles.css и добавляем необходимые классы:
... .rotate-45 { transform: rotate(45deg); } .-rotate-45 { transform: rotate(-45deg); } ...
Теперь пересоберите стили и посмотрите результаты.
В последнем столбце у нас есть тонкая контактная форма.
Последние соображения
Вы уже наверняка заметили, что конечный размер файла довольно большой. Не волнуйтесь, это можно исправить. Для получения подробной информации см. Раздел контроля размера файла документации .
Я намеренно оставил больше мест с повторением кода в шаблоне. Вы уже знаете, как справиться с этой проблемой, и это будет хорошим упражнением для ее выделения в компоненты в качестве подкрепления.
Вывод
Как видите, Tailwind предоставляет вам простой рабочий процесс, не ограничивая возможности и не ограничивая гибкость. Подход, основанный на утилитах, предлагаемый Tailwind, успешно реализуется крупными компаниями, такими как GitHub, Heroku, Kickstarter, Twitch, Segment и другими.
Лично для меня, после многих часов «борьбы» и «борьбы» со стилями из фреймворков, таких как Bootstrap, Foundation, Semantic UI, UIkit и Bulma, использование утилит Tailwind кажется свободным полетом в безоблачном небе.