Hero text

` element. Variables in Grimoire CSS offer a simple and effective way to maintain consistency across your styles, while keeping your code flexible and DRY (Don’t Repeat Yourself). ### Built-in Areas: Responsive Design, Simplified Grimoire CSS follows a mobile-first approach and comes with **built-in responsive areas**, including `sm`, `md`, `lg`, `xl`, and `2xl`. When you define a spell with one of these areas, like `md__w=100px`, the spell will apply only when the screen width is equal to or greater than the specified area. For example, `md__w=100px` is equivalent to this media query: `(width>=768px)__w=100px`. Of course, you’re not limited to the built-in areas. You can define your own media queries just as easily, like this: ```css (width>666px)__w=100px ``` With these areas, you have full control over your responsive design, but without the hassle of constantly writing and rewriting media queries. ### Adaptive Size Functions: `mrs` and `mfs` Grimoire CSS takes responsive design even further with built-in functions like `mrs` (Make Responsive Size) and `mfs` (Make Fluid Size, coming soon). These functions allow you to adapt font sizes, widths, and more based on the viewport size. #### `mrs`: Make Responsive Size This function dynamically adjusts the size of an element between a minimum and maximum value, depending on the viewport width. Here are the arguments: - `min_size`: The minimum size for the element. - `max_size`: The maximum size for the element. - `min_vw`: (Optional) The minimum viewport width. - `max_vw`: (Optional) The maximum viewport width. #### Example Usage ```html

Font size of this text will dynamically change based on the screen size

``` In this example, the font size will automatically adjust between 12px and 36px, depending on the screen size, with fluid adjustments in between. This makes responsive design not only easier but more precise, without the need for complex calculations or multiple breakpoints. ### The Power of Grimoire’s Variables and Functions With Grimoire CSS, you don’t just write styles - you take control of them. By leveraging variables, responsive areas, and adaptive size functions, you can make your CSS dynamic, scalable, and ready for any device or screen size. It’s flexibility without the fuss, and it’s all built right in. ## CSS Optimization: Minification, Vendor Prefixes, and Deduplication - All with CSS Cascade in Mind Grimoire CSS takes optimization seriously. It generates only the CSS that’s actually used, and it monitors for duplicates right from the start, ensuring no unnecessary styles sneak through. This happens at the very **early stages** of generation, so by the time the process finishes, you’ve got a lean, clean stylesheet. But it doesn’t stop there. Grimoire CSS integrates **LightningCSS** to take your code to the next level: - **Minification**: It shrinks your CSS without sacrificing readability or maintainability. - **Vendor Prefixes**: Automatically adds necessary prefixes for cross-browser compatibility, and even generates a `.browserlistrc` file using 'defaults' if you don’t already have one. - **Deduplication**: Duplicate CSS? Not here. Grimoire keeps a close watch and ensures that only the needed CSS is generated. All of this happens while preserving the **CSS cascade** - no unintentional overwrites, no broken styles. Just clean, optimized CSS that’s ready for any environment. ## Performance-Driven by Rust Grimoire CSS is written entirely in **Rust**, a language designed for high performance. But we didn’t stop at Rust’s natural speed. Grimoire CSS is built with a commitment to efficiency, ensuring your CSS generation is fast, scalable, and precise. ## Language-Agnostic Parser: Extracting Spells from Any File, Any Format Grimoire CSS isn’t just tied to traditional CSS, JavaScript, or HTML files. The beauty of its **language-agnostic parser** is that it can parse spells from any file or extension. Whether you’re working with `.html`, `.tsx`, `.mdx`, or something else entirely, Grimoire CSS can handle it. This means you’re not limited by file types or formats - you define the `inputPaths`, and Grimoire CSS takes care of the rest. Whether your project is built with React, Vue, or something entirely different, Grimoire CSS seamlessly integrates and extracts the styles you need. ### Spells in Plain Text with Template Syntax If you want to use spells outside the traditional `class` or `className` attributes, Grimoire CSS provides a clever solution with its **template syntax**: `g!;`. This syntax lets you wrap your spell in a template, enabling the parser to collect spells from any text-based content. Let’s say you have both a classic spell and a templated spell that are essentially the same. Don’t worry - Grimoire CSS is smart enough to combine them into one, as long as it doesn’t affect the CSS cascade. The result? Clean, efficient CSS output like this: ```css .classic, .templated { /* CSS declaration */ } ``` This flexibility means you can integrate Grimoire CSS in non-traditional environments, using it across various file types and even in plain text. It's not just tied to the web - it’s ready for any project, anywhere. ## A Streamlined CLI with a Strict and Straightforward API Grimoire CSS comes with a minimal but powerful **CLI** (Command Line Interface) that’s designed for simplicity and efficiency. Whether you’re integrating it into your build process or running it manually, the CLI gets the job done without unnecessary complexity. There are only two commands you need to know: - **`init`**: Initializes your Grimoire CSS configuration, either by loading an existing config or generating a new one if none is found. This is your starting point. - **`build`**: Kicks off the build process, parsing all your input files and generating the compiled CSS. If you haven’t already run `init`, the `build` command will handle that for you automatically. Grimoire CSS’s CLI is built for developers who want power without bloat. It’s direct, no-nonsense, and integrates smoothly into any project or bundler. Here’s a refined version of the remaining parts, keeping the technical depth and making them more engaging and polished: ## Easy Migration with Grimoire CSS Transmute (gcsst) Utility Migrating to Grimoire CSS is simple, thanks to the Grimoire CSS Transmute utility, also known as **gcsst**. This CLI tool takes the paths of your built CSS files (or the content of built CSS if you’re working in a web environment) and returns a transmuted.json file in the following format: ```json { "classes": [ { "name": "old-class-name", "spells": ["spell-1", "spell-2"], "oneliner": "spell-1 spell-2" } ] } ``` **gcsst** parses the existing CSS and automatically generates corresponding spells for each class. One of the standout features of **gcsst** is the structure of the **transmuted.json** file, particularly the classes property. It’s designed to look like the structure of a scroll, except for the `oneliner` property. This makes it incredibly easy to create a scroll or copy-paste the single-line class into your component with minimal effort. By simplifying the migration process, **gcsst** helps you move to Grimoire CSS without hassle, and you can instantly start leveraging the power of spells. Explore the [gcsst](https://github.com/persevie/grimoire-css-transmute) repository or try it [online](https://gcsst-ui-zocg.shuttle.app). ## Usage and Distribution Grimoire CSS is built to integrate seamlessly into a wide range of ecosystems. It’s distributed in three ways to give you maximum flexibility: - **Single Executable Application**: A standalone binary for those who prefer a direct, no-nonsense approach. - **NPM Library**: A Node.js-compatible interface, perfect for JavaScript and web developers. - gcssjs - bin/cli versions [repo](https://github.com/persevie/grimoire-css-js) - webpack/rollup/vite plugins [repo](https://github.com/persevie/grimoire-css-js/tree/main/plugins) - **Rust Crate**: For developers building in Rust or those who want to integrate Grimoire CSS at the system level. The core of Grimoire CSS is architected entirely in Rust, ensuring top-notch performance and scalability. The main repository compiles both into a standalone executable (SEA) and a Rust crate, meaning you can use it in different environments with ease. The `grimoire-css-js` takes the core crate and wraps it into a Node.js-compatible interface, which is then compiled into an npm package. Whether you’re working with Rust, Node.js, or need a direct CLI, Grimoire CSS is ready to integrate into your workflow and bring powerful CSS management wherever you need it. ### Installation **Rust crate:** If you’re using Rust, simply add Grimoire CSS to your Cargo.toml, and follow the link for documentation about crate: [docs.rs](https://docs.rs/grimoire_css/1.0.0). ```bash cargo install grimoire_css ``` **Single Executable Application (SEA):** 1. Download the binary for your operating system from the [releases page](https://github.com/persevie/grimoire-css/releases). 2. Add the binary to your system’s $PATH (optional for easier usage). **NPM Library:** ```bash npm i @persevie/gcssjs ``` **Once installed, you can run the following commands:** Initialize a Grimoire CSS config in your project: ```bash grimoire_css init ``` or if you are using NPM library: ```bash gcssjs init ``` Build your CSS using the Grimoire CSS config: ```bash grimoire_css build ``` or if you are using NPM library: ```bash gcssjs build ``` ## The Arcane Circle Grimoire CSS gives you the freedom to create styles that work exactly the way you want them to - no rigid rules or constraints. Whether you’re crafting dynamic interactions or fine-tuning layouts, Grimoire adapts to your needs, making each step straightforward and rewarding. So, come join us. Share your work, exchange your thoughts, and help us keep pushing CSS to be more flexible and enjoyable. Together, we’re creating a space where writing styles is about mastery and craftsmanship, not about memorizing classes. Let’s see what we can build - one spell at a time. --- Craft Your Code, Cast Your Spells