Настройка стилей

Введение

Slidde.co предлагает уникальный подход к веб-дизайну, позволяя настраивать стили с помощью CSS непосредственно в каждом компоненте. В отличие от традиционных конструкторов сайтов, таких как Webflow, Slidde.co выделяется:

• Использование стандартного CSS:
  • Достижение любого стиля веб-сайта.
  • Экспорт стилей в любой конструктор сайтов, что делает их повторно используемыми, если вы перейдете к разработке на основе кода.
• Предустановленные значения:
  • Вдохновленный библиотеками, такими как Tailwind, Slidde.co предоставляет предустановленные значения для стилей, позволяя выбирать опции щелчком мыши, а не вводом текста.
• Четкая структура:
  • Даже для сложных стилей настройки остаются понятными и не нарушают структуру DOM.

Пример компонента: Горизонтальная панель навигации

Давайте возьмем сложный компонент, горизонтальную панель навигации, и исследуем пять областей настройки:

1. Пользовательские стили: CSS для всей панели навигации.
2. Пользовательские стили контейнера: Стили для левого контейнера, обычно содержащего логотип или заголовок.
3. Пользовательские стили кнопок: Стили для кнопок на рабочем столе.
4. Стили активных кнопок: Стили для активных кнопок на рабочем столе.
5. Пользовательские стили кнопки переключения: Стили для кнопки мобильного меню-гамбургера.

Вы можете увидеть полный пример панели навигации здесь template.

Продвинутый синтаксис CSS

Slidde.co поддерживает продвинутый синтаксис CSS для более точного стилирования:

• Разделитель точкой: Используйте . для разделения свойств от модификаторов.
• CamelCase: Используйте camelCase для имен свойств CSS.

Примеры:

• &:hover.color: Цвет шрифта при наведении.
• &:hover.borderColor: Цвет границы при наведении.
• padding: Отступ для всех размеров экрана.
• md.padding: Отступ для экранов больше среднего (рабочий стол).

Чтобы установить разные отступы для мобильных устройств и рабочего стола: padding: .5rem & md.padding:2rem

Стандартные CSS селекторы:

• & > img.height: Высота элементов img первого уровня внутри текущего элемента.
• &:first-child.color: Псевдокласс ::first-child для первого дочернего элемента.
• &::after.content: Псевдокласс ::after для добавления дополнительных элементов.

Следуя этим рекомендациям, вы сможете эффективно использовать Slidde.co для проектирования и настройки ваших веб-компонентов с точностью и легкостью.