This article was posted last week on A List Apart, and is a great read for anyone that’s (thinking of) working with ContentBlocks: http://alistapart.com/article/language-of-modular-design
Distilling down a part of the UI into a reusable and modular piece of content/design can be tricky sometimes, but it helps if you work with structures and tools like Pattern Lab.
@mhamstra Thank you for this link. Very interesting read, and very timely for me as well.
I’ve been reading more about pattern libraries, style guides and modular design lately, because well… basically ContentBlocks forced me to 
By creating pages with CB and adding various options to all the available blocks / components, I find it becoming increasingly difficult to capture all these variations into solid and efficient CSS rules. Before ContentBlocks, I was used to the styling per page / template approach, as mentioned in the article. Fine for straigth-forward designs rolling out of Photoshop, but this soon becomes unmanageable when starting to implement CB components that give editors a bit of control over minor styling variations. For example: I added the (seemingly) simple option of setting the background of a layout section in CB, so you can create colored “strips” of content, optionally full-width, as seen on many modern websites. This is great, but it does come with the problem that by combining something like 4 or 5 background colors (or patterns, or images) with a number of custom content components (colored buttons, text, links, “wrapper” boxes with a different background color, nested layouts), you’ll end up with a large amount of possible variations.
This results in lots of “my headers are blue on a blue background” kind of feedback, which if you fix it “the old way”, will just end up in huge strings of CSS for 1 specific situation. Another problem is that I found myself styling slightly different variations of 1 component, like a team member contact card, in 3 different places, based on where it is inserted in the content. It feels more and more like you’re applying bandaids and quickfixes (something I hate doing), instead of actually setting up a lean, clear and effective styling system. The CSS of my latest projects is also becoming increasingly bloated because of this… 200KB is no exception I’m afraid, when combined with most of the Bootstrap components.
I know this workflow won’t last much longer, if I want to keep utilising the full potential of ContentBlocks (which I do!!). So I started looking for a better way and quickly found the Atomic Design principles of Brad Frost to be quite interesting. It really makes a lot of sense when thinking about the problems mentioned above. Break it down into “molecules”, or the even smaller “atoms”, and focus on defining and styling those elements first. Then, you can build “organisms” like headers and blog excerpts with those and eventually those will add up to form the actual templates. You’re no longer defining and styling elements per situation, but rather you’re creating situations from sets of pre-defined elements.
This all sounds very good in theory, and I’ve seen some great examples too of companies implementing such a strategy, but I have to admit that I’m struggling a bit with this at the moment. I know that this is perfectly translatable into a MODX / ContentBlocks setting, and that it will be very, very useful when creating sites in a more modular way… I just don’t quite know where to start and I’m also afraid it will be too much work in the end. Anyway, I’m setting up an experimental install now, to fiddle around with a few approaches… Will let you know how that goes.
But I’m of course very interested to hear about your “modular design” journeys too!
How “modular” are your websites right now? And how do you feel about the Pattern Lab approach?
How did ContentBlocks change your workflow? And what (new) problems are you struggling with the most?
And would some of you be interested in exploring the creation of a modular MODX / CB language together?
Would love to hear your thoughts!
Some additional interesting links:
http://patternlab.io/resources.html
http://us5.campaign-archive1.com/?u=7e093c5cf4&id=ead8a72012&e=ecb25a3f93
Some CB projects I’ve created, that use roughly the same base structure:
My first styleguide:
http://vastgoedbeschermer.nl/styleguide/
Only partially complete, because no-one gives a rats ass about it except for me But it proved extremely useful when writing the CSS for the various CB layout / field combinations…
Hello Hugo,
after polymer (polymer-project.org) is now production ready with version 1.0 and google uses it on about 300 Services.
we’ve thinked about using polymer webcomponents for building CB-Elements.
would be great to reuse all the elements in the page and just need to set a new design on top.
combined with export and import of single fields in CB this could be a gamechanger.
It could also be used to build layouts with a single element that defines the grid via attributes.
if you haven’t seen it yet there are some great speeches of the Polymer Summit 2015 in Amsterdam available on YT under polymer summit 2015
btw. your link to the styleguide gives me a 404 Error.