README

Estilo for Laravel

Manage your CSS in PHP and easily use it on Blade

Warning

This package is not stable yet, and breaking changes can be added even in minor versions before it reaches v1.0.0

Features

Create CSS styles in PHP in a fluent way.
Easily add the CSS styles you want in Blade files with the @estilo directive.
Group styles together with tags and include only the needed ones with @estilo(['tag_1', 'tag_2']).
The package provides hints for hundreds of CSS properties via the @method annotation to help you write your styles.

Installation

composer require wendelladriel/laravel-estilo

Defining Styles

Publish the config file:

php artisan vendor:publish --provider="WendellAdriel\Estilo\Providers\EstiloServiceProvider" --tag=config

The config file will be added to config/estilo.php. It might feel quite unusual from the common config files you see. Instead of returning an array with the values, we have this:

<?php

declare(strict_types=1);

use WendellAdriel\Estilo\CSS;
use WendellAdriel\Estilo\Estilo;

Estilo::define(
    selector: '.main-title',
    css: CSS::make()
        ->color('red')
        ->fontSize('20px'),
    tags: ['common', 'headers'],
);

Estilo::define(
    selector: '#hero-title',
    css: CSS::make()
        ->color('blue')
        ->fontSize('30px'),
    tags: ['headers'],
);

Estilo::define(
    selector: 'a',
    css: CSS::make()
        ->color('green')
        ->borderBottom('1px', 'dashed', 'green'),
);

return [];

Each time you call Estilo::define() you create a style definition. You can use any CSS selector that you would: classes, tags, ids, etc.

If you need the value to be wrapped in quotes, add double quotes when defining:

Estilo::define(
    selector: 'p',
    css: CSS::make()
        ->fontFamily('"Monaspace Neon", sans-serif'),
    tags: ['typograph'],

Tagging Styles

You can pass a 3rd parameter to the Estilo::define() that's an array of tags. This is especially powerful to create different stylesheets for your application.

Adding Styles to Blade

When you need to use any CSS generated with Estilo in your Blade files, you can use the @estilo directive, by adding it to the <head> tag of your page:

This will load ALL the styles created with Estilo to your Blade file:

<head>
    <!-- Other content here -->
    @estilo
</head>

This will load the styles tagged with the tags common and typograph:

<head>
    <!-- Other content here -->
    @estilo(['common', 'typograph'])
</head>

When you add the @estilo directive, it will create a <style> tag with all the styles that are needed.

For example, this:

Estilo::define(
    selector: '.main-title',
    css: CSS::make()
        ->color('red')
        ->fontSize('20px'),
    tags: ['common', 'headers'],
);

Estilo::define(
    selector: '#hero-title',
    css: CSS::make()
        ->color('blue')
        ->fontSize('30px'),
    tags: ['headers'],
);

Estilo::define(
    selector: 'a',
    css: CSS::make()
        ->color('green')
        ->borderBottom('1px', 'dashed', 'green'),
);

Will generate this:

<style>
    .main-title { color: red; font-size: 20px; }
    #hero-title { color: blue; font-size: 30px; }
    a { color: green; border-bottom: 1px dashed green; }
</style>

Credits

Contributing

Check the Contributing Guide.

wendelladriel / laravel-estilo

Maintainers

Details