Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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

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

bootstrap grid responsive svelte

Last synced: 1 day ago
JSON representation

Responsive grid system based on Bootstrap for Svelte

Host: GitHub
URL: https://github.com/andrelmlins/svelte-grid-responsive
Owner: andrelmlins
License: mit
Created: 2020-04-19T20:51:02.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-01-07T04:55:47.000Z (almost 2 years ago)
Last Synced: 2024-10-06T06:53:47.492Z (about 1 month ago)
Topics: bootstrap, grid, responsive, svelte
Language: Svelte
Homepage: https://svelte-grid-responsive.netlify.app/
Size: 558 KB
Stars: 55
Watchers: 3
Forks: 4
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-svelte - Svelte Grid Responsive - Sistema de grid responsivo baseado no Bootstrap. (UI Componentes / Comunidade Global)
awesome-svelte - svelte-grid-responsive - Bootstrap-inspired responsive grid system. (UI Components / Grid)

README

        # Svelte Grid Responsive

[![npm version](https://badge.fury.io/js/svelte-grid-responsive.svg)](https://www.npmjs.com/package/svelte-grid-responsive) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/andrelmlins/svelte-grid-responsive/blob/master/LICENSE) • [![Build Status](https://travis-ci.com/andrelmlins/svelte-grid-responsive.svg?branch=master)](https://travis-ci.com/andrelmlins/svelte-grid-responsive) • [![Netlify Status](https://api.netlify.com/api/v1/badges/5697d9ca-6dcc-4839-99d1-fd0aca0e852c/deploy-status)](https://app.netlify.com/sites/svelte-grid-responsive/deploys)

Responsive grid system based on Bootstrap for Svelte.

## Installation

```

npm i svelte-grid-responsive

// OR

yarn add svelte-grid-responsive

```

Note: to use this library in sapper, install as devDependency. See the [link](https://github.com/sveltejs/sapper-template#using-external-components).

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

Local demo:

```

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

cd svelte-grid-responsive

npm install && npm run dev

```

## Examples

An example of how to use the library:

```svelte

  import Grid from "svelte-grid-responsive";

  

    xs=12 md=4 lg=3

  

  

    xs=12 md=4 lg=3

  

  

    xs=12 md=4 lg=3

  

  

    xs=12 md=4 lg=3

  

```

## Properties

Component props:

| Prop      | Default | Type   | Description                             |

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

| container | false   | bool   | Defines whether the grid is a container |

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

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

| order     | null    | number | Order the columns                       |

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

| sm        | null    | number | Size in small screen                    |

| md        | null    | number | Size in medium screen                   |

| lg        | null    | number | Size in large screen                    |

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

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

| smOffset  | null    | number | Offset in small screen                  |

| mdOffset  | null    | number | Offset in medium screen                 |

| lgOffset  | null    | number | Offset in large screen                  |

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

## NPM Statistics

Download stats for this NPM package

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

## License

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