Modular CSS for Web Components ‒ the VCL Is Here | Hacker News Reader

Modular CSS for Web Components ‒ the VCL Is Here

vcl.github.io

59 pointsvanthome27 comments

VCL is my favorite. But this one: http://docwiki.embarcadero.com/RADStudio/Seattle/en/VCL_Over...

i was anticipating https://www.varnish-cache.org/trac/wiki/VCL

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

yep, and there's also this: https://www.varnish-cache.org/trac/wiki/VCL

Ha! That's what I thought.

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.

See here: 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.

Why isn’t the checkbox in http://vcl.github.io/#vcl-checkbox clickable?

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.

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.

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

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.

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

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.

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...

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?

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

In the drawer content, I would use this:

http://vcl.github.io/#vcl-navigation

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

>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.

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

Same on mobile Safari.

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.

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...

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

fyi, VCL = Visual Component Library

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

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.

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.

Reply on news.ycombinator.com