vectrejs / vectre

A Lightweight, Simple and Responsive Component Framework

Vectre is a set of lightweight, simple and responsive Vue components based on Spectre CSS

Features

• Clean, responsive and consistent design system
• Only about 14kb min+gzip (plus ~9kb Spectre CSS)
• Supports Typescript and TSX
• Improved performance of most components thanks to functional components
• Optimized for legacy browsers
• Focus on usability and rapid development
• Tree shaking

Documentation

The documentation is in a separate repository and the source code is an excellent example of using the framework.

Browse online documentation here

Quick Start

You need Vue version 2.5+.

Install via npm or yarn

npm install --save spectre.css @vectrejs/vectre
#OR
yarn add spectre.css @vectrejs/vectre

Import and use Vectre

All components

import Vue from 'vue';
import 'spectre.css/dist/spectre-exp.css';
import 'spectre.css/dist/spectre-icons.css';
import 'spectre.css/dist/spectre.css';
import { VectrePlugin } from '@vectrejs/vectre';

Vue.use(VectrePlugin);

or specific components

import Vue from 'vue';
import 'spectre.css/dist/spectre.css';
import { Tag, Modal } from '@vectrejs/vectre';

Vue.component('Tag', Tag);
Vue.component('Modal', Modal);

CDN

Alternatively, you can download or reference the script and the stylesheet in your HTML:

<!-- jsDelivr --->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spectre.css/dist/spectre-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spectre.css/dist/spectre-exp.min.css">
<script src="https://cdn.jsdelivr.net/npm/@vectrejs/vectre/dist/vectre.min.js"></script>

<!-- unpkg --->
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<script src="https://unpkg.com/@vectrejs/vectre/dist/vectre.min.js"></script>

Browser support

At present, Vectre supports all modern browsers and additionally has a build to support older browsers like IE 10 or Safari 9

<!-- jsDelivr --->
<script src="https://cdn.jsdelivr.net/npm/@vectrejs/vectre/dist/vectre.legacy.min.js"></script>

<!-- unpkg --->
<script src="https://unpkg.com/@vectrejs/vectre/dist/vectre.legacy.min.js"></script>

Playgrounds

• All in One https://codesandbox.io/s/vectre-all-in-one-yff7f
• Individual Components https://codesandbox.io/s/vectre-components-4pd1n
• CDN https://codepen.io/vatson_ua/pen/RwavXQY

Links

• Spectre CSS
• Typescript
• TSX
• Tree Shaking Webpack and Rollup

Social

• Discord Chat
• Twitter
• Issues

License

Code released under MIT license.