├── .babelrc ├── .github └── workflows │ ├── nodejs.yml │ └── npmpublish.yml ├── .gitignore ├── .nvmrc ├── .prettierrc ├── LICENSE ├── README.md ├── package.json ├── public ├── favicon.png ├── global.css └── index.html ├── rollup.config.js ├── src ├── dev │ ├── App.svelte │ ├── examples │ │ ├── ChangingGutter.svelte │ │ ├── ColumnOrdering.svelte │ │ ├── Offset.svelte │ │ ├── SettingColumnsCount.svelte │ │ ├── SpecifyingSizes.svelte │ │ └── WithoutSizes.svelte │ ├── global.d.ts │ └── main.ts └── lib │ ├── Grid.svelte │ ├── Grid.test.js │ └── stores.js ├── svelte.config.js ├── tsconfig.json └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]] 3 | } 4 | -------------------------------------------------------------------------------- /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | name: Node.js CI 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | build_test: 7 | runs-on: ${{ matrix.os }} 8 | strategy: 9 | matrix: 10 | node-version: [12, 14] 11 | os: [ubuntu-latest, windows-latest, macOS-latest] 12 | steps: 13 | - uses: actions/checkout@v2 14 | - name: Use Node.js ${{ matrix.node-version }} 15 | uses: actions/setup-node@v1 16 | with: 17 | node-version: ${{ matrix.node-version }} 18 | - name: Install dependencies 19 | run: yarn install --frozen-lockfile 20 | - name: Tests and coverage 21 | run: yarn coverage 22 | - name: Build 23 | run: yarn build 24 | -------------------------------------------------------------------------------- /.github/workflows/npmpublish.yml: -------------------------------------------------------------------------------- 1 | name: Node.js Package 2 | 3 | on: 4 | release: 5 | types: [created] 6 | 7 | jobs: 8 | npm-publish: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2 12 | - uses: actions/setup-node@v1 13 | with: 14 | node-version: 12 15 | registry-url: https://registry.npmjs.org/ 16 | - name: Install dependencies 17 | run: yarn install --frozen-lockfile 18 | - name: Build 19 | run: yarn build 20 | - name: Npm publish 21 | run: npm publish --access public 22 | env: 23 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | build -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v14.15.0 -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { "singleQuote": true } 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 N.A.D.A. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelte Grid Responsive 2 | 3 | [![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) 4 | 5 | Responsive grid system based on Bootstrap for Svelte. 6 | 7 | ## Installation 8 | 9 | ``` 10 | npm i svelte-grid-responsive 11 | // OR 12 | yarn add svelte-grid-responsive 13 | ``` 14 | 15 | Note: to use this library in sapper, install as devDependency. See the [link](https://github.com/sveltejs/sapper-template#using-external-components). 16 | 17 | ## Demo [Link](https://svelte-grid-responsive.netlify.com/) 18 | 19 | Local demo: 20 | 21 | ``` 22 | git clone https://github.com/andrelmlins/svelte-grid-responsive.git 23 | cd svelte-grid-responsive 24 | npm install && npm run dev 25 | ``` 26 | 27 | ## Examples 28 | 29 | An example of how to use the library: 30 | 31 | ```svelte 32 | 35 | 36 | 37 | 38 | xs=12 md=4 lg=3 39 | 40 | 41 | xs=12 md=4 lg=3 42 | 43 | 44 | xs=12 md=4 lg=3 45 | 46 | 47 | xs=12 md=4 lg=3 48 | 49 | 50 | ``` 51 | 52 | ## Properties 53 | 54 | Component props: 55 | 56 | | Prop | Default | Type | Description | 57 | | --------- | ------- | ------ | --------------------------------------- | 58 | | container | false | bool | Defines whether the grid is a container | 59 | | gutter | null | number | Grid spacing in the container | 60 | | columns | 12 | number | Setting columns count in the container | 61 | | order | null | number | Order the columns | 62 | | xs | null | number | Size in extra small screen | 63 | | sm | null | number | Size in small screen | 64 | | md | null | number | Size in medium screen | 65 | | lg | null | number | Size in large screen | 66 | | xl | null | number | Size in extra large screen | 67 | | xsOffset | null | number | Offset in extra small screen | 68 | | smOffset | null | number | Offset in small screen | 69 | | mdOffset | null | number | Offset in medium screen | 70 | | lgOffset | null | number | Offset in large screen | 71 | | xlOffset | null | number | Offset in extra large screen | 72 | 73 | ## NPM Statistics 74 | 75 | Download stats for this NPM package 76 | 77 | [![NPM](https://nodei.co/npm/svelte-grid-responsive.png)](https://nodei.co/npm/svelte-grid-responsive/) 78 | 79 | ## License 80 | 81 | Svelte Grid Responsive is open source software [licensed as MIT](https://github.com/andrelmlins/svelte-grid-responsive/blob/master/LICENSE). 82 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-grid-responsive", 3 | "version": "1.2.4", 4 | "description": "Responsive grid system based on Bootstrap for Svelte", 5 | "repository": "https://github.com/andrelmlins/svelte-grid-responsive", 6 | "author": "André Lins (https://andrelmlins.github.io/)", 7 | "license": "MIT", 8 | "svelte": "dist/Grid.svelte", 9 | "module": "dist/index.mjs", 10 | "main": "dist/index.js", 11 | "types": "dist/index.d.ts", 12 | "homepage": "https://svelte-grid-responsive.netlify.com/", 13 | "private": false, 14 | "files": [ 15 | "dist", 16 | "README.md" 17 | ], 18 | "scripts": { 19 | "build": "rollup -c && npm run copy", 20 | "copy": "svelte-transpile-typescript -i src/lib/Grid.svelte -o dist/Grid.svelte && cp src/lib/stores.js dist/stores.js", 21 | "dev": "rollup -c -w", 22 | "start": "sirv public", 23 | "test": "jest src/lib", 24 | "coverage": "npm run test --coverage" 25 | }, 26 | "devDependencies": { 27 | "@babel/core": "^7.11.4", 28 | "@babel/preset-env": "^7.11.0", 29 | "@rollup/plugin-typescript": "^8.2.5", 30 | "@testing-library/jest-dom": "^5.11.4", 31 | "@testing-library/svelte": "^3.0.0", 32 | "@tsconfig/svelte": "^2.0.1", 33 | "babel-jest": "^26.3.0", 34 | "jest": "^26.4.2", 35 | "rollup": "^2.26.0", 36 | "rollup-plugin-commonjs": "^10.1.0", 37 | "rollup-plugin-livereload": "^2.0.0", 38 | "rollup-plugin-node-resolve": "^5.2.0", 39 | "rollup-plugin-svelte": "^6.0.0", 40 | "rollup-plugin-terser": "^7.0.0", 41 | "sirv-cli": "^1.0.0", 42 | "svelte": "^3.32.0", 43 | "svelte-dts": "^0.3.7", 44 | "svelte-highlight": "^3.2.0", 45 | "svelte-jester": "1.1.5", 46 | "svelte-preprocess": "^4.7.4", 47 | "svelte-transpile-typescript": "^0.1.2", 48 | "ts-jest": "^27.0.4", 49 | "tslib": "^2.3.0", 50 | "typescript": "^4.3.5" 51 | }, 52 | "bugs": { 53 | "url": "https://github.com/andrelmlins/svelte-grid-responsive/issues" 54 | }, 55 | "keywords": [ 56 | "svelte", 57 | "grid", 58 | "responsive", 59 | "bootstrap" 60 | ], 61 | "jest": { 62 | "setupFilesAfterEnv": [ 63 | "@testing-library/jest-dom/extend-expect" 64 | ], 65 | "transform": { 66 | "^.+\\.js$": "babel-jest", 67 | "^.+\\.svelte$": [ 68 | "svelte-jester", 69 | { 70 | "preprocess": true 71 | } 72 | ], 73 | "^.+\\.ts$": "ts-jest" 74 | }, 75 | "moduleFileExtensions": [ 76 | "js", 77 | "svelte" 78 | ] 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrelmlins/svelte-grid-responsive/7b9e92d35278634b1f9890a22859c05a20b35cb1/public/favicon.png -------------------------------------------------------------------------------- /public/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | #root { 4 | height: 100%; 5 | margin: 0; 6 | font-family: 'Roboto', sans-serif; 7 | } 8 | 9 | body { 10 | background-color: #eceff1; 11 | } 12 | 13 | .github-corner:hover .octo-arm { 14 | animation: octocat-wave 560ms ease-in-out; 15 | } 16 | @keyframes octocat-wave { 17 | 0%, 18 | 100% { 19 | transform: rotate(0); 20 | } 21 | 20%, 22 | 60% { 23 | transform: rotate(-25deg); 24 | } 25 | 40%, 26 | 80% { 27 | transform: rotate(10deg); 28 | } 29 | } 30 | @media (max-width: 500px) { 31 | .github-corner:hover .octo-arm { 32 | animation: none; 33 | } 34 | .github-corner .octo-arm { 35 | animation: octocat-wave 560ms ease-in-out; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte Grid Responsive 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 23 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import commonjs from 'rollup-plugin-commonjs'; 4 | import livereload from 'rollup-plugin-livereload'; 5 | import { terser } from 'rollup-plugin-terser'; 6 | import typescript from "@rollup/plugin-typescript"; 7 | import autoPreprocess from "svelte-preprocess"; 8 | import svelteDts from "svelte-dts"; 9 | import pkg from './package.json'; 10 | 11 | const production = !process.env.ROLLUP_WATCH; 12 | 13 | export default [ 14 | { 15 | input: 'src/dev/main.ts', 16 | output: { 17 | sourcemap: true, 18 | format: 'iife', 19 | name: 'app', 20 | file: 'public/build/bundle.js', 21 | }, 22 | plugins: [ 23 | svelte({ 24 | dev: !production, 25 | css: (css) => css.write("bundle.css"), 26 | preprocess: autoPreprocess(), 27 | }), 28 | typescript({ sourceMap: !production }), 29 | resolve({ 30 | browser: true, 31 | dedupe: (importee) => 32 | importee === 'svelte' || importee.startsWith('svelte/'), 33 | }), 34 | commonjs(), 35 | !production && serve(), 36 | !production && livereload('public'), 37 | production && terser(), 38 | ], 39 | watch: { clearScreen: false }, 40 | }, 41 | { 42 | input: 'src/lib/Grid.svelte', 43 | output: { file: pkg.main, format: 'umd', name: 'GridResponsive' }, 44 | plugins: [ 45 | svelte({ preprocess: autoPreprocess() }), 46 | typescript({ sourceMap: !production }), 47 | resolve(), 48 | commonjs(), 49 | ], 50 | }, 51 | { 52 | input: 'src/lib/Grid.svelte', 53 | output: { file: pkg.module, format: 'es' }, 54 | external: ['svelte/internal'], 55 | plugins: [ 56 | svelteDts({ output: pkg.types }), 57 | svelte({ preprocess: autoPreprocess() }), 58 | typescript({ sourceMap: !production }), 59 | commonjs(), 60 | ], 61 | }, 62 | ]; 63 | 64 | function serve() { 65 | let started = false; 66 | 67 | return { 68 | writeBundle() { 69 | if (!started) { 70 | started = true; 71 | 72 | require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 73 | stdio: ['ignore', 'inherit', 'inherit'], 74 | shell: true, 75 | }); 76 | } 77 | }, 78 | }; 79 | } 80 | -------------------------------------------------------------------------------- /src/dev/App.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | {@html theme} 13 | 14 | 15 |
16 |

Svelte Grid Responsive

17 |

Responsive grid system based on Bootstrap for Svelte

18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 65 | -------------------------------------------------------------------------------- /src/dev/examples/ChangingGutter.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
21 |

Changing gutter

22 |
23 | 24 | 25 |
xs=12 md=4 lg=3
26 | 27 | 28 |
xs=12 md=4 lg=3
29 | 30 | 31 |
xs=12 md=4 lg=3
32 | 33 | 34 |
xs=12 md=4 lg=3
35 | 36 | 37 |
38 | 39 |
40 | -------------------------------------------------------------------------------- /src/dev/examples/ColumnOrdering.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 |
20 |

Column ordering

21 |
22 | 23 | 24 |
First, but second
25 | 26 | 27 |
Second, but last
28 | 29 | 30 |
Third, but unordered
31 | 32 | 33 |
34 | 35 |
36 | -------------------------------------------------------------------------------- /src/dev/examples/Offset.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 |
20 |

Offset

21 |
22 | 23 | 24 |
xs=12 md=4 lg=3
25 | 26 | 27 |
xs=12 md=4 lg=3 lgOffset=3 mdOffset=4
28 | 29 | 30 |
xs=12 lg=6 lgOffset=6 mdOffset=4
31 | 32 | 33 |
34 | 35 |
36 | -------------------------------------------------------------------------------- /src/dev/examples/SettingColumnsCount.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 |
25 |

Setting columns count

26 |
27 | 28 | 29 |
xs=10 md=5 lg=2
30 | 31 | 32 |
xs=10 md=5 lg=2
33 | 34 | 35 |
xs=10 md=5 lg=2
36 | 37 | 38 |
xs=10 md=5 lg=2
39 | 40 | 41 |
xs=10 md=5 lg=2
42 | 43 | 44 |
xs=10 lg=3
45 | 46 | 47 |
xs=10 lg=4
48 | 49 | 50 |
xs=10 lg=3
51 | 52 | 53 |
54 | 55 |
56 | -------------------------------------------------------------------------------- /src/dev/examples/SpecifyingSizes.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 |
26 |

Specifying sizes

27 |
28 | 29 | 30 |
xs=12 md=4 lg=3
31 | 32 | 33 |
xs=12 md=4 lg=3
34 | 35 | 36 |
xs=12 md=4 lg=3
37 | 38 | 39 |
xs=12 md=4 lg=3
40 | 41 | 42 |
xs=12 lg=6
43 | 44 | 45 |
xs=12 lg=6
46 | 47 | 48 |
lg=4
49 | 50 | 51 |
lg=4
52 | 53 | 54 |
lg=4
55 | 56 | 57 |
58 | 59 |
60 | -------------------------------------------------------------------------------- /src/dev/examples/WithoutSizes.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 |
27 |

Without define sizes

28 |
29 | 30 | 31 |
col
32 | 33 | 34 |
col
35 | 36 | 37 |
col
38 | 39 | 40 | 41 | 42 |
col
43 | 44 | 45 |
col
46 | 47 | 48 |
col
49 | 50 | 51 |
col
52 | 53 | 54 |
col
55 | 56 | 57 |
58 | 59 |
60 | -------------------------------------------------------------------------------- /src/dev/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'svelte-highlight/src/styles/dracula.js'; 2 | -------------------------------------------------------------------------------- /src/dev/main.ts: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ target: document.body }); 4 | 5 | export default app; 6 | -------------------------------------------------------------------------------- /src/lib/Grid.svelte: -------------------------------------------------------------------------------- 1 | 107 | 108 |
109 | 110 |
111 | 112 | 177 | -------------------------------------------------------------------------------- /src/lib/Grid.test.js: -------------------------------------------------------------------------------- 1 | import { render } from '@testing-library/svelte'; 2 | 3 | import Grid from './Grid.svelte'; 4 | 5 | test('shows proper heading when rendered', () => { 6 | const { container } = render(Grid); 7 | 8 | expect(container.firstChild).not.toBe(null); 9 | }); 10 | -------------------------------------------------------------------------------- /src/lib/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export const columnsStore = writable(12); 4 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | const sveltePreprocess = require('svelte-preprocess'); 2 | 3 | module.exports = { 4 | preprocess: sveltePreprocess(), 5 | }; 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "include": ["src/**/*"], 4 | "compilerOptions": { 5 | "module": "esNext", 6 | "target": "esnext", 7 | "moduleResolution": "node", 8 | "strict": true, 9 | "types": ["svelte"] 10 | }, 11 | "exclude": ["node_modules/*", "public/*"] 12 | } 13 | --------------------------------------------------------------------------------