https://github.com/cbl/blade-style

A package to easily minify styles and make use of sass, less, etc. in your Blade components.
https://github.com/cbl/blade-style

Last synced: 2 months ago
JSON representation

A package to easily minify styles and make use of sass, less, etc. in your Blade components.

• Host: GitHub
• URL: https://github.com/cbl/blade-style
• Owner: cbl
• License: mit
• Created: 2020-06-13T21:24:43.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-05-13T09:18:56.000Z (8 months ago)
• Last Synced: 2024-10-11T07:10:02.400Z (3 months ago)
• Language: PHP
• Homepage:
• Size: 90.8 KB
• Stars: 18
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Blade Style



	

	



A package to easily minify styles and make use of sass, less, etc in your blade

components.

```php

{{ $slot }}

.btn{

    height: 2rem;

    line-height: 2rem;

    border-radius:3px;

}

```

## Introduction

Already some javascript frameworks (e.g. [Vue](https://vuejs.org/)) brought an

architecture where styles and html markup could be written in the same file.

This design pattern is a considerable simplification of the workflow in frontend

development.

With blade styles there is no need to run a compiler when working on your

styles. Also, only the styles of required blade components are included. This

saves you from loading large css files and the size can be reduced to a minimum.

## Compiler

Currently there is a `Sass` compiler for blade styles. If you want to build a

compiler for `Less` or `Stylus`, you can do so using the `Sass` package as an

example.

-   [Blade Style Sass](https://github.com/cbl/blade-style-sass)

## Installation

The package can be easily installed via composer.

```shell

composer require cbl/blade-style

```

now the necessary assets must be published. This includes the style.php config

and the storage folder where the compiled styles are stored.

```shell

php artisan vendor:publish --provider="BladeStyle\ServiceProvider"

```

## Include Styles

The blade component `x-styles` includes all required styles, so it may be placed

in the head.

```php

    ...

    

```

## Usage

Each blade view can contain exactly one `x-style` component. Your styles can

then be written inside the wrapper like so.

```php



.my-image{

    border: 1px solid #ccc;

    border-radius: 3px;

}

```

You can build reusable blade components:

```php

{{ $slot }}

.btn{

    height: 2rem;

    line-height: 2rem;

    border-radius:3px;

}

```

### Sass

You may set a CSS extension langauge in the `lang` attribute, like so:

```php

My Button

    $color: purple;

    .btn{

        background: $color;

    }

```

## Optimizing Styles

Blade styles share the same behavior as Views. As suggested in the

[View documentation](https://laravel.com/docs/7.x/views#optimizing-views), the

`style:cache` command can be added to your deployment workflow to ensure that

all styles are compiled and thus improve performance.

```shell

php artisan style:cache

```

You may use the `style:clear` command to clear the style cache:

```shell

php artisan style:clear

```