Modular and extensible CSS for Web Components
Switch branches/tags
Nothing to show
Clone or download
Latest commit f36e888 Aug 14, 2018
Permalink
Failed to load latest commit information.
tutorial Upgrade deps Aug 14, 2018
.gitignore .gitignore Jun 15, 2015
DEVELOPMENT.md WIP new modules May 11, 2017
README.md Up Jan 8, 2018
component_categories.yml Release docu Sep 10, 2015
module_list.json Up Jan 26, 2018
package.json Up Jan 8, 2018

README.md

Visual Component Library

Join the chat at https://gitter.im/vcl

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

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

Run a Module's Demos

$ git clone vcl/button
$ npm start

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.

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 in the doc repo.

Development

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