@actionishope/shelley

Shelley UI

Frankenstein was no monster but a beautiful energy surging through a collection of recycled misfit components... A little bit like a component library... In honour of Mary Shelley because we need more women in tech.

Styling via Styable - https://stylable.io/

We are very thankful for Stylable. Developed by Wix (who know a few things about maintaining a shed load of styles). We have used JSS, Emotion, Styled components and CSS Modules. We started with JSS, at first it was great but then we saw the CSS output of what we had built via dynamic styles...

Then we began to miss other things like CSS syntax checking and copy and pasting regular CSS; like a game of whack-a-mole we trying to plug these with extensions and plug-ins. We felt far down a rabbit hole. All this for what? CSS in JS?

We reflected on what we actually needed. Variable support/management, namespaced selectors, good performance, simple syntax and great theming ability... That was about it, we already have inline dynamic styles when/if we REALLY need them via the style attribute.

We put everything down and went in hunt of something simplier. Something familar for the more traditional front end developers out there. Something for the CSS specialists that made the transition to JS but crave simplier times.

We found Stylable. We played around with it over Christmas and we loved it! It was like getting one of your old toys back that you thought was lost forever.

A quick conferance call with the peeps over at Wix and a few tweaks their end and we were ready to go. The best part was that we had come into this in the exact same way that Wix had done; we felt vindicated that the global powerhouse Wix had had exactly the same experience with CSS in JS. Happily they figured out sooner and did something about it. Thanks to the team over there.

Stylable have a plug-in for VS Code, just search for 'stylable intelligence'. It has a few outstanding bugs but it is useful as it is. https://marketplace.visualstudio.com/items?itemName=wix.stylable-intelligence

Purpose of the project

To begin with this project it primaily driving sone of our internal projects. However we are planning to keep generic /configurable as possible for our own use as it will drive multiple sites. Stylable allows us to essenetially define our 'holy grain' HTML which is essentially exposed as a styling API for any CSS that we want to throw at it.

Components come unstyled by default (a few exceptions) with all the styles coming from the theme. We will provide a theme or two, perhaps a base theme to build upon that we can grab in as we please.