@spada/windicss-plugin-bsgrid

@spada/windicss-plugin-bsgrid

Bootstrap 5 barebone grid system for WindiCSS

Installation

npm i @spada/windicss-plugin-bsgrid -D

/* main.ts */
import { defineConfig } from "vite-plugin-windicss";
import BsGrid from "@spada/windicss-plugin-bsgrid";

export default defineConfig({
    ...
    plugins: [
        BsGrid({
            // Optional options
        })
    ]
    ...
});

This plugin generates the grid classes under the components layer, so you must include it such as:

/* main.ts */
import "virtual:windi-base.css";
import "virtual:windi-components.css"; <---
import "virtual:windi-utilities.css";

or just import the whole thing:

/* main.ts */
import "virtual:windi.css";

Remember to disable the core plugin of the default .container class:

// windi.config.ts
export default defineConfig({
	// ...
	corePlugins: {
		container: false,
	},
	// ...
});

Options

• gridColumns (default 12)
• gridGutterWidth (default 1.5rem)
• respectImportant (default true) to respect the windi config setting

Related

Heavily inspired by karolis-sh's tailwind-bootstrap-grid