# @spada/windicss-plugin-bsgrid

> Bootstrap 5 barebone grid system for WindiCSS

Latest version **0.1.4** (published 2022-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @spada/windicss-plugin-bsgrid
pnpm add @spada/windicss-plugin-bsgrid
yarn add @spada/windicss-plugin-bsgrid
bun add @spada/windicss-plugin-bsgrid
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2022-03-18 |
| First published | 2022-03-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Nicola Spadari |
| Maintainers | nicolaspadari |
| Keywords | windicss, bootstrap, grid, plugin |

## Links

- npm: https://www.npmjs.com/package/@spada/windicss-plugin-bsgrid
- Repository: https://github.com/NicolaSpadari/windicss-plugin-bsgrid
- Issues: https://github.com/NicolaSpadari/windicss-plugin-bsgrid/issues
- npm.io page: https://npm.io/package/@spada/windicss-plugin-bsgrid

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.4 (latest) — 2022-03-18
- 0.1.3 — 2022-03-18
- 0.1.2 — 2022-03-18
- 0.1.1 — 2022-03-18
- 0.1.0 — 2022-03-18

## README

# @spada/windicss-plugin-bsgrid

[![License: MIT][license-badge]][license]

Bootstrap 5 barebone grid system for WindiCSS

## Installation

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

```js
/* 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:

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

or just import the whole thing:

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

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

```js
// 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](https://github.com/karolis-sh/tailwind-bootstrap-grid)

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg
[license]: https://opensource.org/licenses/MIT

---
_Source: https://npm.io/package/@spada/windicss-plugin-bsgrid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._