Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/DesignRevision/shards-vue
🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.
https://github.com/DesignRevision/shards-vue
bootstrap components design designsystem free modern ui uikit vue
Last synced: 15 days ago
JSON representation
🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.
- Host: GitHub
- URL: https://github.com/DesignRevision/shards-vue
- Owner: DesignRevision
- License: mit
- Created: 2018-09-11T10:32:37.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T13:00:14.000Z (almost 2 years ago)
- Last Synced: 2024-05-03T03:52:29.671Z (6 months ago)
- Topics: bootstrap, components, design, designsystem, free, modern, ui, uikit, vue
- Language: Vue
- Homepage: https://designrevision.com/docs/shards-vue/
- Size: 1.83 MB
- Stars: 393
- Watchers: 7
- Forks: 40
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Shards Vue is a free, beautiful and modern Vue.js UI kit
based on Shards.
Documentation & Demo •
Official Page
### Getting Started
Getting started with Shards Vue is fairly simple. You can download Shards Vue via the official website, here on GitHub as a release package or by using a package manager such as Yarn or NPM.
* [Official Website](https://designrevision.com/download/shards-vue)
* [Release Package](https://github.com/DesignRevision/shards-vue/releases)
### Quick Start
You can install Shards Vue via Yarn or NPM.
```bash
// Install via Yarn
yarn add shards-vue
// Install via NPM
npm i shards-vue
```
### Module Bundlers
If you are using a module bundler such as [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/), you can include the entire Shards Vue library inside your project.
```javascript
import Vue from 'vue'
import ShardsVue from 'shards-vue'
// Import base styles (Bootstrap and Shards)
import 'bootstrap/dist/css/bootstrap.css'
import 'shards-ui/dist/css/shards.css'
Vue.use(ShardsVue);
```
### Registering Components as Vue Plugins
If you'd like to register only certain components as Vue plugins, make sure to import just the component you'd like to use.
```javascript
import Vue from 'vue'
// Import base styles (Bootstrap and Shards)
import 'bootstrap/dist/css/bootstrap.css'
import 'shards-ui/dist/css/shards.css'
import { Button } from 'shards-vue/src/components'
Vue.use(Button)
```
### Importing Single File Components
Importing single file components is also possible.
```vue
Click Me!
import dButton from 'shards-vue/src/components/button/Button'
export default {
components: {
dButton
},
methods: {
handleClick() {
alert('You just clicked me!')
}
}
}
```
### File Sizes
You can also run `yarn bundlesize` at any time to check the compiled file sizes.
| File Name | Size (min.gz) |
|--------------------------|---------------|
| shards-vue.common.min.js | 46.29KB |
| shards-vue.esm.min.js | 46.24KB |
| shards-vue.umd.min.js | 39.3KB |
### Built Using
* [Shards UI Kit](https://designrevision.com/downloads/shards/)
* [noUiSlider by Léon Gersen (WTFPL License)](https://refreshless.com/nouislider/download/)
* [vuejs-datepicker](https://github.com/charliekassel/vuejs-datepicker)
### Contributing
Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
If you'd like to fix a bug or work on a feature, make sure to follow the steps below in order to setup the development environment on your local machine:
1. Clone the repository.
2. Run `yarn` to install all required dependencies.
3. Install Vue CLI and the CLI service globally by running: `npm i -g @vue/cli @vue/cli-service-global` or `yarn global add @vue/cli-service-global`.
4. Run `yarn watch` in order to kickstart the server and run the sandbox with hot reloading.
5. Refer to the `sandbox/Sandbox.vue` file for more details.
### Roadmap
[View the roadmap.](http://designrevision.com/docs/shards-vue/roadmap)
### Changelog
[View notable changes.](CHANGELOG.md)