Zutre

NOTE: Project in development, do not use at production

zutre is a set of UI components for VueJS based on Spectre CSS Framework with some modifications and provided new features which are not available in Spectre.

Demo and documentation: https://maclisowski.github.io/zutre/

If you want to see what is coming next, please see Changelog.

Installation

In order to install and use zutre in your Vue app, you have to install it through npm:

npm install --save zutre

In your main js file import zutre and use it in your Vue instance

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.

Zutre Components

• Elements

  • Tables
  • Buttons
  • Forms
    • Input
    • Select
    • Radio
    • Switch
    • Checkbox
  • Icons
  • Labels
  • Code
  • Media

• Layout

  • Flexbox grid
  • Responsive
  • Hero
  • Navbar

• Components

  • Accordions
  • Avatars
  • Badges
  • Bars
  • Breadcrumbs
  • Cards
  • Chips
  • Drawer
  • Empty states
  • Menu
  • Modals
  • Nav
  • Pagination
  • Panels
  • Popovers
  • Snackbar
  • Steps
  • Tabs
  • Tiles
  • Toasts
  • Tooltips

• Utilities

  • Divider
  • 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.

---

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.

<a href="https://sourcerer.io/maclisowski" title="Maciej Lisowski"><img src="https://sourcerer.io/assets/avatar/maclisowski" height="80px" width="80px" alt=""/></a>

License

This package is under MIT License (MIT). Please see LICENSE file for more details.

Copyright (c) 2018 Maciej Lisowski