DEPRECATED SEE Shopify Polaris
npm install shopify-ui --save
This is an effort at creating and organizing a library of React.js components that built from Shopify's backend Admin interface, created with the intent of building Shopify Applications with.
There's a chrome extension called SnappySnippet
that allows you to select a element on a webpage in the Chrome Developer tools and export the HTML and CSS to jsbin, jsfiddle, or codepen. I haven't used it yet for this project but it is really extraordinary. It does have some flaws in that it's not the best at getting psudo-selectors like :before
and after
and state modifiers like :hover
and :focus
. I tried tirelessly to get a clean copy of Shopify's checkbox (which is a pretty complicated piece of CSS / HTML ripe for modularity) and it wasn't simple.
I love the idea of extracting the CSS out of the Shopify stylesheet and having it live closer to the components themeselves, the neat thing about SnappySnippet is that it consolidated all of the class
and id
attributes to one custom id
for each element apart of the tree. Even if the extension worked perfectly I'm still uncertain how to store CSS in a React.js component library.
With all this said, I'm looking forward to a future where it's much simpler to pull styles and elements from existing webpages into React components.