
Modular CSS for Web Components ‒ the VCL Is Here - vanthome
http://vcl.github.io/
======
fenesiistvan
VCL is my favorite. But this one:
[http://docwiki.embarcadero.com/RADStudio/Seattle/en/VCL_Over...](http://docwiki.embarcadero.com/RADStudio/Seattle/en/VCL_Overview)

~~~
TimJYoung
Yeah, the author should consider using a different name in order to avoid
confusion (and possible trademark infringement).

~~~
taveras
yep, and there's also this: [https://www.varnish-
cache.org/trac/wiki/VCL](https://www.varnish-cache.org/trac/wiki/VCL)

------
spankalee
I'm very confused about how this actually integrates with web components. I
don't see any indications in the docs or source I've looked at so far.

~~~
vanthome
See here: [https://github.com/ember-vcl](https://github.com/ember-vcl) All
these components make use of the VCL. The integration is bassically CSS class
names. And more formally, you can add a dependncy to the required NPM
packages. However, we did not do this yet in the Ember VCL.

------
SimeVidas
Why isn’t the checkbox in [http://vcl.github.io/#vcl-
checkbox](http://vcl.github.io/#vcl-checkbox) clickable?

~~~
vanthome
Because the whole idea of the VCL is to be JS-less and thus logicless. We want
to leave this to Ember, Angular, React etc. That's why we are framework
agnostic.

~~~
SimeVidas
But you don’t need JS to make a checkbox clickable on the web. I’ve seen
custom-styled CSS-only checkboxes plenty of times in the past.

------
blowski
So the obvious question - why use this instead of Foundation or Bootstrap?

~~~
vanthome
Because they not neither modular and thus it's not possible to integrate them
with sound package management systems like NPM, bower etc. You can only get
the whole blob, with the VCL you can depend on a set of fine grained CSS
modules.

------
colinramsay
This looks fine. I have a few observations:

\- Uses camelCase for classes; Foundation and Bootstrap are hyphen separated,
as is FontAwesome. This leads to weird examples like the notification one [1]
where you have mixed naming conventions.

\- All classes in the docs are prefixed with vcl. I guess this is some kind of
namespacing, but again BS and Foundation don't have this, and you end up with
slightly uglier and slightly more verbose class names.

It doesn't seem like the tabs or drawer examples work for me so it's not clear
how it's handling those but it seems that it's not tied to jQuery, which I
definitely do like.

[1] [http://vcl.github.io/#vcl-notification](http://vcl.github.io/#vcl-
notification)

~~~
anonyfox
But with the namespace, you can avoid name collisions. As I see it, VCL
components can be used standalone, even when you already use a different UI
framework, so this makes sense for me.

~~~
colinramsay
I realise this. It doesn't stop it from being "slightly uglier and slightly
more verbose" though :)

You can namespace Bootstrap though [1] so perhaps you can change this VCL
convention somehow too.

[1] [http://stackoverflow.com/questions/13966259/how-to-
namespace...](http://stackoverflow.com/questions/13966259/how-to-namespace-
twitter-bootstrap-so-styles-dont-conflict)

------
anonyfox
Cool, this looks like a great set of visual components to design SPAs with....
kinda bootstrap with many plugins but also lightweight.

One question: does it have an easy way to implement a responsive off-canvas
menu or do I need to roll it by myself?

~~~
vanthome
Of course, the necessary components exist: The drawer component can contain
the navigation, here you can even see it statically in all three states:

[http://vcl.github.io/#vcl-drawer](http://vcl.github.io/#vcl-drawer)

In the drawer content, I would use this:

[http://vcl.github.io/#vcl-navigation](http://vcl.github.io/#vcl-navigation)

Just add some JS to control the state and toggle the `vclOpen` class.

------
aft42
>No shadow DOM support detected.

>The documentation client needs shadow DOM to render the examples. Please use
a browser that supports shadow DOM to view this.

On Firefox 45.0.1

There is an option to try a polyfil version, which seems to be working.

~~~
vanthome
FF will support Shadow DOM in the future. Also it's only used for the
documentation.

------
progx
You need a better name. VLC Player, or all other V C L char combinations are
used and VCL is hard to find.

e.g. "vcl css" google suggests "vlc css"

bootstrap, foundation, polymer, pure css, that are names you can remember.

~~~
anonyfox
Naming things is hard, at least the current name is straightforward, sort of.
googling "pure css [x]" isn't very good either IMO.

Shameless self-plug: [https://medium.com/@Hisako1337/very-fast-naming-
process-417f...](https://medium.com/@Hisako1337/very-fast-naming-
process-417f2144f54e)

~~~
progx
Sure, naming is one of the hardest things, in particular for software
development :)

------
brianzelip
fyi, VCL = Visual Component Library

~~~
bl4ckdu5t
That doesn't have to be the name. It can be its description

~~~
SyneRyder
I think they were pointing out that VCL (Visual Component Library) is already
a name used by Borland / Embarcadero Delphi Pascal for their cross-platform UI
toolkit.

------
tarikjn
At first, I thought this was something similar to CSS Modules (which, btw
solved mostly all my grievances with packaging CSS in a large application),
but this is something much more akin to Bootstrap or Foundation.

