https://github.com/mac-lisowski/zutre
UI components for Vue.js based on Spectre CSS Framework
https://github.com/mac-lisowski/zutre
spectre-css-framework vue vue-components vue-ui vue-ui-components vue-zutre zutre
Last synced: 9 months ago
JSON representation
UI components for Vue.js based on Spectre CSS Framework
- Host: GitHub
- URL: https://github.com/mac-lisowski/zutre
- Owner: mac-lisowski
- License: mit
- Created: 2018-11-27T23:40:44.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:27:50.000Z (over 3 years ago)
- Last Synced: 2024-04-23T23:06:40.421Z (about 2 years ago)
- Topics: spectre-css-framework, vue, vue-components, vue-ui, vue-ui-components, vue-zutre, zutre
- Language: Vue
- Homepage: https://maclisowski.github.io/zutre
- Size: 7.63 MB
- Stars: 38
- Watchers: 0
- Forks: 4
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Zutre [](https://www.npmjs.com/package/zutre) [](https://github.com/maclisowski/zutre)
[](https://github.com/maclisowski/zutre/issues)  [](https://snyk.io/test/github/maclisowski/zutre?targetFile=package.json) [](https://github.com/maclisowski/zutre/blob/master/LICENSE) [](https://gitHub.com/maclisowski/zutre/) [](https://twitter.com/maclisowski) [](https://www.npmjs.com/package/zutre)
#### NOTE: Project in development, do not use at production
**zutre** is a set of UI components for VueJS based on [Spectre CSS Framework](https://github.com/picturepan2/spectre) with some modifications and provided new features which are not available in Spectre.
Demo and documentation: [https://maclisowski.github.io/zutre/](https://maclisowski.github.io/zutre/)
If you want to see what is coming next, please see [Changelog](https://github.com/maclisowski/zutre/blob/master/CHANGELOG.md).
[](https://www.npmjs.com/package/zutre)
### Installation
In order to install and use **zutre** in your Vue app, you have to install it through npm:
```bash
npm install --save zutre
```
In your main js file import **zutre** and use it in your Vue instance
```js
import Vue from 'vue';
import Zutre from 'zutre';
Vue.use(Zutre);
```
Once it is done, you can use **zutre** components in your Vue project. For more informations, components examples and API please see **[documentation](https://maclisowski.github.io/zutre/)**.
### Zutre Components
* ### Elements
* [Tables](https://maclisowski.github.io/zutre/#/elements/table)
* [Buttons](https://maclisowski.github.io/zutre/#/elements/buttons)
* Forms
* [Input](https://maclisowski.github.io/zutre/#/elements/forms)
* [Select](https://maclisowski.github.io/zutre/#/elements/forms)
* [Radio](https://maclisowski.github.io/zutre/#/elements/forms)
* [Switch](https://maclisowski.github.io/zutre/#/elements/forms)
* [Checkbox](https://maclisowski.github.io/zutre/#/elements/forms)
* [Icons](https://maclisowski.github.io/zutre/#/elements/icons)
* [Labels](https://maclisowski.github.io/zutre/#/elements/label)
* [Code](https://maclisowski.github.io/zutre/#/elements/code)
* [Media](https://maclisowski.github.io/zutre/#/elements/media)
* ### Layout
* [Flexbox grid](https://maclisowski.github.io/zutre/#/layout/flexbox)
* [Responsive](https://maclisowski.github.io/zutre/#/layout/responsive)
* [Hero](https://maclisowski.github.io/zutre/#/layout/hero)
* [Navbar](https://maclisowski.github.io/zutre/#/layout/navbar)
* ### Components
* [Accordions](https://maclisowski.github.io/zutre/#/components/accordions)
* [Avatars](https://maclisowski.github.io/zutre/#/components/avatars)
* [Badges](https://maclisowski.github.io/zutre/#/components/badges)
* [Bars](https://maclisowski.github.io/zutre/#/components/bars)
* [Breadcrumbs](https://maclisowski.github.io/zutre/#/components/breadcrumbs)
* [Cards](https://maclisowski.github.io/zutre/#/components/cards)
* [Chips](https://maclisowski.github.io/zutre/#/components/chips)
* [Drawer](https://maclisowski.github.io/zutre/#/components/drawer)
* [Empty states](https://maclisowski.github.io/zutre/#/components/empty-states)
* [Menu](https://maclisowski.github.io/zutre/#/components/menu)
* [Modals](https://maclisowski.github.io/zutre/#/components/modals)
* [Nav](https://maclisowski.github.io/zutre/#/components/nav)
* [Pagination](https://maclisowski.github.io/zutre/#/components/pagination)
* [Panels](https://maclisowski.github.io/zutre/#/components/panels)
* [Popovers](https://maclisowski.github.io/zutre/#/components/popovers)
* [Snackbar](https://maclisowski.github.io/zutre/#/components/snackbar)
* [Steps](https://maclisowski.github.io/zutre/#/components/steps)
* [Tabs](https://maclisowski.github.io/zutre/#/components/tabs)
* [Tiles](https://maclisowski.github.io/zutre/#/components/tiles)
* [Toasts](https://maclisowski.github.io/zutre/#/components/toasts)
* [Tooltips](https://maclisowski.github.io/zutre/#/components/tooltips)
* ### Utilities
* [Divider](https://maclisowski.github.io/zutre/#/utilities/divider)
* [Link](https://maclisowski.github.io/zutre/#/utilities/link)
---
## Developing
### Project setup
```
npm install
```
### Compiles and hot-reloads for development
Runs dev server with documentation
```
npm run serve
```
### Compiles and minifies for production
```
npm run build-bundle
```
### Compiles documentation
```
npm run build-docs
```
### Run your tests
```
npm run test
```
### Lints and fixes files
```
npm run lint
```
### Run your unit tests
```
npm run test:unit
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
---
## Roadmap
* Release beta version 0.1.3-beta - supporting all features from Spectre CSS Framework
* Release production version 0.1.3
* Develop **zutre.css** Framework due lack of support for Spectre
* Release version 0.1.4-beta - integrate **zutre.css**, drop Spectre
* Release production ready version 1.0.0
## Contributors
Please let me know if you would like to contribute to this project.
## License
This package is under MIT License (MIT). Please see LICENSE file for more details.
Copyright (c) 2018 Maciej Lisowski