DEV Community

Cover image for Style your Nette Framework website faster with Stylify CSS
Vladimír Macháček
Vladimír Macháček

Posted on • Originally published at stylifycss.com

Style your Nette Framework website faster with Stylify CSS

Style your Nette Framework website faster with Stylify. Don't study selectors and syntax. Use pure CSS syntax and get generated CSS with advanced optimization for production.

For the example bellow, you can checkout the Nette Framework Integration Example.

🚀 Nette Introduction

Nette is a PHP framework made by David Grudl and it is a great alternative to Symfony and Laravel. It has an amazing templating system called Latte that uses similar syntax to PHP and by default has context-sensitive escaping (which no other framework has). In my opinion, it is easier to learn, because it comes with a simple structure by default, it has no dependencies and less patterns to learn.

💎 Stylify Introduction

Stylify generates CSS dynamically based on what you write. The syntax is similar to css property:value. Defined utilities are combined with components selectors and in production minified to bare minimum like .color\:red,.button {color:red} to ._zx, ._ga{color:red}.

Stylify allows you to get very small bundles, generate additional lazyloaded CSS chunks and style the page by writting HTML and selectors 🤟.

Nette installation

The easiest way to start with Nette is to use Composer following this guide:

  • Run composer create-project nette/web-project nette-blog
  • Go to the project dir cd nette-blog
  • To start the web run php -S 0.0.0.0:80 -t www
  • The web should be available at http://localhost

Stylify setup

Because Nette doesn't come with any bundler neither with any javascript package by default, we are going to use the Stylify Bundler.

Install the bundler yarn add -D @stylify/bundler.
Create the bundles.js file in the project root with the following content:

const { nativePreset } = require('@stylify/stylify');
const { Bundler } = require('@stylify/bundler');

// Detect watch mode
const watchFiles = process.argv[process.argv.length - 1] === '--w';

// Mangle selectors for production
nativePreset.compiler.mangleSelectors = !watchFiles;

// Match n:class attributes
nativePreset.compiler.selectorsAreas = [
    '(?:^|\\s+)n:class="([^"]+)"',
    '(?:^|\\s+)n:class=\'([^\']+)\''
];

const bundler = new Bundler({
    compiler: nativePreset.compiler,
    watchFiles: watchFiles
});

bundler.bundle([
    {
        files: ['./app/Presenters/templates/@layout.latte'],
        outputFile: './www/static/css/layout.css'
    },
    {
        files: ['./app/Presenters/templates/Homepage/default.latte'],
        outputFile: './www/static/css/homepage.css'
    }
]);
Enter fullscreen mode Exit fullscreen mode

This config above will generate two bundles:

  • Layout - used globally
  • Homepage - only for the homepage

We could of course generate css for the whole project into one file. But it would make the css unnecessary larger.

Now open the package.json file and add the following scripts:

"scripts": {
    "build": "node bundles.js",
    "watch": "node bundles.js --w"
}
Enter fullscreen mode Exit fullscreen mode

The last step is to edit the templates. Open the App/Presenters/Templates/@layout.latte and add the link to layout css file:

<link rel="stylesheet" href="/static/css/layout.css">
Enter fullscreen mode Exit fullscreen mode

In the App/Presenters/Templates/Homepage/default.latte add the following:

{block content}
<link rel="stylesheet" href="/static/css/homepage.css">
<div class="font-size:48px text-align:center">
    Hello World!🎉
</div>
Enter fullscreen mode Exit fullscreen mode

If you run the yarn watch, Stylify will generate css and will watch any file for change.

Components

To avoid bloated templates with utilities, you can configure
components directly in files, where they are used using content options (expects javascript object without brackets) or in the compiler config.

First, let's add the global container component. Open the bundles.js, and the following:

nativePreset.compiler.components = {
    container: 'max-width:1024px margin:0__auto'
}

const bundler = new Bundler({ /*...*/ });
Enter fullscreen mode Exit fullscreen mode

Now we can use it in the whole project. In our case, we add it to the layout:

<main class="container">{include content}</main>
Enter fullscreen mode Exit fullscreen mode

In the homepage, we can add a local component for the title using content options:

{*
    stylify-components
        title: 'font-size:48px text-align:center'
    /stylify-components
*}

{block content}
<link rel="stylesheet" href="/static/css/homepage.css">
<div class="title">Hello World!🎉</div>
Enter fullscreen mode Exit fullscreen mode

Variables

It's always a good idea to have a clean and flexible code without hardcoded values. Variables can be defined the same way as components. Let's modify the title component:

{*
    stylify-variables
        titleFontSize: '48px'
    /stylify-variables

    stylify-components
        title: 'font-size:$titleFontSize text-align:center'
    /stylify-components
*}

{block content}
{* ... *}
Enter fullscreen mode Exit fullscreen mode

Mapping files

When a template includes a component or a nested template part, we can add it to the bundle using stylify-files option.

Let's create the _content.latte template part next to the default.latte with the following content:

{*
    stylify-components
        title: 'font-size:$titleFontSize text-align:center'
    /stylify-components
*}
<div class="title">Hello World!🎉</div>
Enter fullscreen mode Exit fullscreen mode

The Homepage/default.latte then informs the bundler about external paths using stylify-files option that expects paths separated by a space or a new line:

{*
...
stylify-files
    ./_content.latte
/stylify-files
*}

{block content}
{include './_content.latte'}
Enter fullscreen mode Exit fullscreen mode

The content in the ./_content.latte is automatically processed by the bundler.

🔥 Production build

If you run yarn build, the selectors will be shrinked and the css minified:

@layout.latte:

<main class="_7tcrv">{include content}</main>
Enter fullscreen mode Exit fullscreen mode

_content.latte:

<div class="_88io">Hello World!🎉</div>
Enter fullscreen mode Exit fullscreen mode

layout.css:

._0plj4,._7tcrv{max-width:1024px}
._m0vnad,._7tcrv{margin:0 auto}
Enter fullscreen mode Exit fullscreen mode

homepage.css:

:root {--titleFontSize: 48px;}
._k38ic,._88io{font-size:48px}
._1vegb8,._88io{text-align:center}
Enter fullscreen mode Exit fullscreen mode

Configure anything you need

The examples above doesn't include everything Stylify can do:

Feel free to checkout the docs to learn more 💎.


Stay in touch:
👉 @8machy
👉 @stylifycss
👉 stylifycss.com
👉 dev.to/machy8
👉 medium.com/@8machy

Top comments (0)