sgr

svelte-grid-responsive

Responsive grid system based on Bootstrap for Svelte

Showing:

Popularity

Downloads/wk

18

GitHub Stars

19

Maintenance

Last Commit

1mo ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Svelte Grid

Readme

Svelte Grid Responsive

npm versionLicense: MITBuild StatusNetlify Status

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.

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:

<script>
  import Grid from "svelte-grid-responsive";
</script>

<Grid container gutter={12}>
  <Grid xs={12} md={4} lg={3}>
    xs=12 md=4 lg=3
  </Grid>
  <Grid xs={12} md={4} lg={3}>
    xs=12 md=4 lg=3
  </Grid>
  <Grid xs={12} md={4} lg={3}>
    xs=12 md=4 lg=3
  </Grid>
  <Grid xs={12} md={4} lg={3}>
    xs=12 md=4 lg=3
  </Grid>
</Grid>

Properties

Component props:

PropDefaultTypeDescription
containerfalseboolDefines whether the grid is a container
gutternullnumberGrid spacing in the container
columns12numberSetting columns count in the container
ordernullnumberOrder the columns
xsnullnumberSize in extra small screen
smnullnumberSize in small screen
mdnullnumberSize in medium screen
lgnullnumberSize in large screen
xlnullnumberSize in extra large screen
xsOffsetnullnumberOffset in extra small screen
smOffsetnullnumberOffset in small screen
mdOffsetnullnumberOffset in medium screen
lgOffsetnullnumberOffset in large screen
xlOffsetnullnumberOffset in extra large screen

NPM Statistics

Download stats for this NPM package

NPM

License

Svelte Grid Responsive is open source software licensed as MIT.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial