Visual Component Library

Modular and extensible CSS for the era of component-based Web application development.

• Browse vcl.github.io for the docs and demos of all modules in the VCL org’s repos.
• Check the presentation introducing the VCL.

Status

The current modules are released in the 0.2.x version series and adhere to semver. All modules with version level >= 0.1.0 are ready for production use.

Features

• Designed to style Web Components.
• JS framework agnostic ‒ use it with EmberJS, Angular, React and the like.
• For ambitious mobile and desktop applications.
• Theming through modules which can inherit from each other.
• Collection of core modules to handle the bulk of styling needs.
• Default theme for core modules with ~500 variables.
• Extensible through custom modules or just project local styles.
• Integrates seamlessly with a gulp based build process.
• As lightweight as you want ‒ include only what you need.
• Quick rendering through simple, low specificity selectors.
• Maintainable & readable code with unabstracted, obvious naming conventions.
• Relative units like em (Elements) are used wherever feasible.
• Powered by the postcss and npm eco systems.
• CSS level 4 features like the color-function.
• Browsers compatibility is delegated to Autoprefixer.
• Future CSS features via CSSNext. Autoprefixer.
• Mostly independent of HTML structure and element names.
• Generation of documentation like at vcl.github.io only for modules you use.
• Embrace flex, no more float.

Getting Started

Example Project

See the tutorial for how to use VCL modules in a Web project and how to make it part of its build process.

Run a Module's Demos

$ git clone https://github.com/vcl/vcl.git
$ cd vcl/modules/button
$ npm install
$ npm start

Missing a Module?

If you are a developer, see below how to create one. We are willed to add new modules to the VCL org's range of modules if they fit. Otherwise create an issue.

Development

See DEVELOPMENT.md for the mechanics and philosophy behind VCL modules.