Atomic Design with Mustache.PHP Cover

Atomic Design with Mustache.PHP

There’s PatternLab, Russian BEM from Yandex and maybe few other projects defining what atomic design is. Just briefly: Atomic design is a process of building websites from reusable tiny pieces up to complex collections.

What I was missing was the link between production code and library [of the PatternLab]. From my dumb perspective, having a pattern library for every project is quite overwhelming. My daily projects are considered rather small.

Is it possible to use these techniques on daily basis? How? Build it of course.

Continue reading “Atomic Design with Mustache.PHP”

Building web sites from pieces

Modularity might be the answer to addressing the DRY principle in web development. I write maybe, because this is just my initial research into these prototypes. None of them might be the answer.

BEM – Block, Element, Modifier

Your markup might look like this:

<!DOCTYPE html>
<html class="i-ua_js_yes i-ua_css_standard">
    <head>...</head>
    <body class="b-page b-page__body">
        <div class="head"></div>
    </body>
</html>

Atomic Design

Again, nice philosophy. Not so much of science around. See the presentation, it speaks for itself.

First thoughts

As much as I like the philosophy and all the russian science glow around the BEM project, well… I’m not a big fan of using underscores in CSS classes. Not because I just don’t like it, it’t because it’s hard to jump from word to word using keyboard shortcuts. And eventually, you will need to fire up some favourite editor of yours to edit that .css file.

I am more inclining to the Atomic way, but my feelings are irrelevant right now.

Let’s see where it goes.