Vanilla Grid

Vanilla Grid is a flexible and customizable grid system for Vue.js applications. It provides a rich set of UI components to help you create responsive layouts easily.

Download

Vanilla Grid is available at npm.

Getting started

# Using npm
npm install @vanilla-pdmfc/components

# Using yarn
yarn add @vanilla-pdmfc/components

# Using pnpm
pnpm add @vanilla-pdmfc/components

After installing the component, make sure you have Tailwind CSS and configurations added to your project. Then run the following command:

npx safelist

This command will add a necessary safe list to your tailwind.config

Documentation

For detailed usage and examples, head to the Vanilla Grid Documentation.

Usage

Here's a simple example of how to use Vanilla Grid:

<template>
  <Grid grid columns="3" :spacing='2'>
	  <Item :colSpan='1'>
		  <slot />
	  </Item>
	  <Item :colSpan='2'>
		  <slot />
	  </Item>
	  <Item :colSpan='2'>
		  <slot />
	  </Item>
	  <Item :colSpan='1'>
		  <slot />
	  </Item>
  </Grid>
</template>

<script>
	import { Grid, Item} from  '@vanilla-pdmfc/components'
</script>

This example creates a simple grid layout with three columns. You can adjust the number of columns and their sizes according to your needs.

License

Copyright (c) 2015-present Razvan Stoenescu

MIT License