Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andrelmlins/vue-grid-responsive

Responsive grid system based on Bootstrap for Vue
https://github.com/andrelmlins/vue-grid-responsive

bootstrap grid responsive vue

Last synced: 1 day ago
JSON representation

Responsive grid system based on Bootstrap for Vue

Host: GitHub
URL: https://github.com/andrelmlins/vue-grid-responsive
Owner: andrelmlins
License: mit
Created: 2020-05-31T19:49:54.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2022-12-11T08:15:42.000Z (almost 2 years ago)
Last Synced: 2024-11-11T08:09:53.892Z (7 days ago)
Topics: bootstrap, grid, responsive, vue
Language: Vue
Homepage: https://vue-grid-responsive.netlify.app/
Size: 368 KB
Stars: 29
Watchers: 2
Forks: 10
Open Issues: 4
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        




Vue Grid Responsive


Responsive grid system based on Bootstrap for Vue.









[![npm version](https://badge.fury.io/js/vue-grid-responsive.svg)](https://www.npmjs.com/package/vue-grid-responsive) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/andrelmlins/vue-grid-responsive/blob/master/LICENSE) • [![Build Status](https://travis-ci.com/andrelmlins/vue-grid-responsive.svg?branch=master)](https://travis-ci.com/andrelmlins/vue-grid-responsive)

## Installation

### NPM

**vue 2.0**

```

npm i vue-grid-responsive

// OR

yarn add vue-grid-responsive

```

**vue 3.0**

```

npm i vue-grid-responsive@next

// OR

yarn add vue-grid-responsive@next

```

### CDN

**vue 2.0**

```html

```

**vue 3.0**

```html

```

### Manual

You can also download and import it manually

```html

```

## Module import

**vue 2.0**

```js

import Vue from 'vue';

import { Row, Column, Hidden } from 'vue-grid-responsive';

Vue.component('row', Row);

Vue.component('column', Column);

Vue.component('hidden', Hidden);

```

**vue 3.0**

```js

import { createApp } from 'vue';

import { Row, Column, Hidden } from 'vue-grid-responsive';

const app = createApp(App);

app.component('row', Row);

app.component('column', Column);

app.component('hidden', Hidden);

```

## Examples

An example of how to use the library:

```vue

  

     xs=12 md=4 lg=3 

     xs=12 md=4 lg=3 

     xs=12 md=4 lg=3 

     xs=12 md=4 lg=3 

  

```

An example how to use offset in addition with a columns:

```vue

  

     

  

```

Using the hidden component:

```vue

  


     hidden xs 

     hidden md 

     hidden xl 

  


```

## Demo [Link](https://vue-grid-responsive.netlify.com/)

Local demo:

```

git clone https://github.com/andrelmlins/vue-grid-responsive.git

cd vue-grid-responsive

npm && npm run dev

```

## Properties

Component props:

### Row Component props

| Prop    | Default | Type   | Description                            |

| ------- | ------- | ------ | -------------------------------------- |

| gutter  | -       | number | Grid spacing in the container          |

| columns | 12      | number | Setting columns count in the container |

### Column Component props

#### Basic Size

| Prop  | Default | Type   | Description                |

| ----- | ------- | ------ | -------------------------- |

| xs    | -       | number | Size in extra small screen |

| sm    | -       | number | Size in small screen       |

| md    | -       | number | Size in medium screen      |

| lg    | -       | number | Size in large screen       |

| xl    | -       | number | Size in extra large screen |

| order | -       | number | Order the columns          |

#### Offset

| Prop     | Default | Type   | Description                  |

| -------- | ------- | ------ | ---------------------------- |

| xsOffset | -       | number | Offset in extra small screen |

| smOffset | -       | number | Offset in small screen       |

| mdOffset | -       | number | Offset in medium screen      |

| lgOffset | -       | number | Offset in large screen       |

| xlOffset | -       | number | Offset in extra large screen |

### Hidden Component props

| Prop | Default | Type    | Description                |

| ---- | ------- | ------- | -------------------------- |

| xs   | -       | boolean | Hidden in extra small size |

| sm   | -       | boolean | Hidden in small size       |

| md   | -       | boolean | Hidden in medium size      |

| lg   | -       | boolean | Hidden in large size       |

| xl   | -       | boolean | Hidden in extra large size |

## NPM Statistics

Download stats for this NPM package

[![NPM](https://nodei.co/npm/vue-grid-responsive.png)](https://nodei.co/npm/vue-grid-responsive/)

## License

Vue Grid Responsive is open source software [licensed as MIT](https://github.com/andrelmlins/vue-grid-responsive/blob/master/LICENSE).