JSPM – @vectrejs/vectre@1.1.0

Package Exports

@vectrejs/vectre

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vectrejs/vectre) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

License

Code released under MIT license.

@vectrejs/vectre