The Visual Component Library “VCL“

class: center, middle

# The Visual Component Library “VCL“
## Modular, extensible CSS

Thomas Hoppe in 2020

---

# What is it?

A **modular** and **extensible** approach to CSS for the era of component-based
Web application development.

- Modular, not a framework, 100% JS-free at runtime

- For static sites and MV* framework driven SPAs (Angular, React, Vue...)

- Does not break your build process, it's part of it

- Existing library of 85 ready-to-use components

---

# Terminology

__Component__: A self-contained UI element like a button

__Theme__: A component which only defines variables for other components

__Theme terms__: High level theme defining colors, shades and fonts

---

# Why is it _modular_?

Because new components can be easily added and used:

- to the VCL repository
- your own modules

---

# How is it _extensible_?

It is in several ways:

- You can create your own components

- You can extend existing components by adding CSS rules

- You can adapt existing components by overriding styles and/ or variables

---

# Installing the VCL

```shell
$ npm install @vcl/vcl
```

---

# “Running“ the Demo of a component

```shell
$ git clone https://github.com/vcl/vcl.git

$ npm install

$ npm run demo <component name>
```

This will:

1. install the CSS processor (SASS)
2. install all dependent VCL modules
3. Build the styles and copy stuff to the `build` folder
4. Start a web server, serving the `build` folder
5. Open your browser to show all demos from the `demo` folder

---

# Using Modules

The SASS `@use`-statement is used to import modules and files:

Import a module via

```sass
@use "<module name>"
```

Import a local file via

```sass
@use "<file name>.scss|css"
```

---

# Anatomy of a Component

See what makes up a component using the example of the _button_:

[https://github.com/vcl/vcl/tree/master/packages/vcl/button](https://github.com/vcl/vcl/tree/master/packages/vcl/button)

The `index.scss` is the main entry point to the component.

---

# Dependencies

Dependencies are specified via `@use` and can be local files or external modules:

```sass
@use "../theme.scss" as *;
@use "../icogram.scss" as *;
@use "../mixins.scss";
```

---

# Real World Example

Typical usage is best explained by a typical `index.sss` of a web app:

```sass
@use "sass:color";

@use "node_modules/@vcl/vcl"with (
  $app-viewport-bg-color: #ffffff,
);

@use "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@use "node_modules/@fortawesome/fontawesome-free/scss/solid.scss" with (
  $fa-font-path: "node_modules/@fortawesome/fontawesome-free/webfonts"
);
```

---

# Use of Themes

Use the VCL with the black/ white theme:

```sass
@use "node_modules/@vcl/vcl/bw-theme" with (
  $app-viewport-bg-color: #ffffff
);

@use "node_modules/@vcl/vcl";
```

---

# Current Module Stock

There is a collection of **~85 __core components__**
  * with components ranging from typographical styles for text,
links, lists etc. to complex widgets like a date picker.
  - They provide roughly wahat you can find in Twitter Bootstrap

Check the
**[documentation of all Core Components](https://vcl.github.io/)**.

---

# It's opinionated

- CSS code is written using the SASS syntax

- Uses relative units like `em`, `rem` everywhere (except for some borders)

- Kebab-cased class naming, like `flip-switch`

- Embraces flexbox

- More about this in the [guidelines](https://github.com/vcl/vcl/blob/master/doc/DEVELOPMENT.md)

---

# Creating Builds with SASS

```shell
$ npm install -g sass

$ sass --style=compressed --no-source-map ./node_modules/@vcl/vcl/index.scss ./index.css
```

It's assumed that the VCL is installed in `./node_modules/@vcl/vcl/index.scss`.

The result can be found in `index.css`.

Check the **[VCL SASS CLI tutorial](https://github.com/vcl/vcl/tree/master/doc/tutorial/sass-cli)**
to learn more.

---

# Status

The VCL has come quite a long way, initiated as a monolith years ago.
It's battle proven in:

- Static web sites
- Single page app based web sites
- Mobile apps
- Enterprise apps

We are on a conservative **2.0.0 version level** that we
released in 2020.

Of course we adhere to
[semver](http://semver.org/).

---

# Open Issues / Roadmap

- RTL support

- Even more components and themes

- Support themes better in doc-gen/ doc-client

---

# Who's behind it?

- Mainly created and maintained by [n-fuse](http://www.n-fuse.co) employees

- 3 comitters currently

**We are open for your contributions!**

---

class: center, middle

# Thank you

<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
 <img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> 
 This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
 Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
</a>.