Vanilla+ is a minimalistic web interface development library. It adds no abstraction layers and thus allows you to use only the portions you need without bloat from the rest. It is divided in 3 main parts:
- A basic CSS library
- A JS library
- A collection of web components
The components utilize the JS library while maintaining independence. They operate without relying on the CSS library, which serves solely for theming purposes. Whenever feasible, these components are designed as progressive enhancements.
WORKING PROTOTYPE "It works for me." The APIs may still change significantly, bugs and browser incompatibilities may still abound.
Development has resumed and a stable version 1.0 is expected by July 2025.
See TODO for details of what's coming up.
npm install vpweb…or simply download the files you need from this repository.
Main objectives:
- Responsive, but with desktop as a first-class citizen
- Nearly pure CSS, relying on JS only when CSS falls short
- Usable as a package or as a set of stand-alone files
- Unique selectors to minimize conflicts with other frameworks
- Forego advanced concepts in favor of small size and high performance
Documentation: CSS
The minimalistic library aims to make "Vanilla JS" development more expressive without masking the native objects or impeding run-time performance. More specifically:
- 100% compatible with plain JS, every function is independently opt-in
- Compatibility down to Chrome/Edge/Opera 79, Safari 12, Firefox 78
- Abstract away boilerplate, alias frequently used long-named symbols
- Cooperate with tree-shaking bundlers
- Tiny: stay under 4KB minified (not compressed)
Specifically avoided are:
- To wrap native objects (i.e.
HTMLElement) - To alias or wrap the entire DOM API
- Other development comforts which would cost run-time overhead (i.e. a universal
$())
Docs: Editeur | Fast Clicks | Forms
If you want to use the whole thing in one line without need to activate manually on shadowed elements:
// Option 1 (recommended): include in your build.
// No configuration options
import 'vpweb/vpweb';<!-- Option 2: load as stand-alone script -->
<script src="dist/vpweb.min.js"></script>You may also use individual components, although if you use more than one as stand-alone scripts, there will be some redundancy.
Note that components triggered by attributes or class names cannot self-activate inside shadow DOMs. If you want to use Vanilla+ components inside those, you'll need to activate them manually (for example, with fast.preclick(element)). See each component's documentation for manual activation usage.
Graph X Design Inc. https://www.gxd.ca/ sponsored this project.
Copyright (c) 2019-2025 Stéphane Lavergne https://github.com/vphantom
Distributed under the MIT (X11) License: http://www.opensource.org/licenses/mit-license.php
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.