Skip to content
🍴 A tasty toolset for Vue.js πŸ›  - Lightweight, functional components to boost your next project.
Vue JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci feat(devops): adding linting Aug 29, 2019
build Testing rollup fix Aug 25, 2019
dist
docs Updating google analytics code Oct 4, 2019
src Fixing focus traps Sep 7, 2019
.browserslistrc feat(devops): adding linting Aug 29, 2019
.editorconfig Adding config files Jan 1, 2019
.eslintrc.js
.gitignore docs: finishing up new docs transition Sep 7, 2019
.prettierrc.js feat(devops): adding linting Aug 29, 2019
README.md
commitlint.config.js
netlify.toml Test force SSL Jan 17, 2019
package-lock.json
package.json
stylelint.config.js Adding config files Jan 1, 2019

README.md

Introduction

🍴 A tasty toolset for Vue.js πŸ› 

Vuetensils is a collection of mostly unstyled Vue components that focus on:

  • Accessible components
  • Semantic markup
  • Light weight
  • Custom styling

Bring your own styles

Vuetensil's components are designed to be starting points for some of the most common UI features while encouraging you to customize the design without adding extra bloat. Because they are unstyled, you can add your own brand without worrying about ticky overwrites, !important rules, or excess bloat.

Import just the features you need (like a WCAG-friendly modal that traps focus and prevents scrolling), and apply your custom design. No overhead from unused styles!

Inspiration

If I want my projects to follow best practices for semantic markup and accessibility, what are my options:

I could write my own library 😱

  • βœ… My styles would be exactly how I want them.
  • βœ… My bundle size will be very small because I'll only use what I need.
  • ❌ It's going to take a lot of time.
  • ❌ I'll have to create every component from scratch.
  • ❌ I probably won't follow all the best practices right.

I could rely on a third party library 😡

  • βœ… It will save me a LOT of time.
  • βœ… I will have many component options to choose from.
  • ❌ I'll still have to confirm they follow best practices.
  • ❌ I will either have to use their styles, or end up overwriting them.
  • ❌ There may be a lot of unused code that could bloat the bundle size.

I could use Vuetensils 😍

  • βœ… The only styles added are the ones I write.
  • βœ… I only include the components I'm actually going to use.
  • βœ… My components will be accessible and semantic.
  • βœ… The bundle size will stay as small as possible.

Getting Started

1. Install the library

npm install vuetensils

2. Register just the components you need

Globally:

// main.js
import Vue from "vue"
import { VAlert } from "vuetensils"

Vue.component("VAlert", VAlert)

Locally:

<script>
// SomeComponent.vue
import { VAlert } from "vuetensils"

export default {
  components: {
    VAlert,
  },
  // ...
}
</script>

3. Use the components in your template

<template>
  <div class="some-component">
    <VAlert>Hey, I'm an alert!</VAlert>
  </div>
</template>

4. Bring your own styles

/* Some CSS file */
.vts-alert {
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 10px;
  color: #900;
  background: #fdd;
}
You can’t perform that action at this time.