Packages

Theme by Stylify

|

Updated: 12 Apr 2024

|

429 Stars

Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write .

Categories

Overview

Stylify is a library that aims to simplify CSS styling by using CSS-like selectors to dynamically generate utility-first CSS. It allows users to define variables, components, and custom selectors, making coding faster and more optimized. Stylify focuses on coding rather than studying complex frameworks, offering features that aim to reduce CSS headaches and improve efficiency.

Features

• Define Variables, Components, Custom selectors
• Add custom macros like ml:2
• Inject variables into CSS as CSS variables
• Different CSS variables for each screen
• Helpers like color:lighten(#000,10) for simplified coding
• Style any device with dynamic screens
• Mark areas for which CSS should not be applied
• Split bundles for page/layout/component
• Minified selectors for optimized output
• No need for purge as CSS is generated only when something is matched
• Components & Custom selectors attached to utilities for efficient styling
• Hooks to modify CSS or output
• Mangled HTML classes in production if mangled
• Works with frameworks like Next.js, Astro, SolidJS, etc.
• Compatible with bundlers like Webpack, Rollup, Vite.js
• Generated CSS usable within SCSS, Less, Stylus
• Export CSS variables into an external file for reuse

Installation

To start using Stylify with your project, follow these steps:

1. Install Stylify package:

npm install stylify

2. Import Stylify into your JavaScript or PHP file:

import Stylify from 'stylify';

3. Begin using Stylify to simplify your CSS styling process.

Summary

Stylify is a library designed for developers who want to streamline their CSS styling process without delving into complex frameworks. With features like defining variables, custom selectors, and dynamic screens, Stylify offers a more efficient and optimized way to write CSS. It integrates well with various tools and frameworks, making it a versatile choice for modern web development projects.