webpro/component-styleguide-example

Example for component-styleguide

component-styleguide-example's Issues

Provide example of using data powered templates and pages

Some context: I’ve looked briefly at Pattern Lab, and have used other templating languages before (Twig, Liquid) but don’t have much familiarity with Handlebars or Mustache. Given enough examples however, I can quickly pick up how something works. And if documentation refers to the terminology used in different templating languages, I then know what to search for to get further information.

---

This boilerplate example for Component Styleguide has been really helpful in getting me set up quickly, building out HTML components and styling them using Sass (I’m a big fan of using the script feature in package.json too). Now, I’m at the stage where I want to arrange molecules and organisms into templates and pages, but I’m a bit lost as to what’s the recommended approach using this tool.

I tried using the documentation for Pattern Lab, not because I know it works the same, but because the tool is inspired by it. I created a template, and then created a page, with a corresponding .json file, with that data required for that page instance, but that didn’t work. I’m guessing the only place data lives in this tool is in the data folder, which is fine. But then, how do I create pages with showing different content, based of certain templates? It’s unclear.

As a guide to using Component Styleguide, it would be helpful if this boilerplate demonstrated the full workflow, that is, pages with different data sources, possibly using the same template, which itself is a collection of organisms (which are a collection of molecules which uses an atom etc.).

Also, how do you create atoms and molecules with default values, which can be overridden with data later? For example, a button can say ‘Button text’ by default, but changed to say ‘Submit’ if certain JSON data dictates. This is where my lack of handlebars knowledge comes in, so it’s on me to learn! But an example of how to achieve this would be helpful, too.

Really enjoying the minimalist nature of the tool; just a bit more guidance/examples would be a real benefit.

Thanks,

Paul

Old node-sass version throws missing binary error

I got the following error after running npm install:

Can not download file from https://raw.githubusercontent.com/sass/node-sass-binaries/v2.1.1/darwin-x64-node-4.4/binding.node

Updating node-sass to the latest version in package.json fixed the problem for me.