2.0: Back to the basics (again)

[claviska]

TL;DR – now that browser support has improved for custom props and CSS grid, Shoelace 2.0 will go back to its roots and once again be highly customizable without the need for any sort of build process.

---

As Shoelace evolved, it became clear that we weren't quite ready for certain CSS features in production. I feel I was a bit too premature with pushing Custom Properties and CSS Grid Layout when Shoelace was released back in July, but I think we're ready to move these features to the mainstream.

Edge 16 was released on October 16, and with it brings full support for Custom Properties and CSS Grid Layout. This doesn't include IE11, but I'm OK with that at this point.

Here's what I'd like to do moving forward:

• [ ] Remove all cssnext-specific features so you don't have to build Shoelace to use it.
• [ ] Rework the build process so the dist contains custom properties. This will make Shoelace easier to use and, once again, customizable via CDN.
• [ ] Split variables into their own component files again, making Shoelace much more modular and extensible. For example, you'll be able to include a single third party .css file that inherits your theme/component styles automatically, even from a CDN!
• [ ] Address #12 by requiring component classes (e.g. <button class="btn">) for default components. My updated thoughts on this: styling is easier, implementing is easier, and the "namespace" has some benefits.

This is a bit of a backpedal, but I think it's finally time. Of course, this will introduce a breaking change in terms of browser support, so the new version will be 2.0.

Thoughts?

[leeoniya]

just fyi, here are some stats from a home remodeling ecommerce site in the US (Nov 2017):

IE11: 7.40% traffic 9.74% revenue

Safari 9: 1.78% traffic 1.68% revenue

Safari 10 is hard to tell apart from 10.1 via google analytics, and i don't think the former supports css grid, so throw some of those in there too. if you add those numbers up, you get 10-12% of potentially missing revenue - a huge number. i realize these stats won't be the same across industries, but every time i hear that CSS Grid is ready for primetime and IE11 is dead, i check in with our actual metrics. even flexbox support in IE11 is extremely buggy.

[claviska]

Thanks for that. I know IE11 isn't dead yet, but that's not a reason to hold the project back. My thoughts for users who need to support those browsers:

• cssnext can be used to compile custom properties.
• The flexbox grid can be an optional first-party extension for users who don't want to use grid layout.

This gives users a choice and brings Shoelace back to its roots, which is what made it popular in the first place :)

[adamkolson]

I’m finally able to develop a personal project with shoelace. As browser support isn't an issue this is welcome. Does this mean removal of the flexbox based grid? Flexbox has a place for one dimensional layouts but there’s also many other simpler ways to implement it.

[claviska]

Correct. I'd like to make the flexbox grid an optional extension, not leave it in core.

[TarasGrynik]

hello gayz ! how I can add input type checkbox into issue comment ? thx

[claviska]

@TarasGrynik https://github.github.com/gfm/#task-list-items-extension-

[TarasGrynik]

@claviska thx

[internalfx]

@claviska will we see a branch for this soon?

[claviska]

I put this out to collect some feedback as I worked on developing the new version of Surreal CMS. Shoelace isn't my top priority right now because it doesn't pay the bills, but I'd love to spend some time working on 2.0 soon.

[leesmith]

Any updates on this? Any new plans or changes in the works? Thanks!

[claviska]

I'm feeling this is definitely the right direction to go. It would make Shoelace much easier for people to get started with.

As anxious as I am to take Shoelace to the next version, I'm really busy with the upcoming release of Surreal CMS right now. I doubt I'll be able to focus much time until the new year.

[NullVoxPopuli]

I think getting rid of the build process and using all native modern features would be amazing!

For those who still want IE11 or other old browsers... just.. don't use the new version of shoelace? there is nothing wrong with staying an old version for compatibility reasons.

[claviska]

Good point. That plus the news of EdgeHTML being discontinued sort of seals the deal for me. I can't wait to work on 2.0.

[adamkolson]

And as CSS variables are part of the DOM which can be manipulated by JS, that's grand.

[NullVoxPopuli]

Any updates? I eagerly await a simpler build for my app :D

[claviska]

I do have an update that I'd like to share.

When I first created Shoelace, support for CSS Custom Properties (i.e. variables) was close, but not quite there. By using them, Shoelace was considered bleeding edge. Today, CSS Custom Properties are used extensively on the web. 💪

Since then, another technology has continued to mature that I'm really excited about. Web Components are now supported by all major browsers and, since they've been standardized, we can be confident that the technology will be supported for many years to come.

I'm not going to review them here (see the previous link for more info), but what excites me the most about Web Components is that you can use them along with your framework of choice. For example, the same exact components can be used in Vue, React, and Angular apps.

The Web Components API is intentionally low-level, but there are tools that make building them a lot of fun. My favorite is Stencil, which combines TypeScript + JSX and a React-like syntax for building components. (The tech here only matters to component developers — the end result is a collection of native Web Components that can be consumed directly by browsers without any build whatsoever.)

Web Components are very promising and their longevity is guaranteed as a result of being standardized, so it makes sense to use them for component libraries such as Shoelace. I will admit that there are a handful of things that still need to be ironed out, but there's a ton of momentum behind this tech and you'll be hearing a lot more about Web Components in the near future.

That said, I've been spending my spare time recreating Shoelace using Stencil and I'm really excited about the result so far.

Before I share my progress, here are my goals for Shoelace 2.0.

Goals

1. Design a framework-agnostic component library 🧩
2. Be able to load it from a CDN ⚡️
3. Fully customize it with CSS variables — no need to build it yourself! 🎨

Similar to my initial goal with Shoelace, you will be able to load it from a CDN (or locally) and fully customize it with nothing more than CSS overrides — no build required.

Here's my progress as of today (the order is arbitrary and doesn't indicate when new components will be worked on).

Components

• [x] Button
• [x] Input
• [x] Range
• [x] Spinner
• [x] Textarea
• [x] Dropdown
  • [x] Dropdown Divider
  • [x] Dropdown Item
• [x] Checkbox
• [x] Radio
• [x] Tooltip
• [x] Switch
• [x] Tabset
  • [x] Tab
  • [x] Tab Panel
• [x] Alerts
• [x] Progress Bar
• [x] Progress Ring
• [x] Color Picker (in progress)
• [x] Dialog
• [x] Avatar
• [x] Accordion (collapsable)
• [x] Token (chip)
• [ ] Popover
• [x] Select
  • [x] Single
  • [x] Multi
• [ ] File Button
• [x] Notification (toast, snackbar)
• [ ] Split button (button + dropdown)
• [ ] Card
• [ ] Date + time Picker (consider wrapping https://flatpickr.js.org/themes/)
• [ ] Steps
  • [ ] Step
• [x] Drawer (panel)

Other Stuff

• [ ] Switch to ::part instead of relying entirely on CSS Custom Properties for theming
• [x] Build out a new website to show examples + documentation

I'm not sure when I'll be ready to release this — probably not until the "other stuff" is done. It's pretty easy to add new components as long as the theme API is solid and there's documentation for them. Since this is all done in my spare time, I don't have a solid ETA for (shall we say) an alpha release.

But that's the new direction I'm going with this. I'm happy to answer any questions for those who have them! 😄

[NullVoxPopuli]

that's pretty exciting!

is there a way I can test out what you've done so far? you've already covered most of what my app uses. Are you open to early feedback?

Switch to ::part instead of relying entirely on CSS Custom Properties for theming

what all does this entail? I've read about some implementation of part, and it seemed like it was more shadow-dom related. That might be awesome for a component library -- but less so for someone authoring their own styles and wanting to compose them (I actually tweeted about this recently here: https://twitter.com/nullvoxpopuli/status/1233833963522789377 (more @apply related though))

But that's the new direction I'm going with this.

exciting!

[NullVoxPopuli]

I am not sure about flatpickr: https://github.com/flatpickr/flatpickr/issues/1829 it seems like it might require jquery?

[claviska]

is there a way I can test out what you've done so far? you've already covered most of what my app uses. Are you open to early feedback?

Definitely, but I at least need to get the theming stuff switched over to parts. That's a big change to how styles work right now. Keep in mind that this is probably the most bleeding edge feature now and Safari doesn't support it yet (although it is supported in Safari Technology Preview, so it should be available in regular Safari soon).

I am not sure about flatpickr: flatpickr/flatpickr#1829 it seems like it might require jquery?

From the readme:

Most other libraries require you to pull in heavy dependencies like jQuery, Bootstrap, and moment.js. I wanted something that was good-looking out of the box, dependency-free, powerful, and extensible.

I'm not married to this one, though. I was looking for something lightweight, dependency-free, and feature complete (including a time picker). Pikaday is another option, but doesn't come with a time picker.

[NullVoxPopuli]

Keep in mind that this is probably the most bleeding edge feature now and Safari doesn't support it yet

sounds perfect! :D I use https://emberclear.io specifically for testing out bleeding edge stuff :)

From the readme: ......

cool! i missed that!

Given: https://bundlephobia.com/result?p=flatpickr@4.6.3 I guess that's not that bad. As long as everything is tree-shakeable, I'm happy :D

[claviska]

Stencil uses Rollup under the hood which handles tree-shaking. The generated components can be consumed in a couple ways:

1. Lazy loaded – you load a <script> and just use the components. They're loaded asynchronously, so only what's used is what's loaded. I believe this is how Ionic consumes their Stencil components.

2. Custom Elements Bundle – you load and register each component yourself. This is one of Stencil's @next features but an important one that I'd like to expose for sure.

In either case, you're only loading what you actually need rather than the entire component library. 👍

BTW, here's a (scaled down to fit) screenshot of buttons. This is one component. Each variation is made simply by changing props and/or adding slots.

[rchavik]

I am also eager to test it out. Please do share it.

[claviska]

See #96