Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 8, 2022 10:02 am GMT

Stylify CSS: Code your Laravel website faster with CSS-like utilities

Code your Laravel website faster with Stylify CSS-like utilities. Don't study CSS framework. Focus on coding.

Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

  • CSS-like selectors
  • No framework to study
  • Less time spent in docs
  • Mangled & Extremely small CSS
  • No purge needed
  • Components, Variables, Custom selectors
  • It can generate multiple CSS bundles

Installation

This article uses Laravel with Vite. For older versions with Webpack, check out this guide.

Install Stylify using CLI:

npm i -D @stylify/unpluginyarn add -D @stylify/unplugin

Add the following configuration into vite.config.js:

import { defineConfig } from 'vite';import { stylifyVite } from '@stylify/unplugin';const stylifyPlugin = stylifyVite({    // You can define multiple bundles, This example uses only one for simplicity    bundles: [{ files: ['resources/views/**/*.blade.php'], outputFile: 'resources/css/stylify.css' }],    // Optional - https://stylifycss.com/docs/unplugin    compiler: {        // https://stylifycss.com/docs/stylify/compiler#variables        variables: {},        // https://stylifycss.com/docs/stylify/compiler#macros        macros: {},        // https://stylifycss.com/docs/stylify/compiler#components        components: {},        // ...    }});export default defineConfig(() => ({    plugins: [        stylifyPlugin,        laravel({            // Add path to generated files            input: ['resources/js/app.js', 'resources/css/stylify.css'],            refresh: true,        }),    ],}));

Add the path to resources/css/stylify.css into the template:

<head>    @vite('resources/css/stylify.css')</head>

In case you define more than one bundle in stylifyVite plugin, make sure to import generated CSS files on correct pages.

Usage

Stylify syntax is similar to CSS. You just write _ instead of a space and ^ instead of a quote.

So if we edit the resources/views/welcome.blade.php:

<div class="text-align:center font-size:48px color:blue">Stylify + Laravel = </div>

In production, you will get optimized CSS and mangled HTML:

<div class="a b c">Stylify + Laravel = </div>
.a{text-align:center}.b{font-size:48px}.c{color:blue}

Integration example

You can also check out our Laravel integration example on Github.

Configuration

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

Feel free to check out the docs to learn more .


Original Link: https://dev.to/machy8/stylify-css-code-your-laravel-website-faster-with-css-like-utilities-15ep

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To