Стилизуйте свой веб-сайт Nette Framework быстрее с помощью Stylify CSS

Стилизуйте свой веб-сайт Nette Framework быстрее с помощью Stylify. Не изучайте селекторы и синтаксис. Используйте чистый синтаксис CSS и получайте сгенерированный CSS с расширенной оптимизацией для производства.

В приведенном ниже примере вы можете ознакомиться с Примером интеграции с Nette Framework.

🚀 Нетте Введение

Nette — это PHP-фреймворк, созданный David Grudl и являющийся отличной альтернативой Symfony и Laravel. Он имеет удивительную систему шаблонов под названием Latte, которая использует синтаксис, аналогичный PHP, и по умолчанию имеет контекстно-зависимое экранирование (чего нет ни в одном другом фреймворке). На мой взгляд, его легче изучить, потому что он по умолчанию имеет простую структуру, не имеет зависимостей и требует изучения меньшего количества паттернов.

💎 Стилизация введения

Stylify динамически генерирует CSS на основе того, что вы пишете. Синтаксис аналогичен CSS property:value. Определенные утилиты комбинируются с селекторами компонентов и в производственной среде минимизированы до минимума, например, от .color\:red,.button {color:red} до ._zx, ._ga{color:red}.

Stylify позволяет вам получать очень маленькие пакеты, генерировать дополнительные куски CSS с отложенной загрузкой и стилизовать страницу, написав HTML и селекторы 🤟.

Установка нетте

Самый простой способ начать работу с Nette — использовать Composer, следуя этому руководству:

Беги composer create-project nette/web-project nette-blog
Перейти в проект директория cd nette-blog
Чтобы запустить веб, запустите php -S 0.0.0.0:80 -t www
Интернет должен быть доступен по адресу http://localhost

Стилизация установки

Поскольку Nette по умолчанию не поставляется ни с каким упаковщиком, ни с каким-либо пакетом javascript, мы собираемся использовать Stylify Bundler.

Установите сборщик yarn add -D @stylify/bundler.
Создайте файл bundles.js в корне проекта со следующим содержимым:

Эта конфигурация выше сгенерирует два пакета:

Layout - используется глобально
Homepage - только для главной страницы

Конечно, мы могли бы сгенерировать CSS для всего проекта в один файл. Но это сделало бы CSS ненужным больше.

Теперь откройте файл package.json и добавьте следующие скрипты:

Последним шагом является редактирование шаблонов. Откройте App/Presenters/Templates/@layout.latte и добавьте ссылку на файл CSS макета:

В App/Presenters/Templates/Homepage/default.latte добавить следующее:

Если вы запустите yarn watch, Stylify сгенерирует CSS и будет отслеживать изменения в любом файле.

Компоненты

Чтобы избежать раздувания шаблонов утилитами, вы можете настраивать
компоненты непосредственно в файлах, где они используются с помощью параметров контента (ожидает объект javascript без скобок) или в конфиге компилятора.

Во-первых, давайте добавим глобальный компонент container. Откройте bundles.js и следующее:

Теперь мы можем использовать его во всем проекте. В нашем случае мы добавляем его в макет:

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

Переменные

Всегда полезно иметь чистый и гибкий код без жестко заданных значений. Переменные могут быть определены так же, как и компоненты. Давайте изменим компонент заголовка:

Файлы сопоставления

Когда шаблон включает в себя компонент или вложенную часть шаблона, мы можем добавить его в пакет, используя опцию stylify-files.

Давайте создадим часть шаблона _content.latte рядом с default.latte со следующим содержимым:

Затем Homepage/default.latte информирует сборщик о внешних путях, используя опцию stylify-files, которая ожидает пути, разделенные пробелом или новой строкой: