Components - mattstyles/gulp-static-seed GitHub Wiki
The concept of components in this seed serves to help split the project up in to discrete units of function and borrows extensively from the theory behind component.io and Web Components.
This seed simplifies the use of web components and should not be confused with them—in this case components are used only to compartmentalize different sections of a site. There is nothing smart about their implementation here and, as such, there are few restrictions in place to stop you doing bad things™. It’s highly recommended that if you like this style of approach that you check out polymer.
These Components
This project uses hogan to stamp out the chunks of html which represent a component, it then incorporates them into the page/s using partials. Using partials makes them simple to use but each component should be thought of as a discrete, static chunk of your final site—customisation of individual components is not possible (unless by some JS conversions at runtime but you’re gonna run into trouble if you lean too heavily on this).
Each component is free to have it’s own JS and CSS but, unlike smart component systems (or the Web Component spec), these assets are not constrained to a component. The JS and CSS is concatenated in with your core scripts and styling at run-time so a little care should be taken to make sure you don’t get into a right mess of having scripts and styles stamping all over each other. Components should be fairly small and tightly specced so their included JS/CSS is fairly unique to them. An advantage to this approach is that styling and JS from the rest of your page can easily interact with the component. It has it’s drawbacks but it’s simple to use.
Components can have use partials specifying other components so you get some nice reuse. These dependencies need to be specified in the build.json which configures a component. There are plans to add a smarter way of building components but the config route makes it fairly straight-forward.
Build.json
The build.json specifies a component and is used to set up values for templating as well as describing dependencies.
{
"name": "header",
"base": "index.hjs",
"deps": "../nav",
"data": "data.json"
}
Base specifies a template file, usually index.hjs.
deps should specify a path (or paths via an array) to other components.
data is the json file (or files via an array) or data to use to populate the template.