Jekyll and modular/atomic design

Question

I am currently looking at developing a "static" website, few pages only. However, by design, I can tell there is going to be repetitive layouts/patterns. I am thinking doing a data-oriented approach, with my HTMLs being as reusable as possible. Here is an example:

index.html:

<div>
{% include organisms/topBanner.html
    tp-title=site.data.home.topbanner.title
    tp-select-blurb=site.data.home.topbanner.select.blurb
    button-text=site.data.generic.buttons.getstarted
    button-link=site.data.generic.links.gosomewhere
%}
</div>

then my organisms/topBanner.html:

<div class="tb">
    <h1>
        {{ include.tp-title }}
    </h1>

    <div>
        <h2>{{ include.tp-select-blurb }}</h2>
        <div>
            {% include atoms/button.html
            %}
        </div>
    </div>
</div>

finally my atoms/button.html:

<a class="button" href="{{ include.button-link }}">{{ include.button-text }}</a>

I have multiple JSON file under _data that basically hold the texts. An example for the button would be a _data/generic/buttons.json:

{
    "getstarted": "GET STARTED",
    "completesurvey": "COMPLETE THE SURVEY"
}

or links.json:

{
    "gosomewhere": "/go-somwhere",
    "surveypage": "/survey"
}

So this means you need to pass all your data from the top level include of the organism so every bits in it would have its data. That way the example of that button is that the HTML is defined only once and the data is bound to it. And for a second button to be in the topBanner you could do something like this:

index.html:

<div>
{% include organisms/topBanner.html
    tp-title=site.data.home.topbanner.title
    tp-select-blurb=site.data.home.topbanner.select.blurb
    b-getstarted-text=site.data.generic.buttons.getstarted
    b-getstarted-link=site.data.generic.links.gosomewhere
    b-survey-text=site.data.generic.buttons.completesurvey
    b-survey-link=site.data.generic.links.surveypage

%}
</div>

and in the topBanner.html, you rebind the data to the dedicated button:

<div class="tb">
    <h1>
        {{ include.tp-title }}
    </h1>

    <div>
        <h2>{{ include.tp-select-blurb }}</h2>
        <div id="getstarted">
            {% include atoms/button.html
               button-text=include.b-getstarted-text
               button-link=include.b-getstarted-link
            %}
        </div>
        <div id="survey">
            {% include atoms/button.html
               button-text=include.b-survey-text
               button-link=include.b-survey-link
            %}
        </div>
    </div>
</div>

This approach means everything is data driven, there is no repetition/'copy/paste' of HTML, it all works through includes and you can apply atomic design pattern (http://patternlab.io/).

Wanna change the text of the button from 'GET STARTED' to 'LET'S START'? Go to the data/generic/buttons.json and change it there. The whole website now has the text changed.

The drawback is the fact that all the data has to trickle down from top level. Readability might be bad.

First use of Jekyll for me, and waned to have your opinion on this. What is good practice for static website dev like this? Is it easier to have a buttonGetStarted.html that includes a more generic button.html, and pass the data to button.html from buttonGetStarted.html? Like:

buttonGetStarted.html:

{% include atoms/button.html
    button.text=site.data.generic.buttons.getstarted
    button.text=site.data.generic.links.gosomewhere
%}

and then include buttonGetStarted every time I need it on the page? But then if I need a new button for the survey, I need to create another html buttonSurvey.html and so on... Sure on the code you see an {% include buttonSurvey.html %} which is easy to read and understandable straight away what this button is about. So this:

{% include button.html button.text=site.data.generic.buttons.getstarted %}

with only one file button for all the buttons, or

{% include buttonGetStarted.html %}

with creation of a new HTML file everytime I need a new button?

Thanks

F.

Answer 1

Disclaimer : As this question is primarily opinion-based (see SO help on this), I've voted to close it.

However, I can give my two cents. Quote are from Atomic Design Methodology.

Atom

[...] elements that can’t be broken down any further without ceasing to be functional

atom/buttons.html

<a class="button" href="{{ include.datas.button-link }}">
  {{ include.dats.button-text }}
</a>

Molecule

[...] molecules are relatively simple groups of UI elements functioning together as a unit.

Here the question is : "do we need datas from organism / page for our molecule to work ?"

Yes : Datas will be passed by the parent organism. molecule/buttonGetStarded.html looks like (Note : this molecule is Homonuclear, but is functionnal.)

{% include button.html datas=include.buttonDatas %}

No : Datas will be set from inside the molecule (imaginary data structure)

{% include button.html datas=site.data.buttonDatas.getStarted %}

So in your case, I think that organism/topBanner.html can be composed like this (simplified for readability) :

{{ include.tp-title }}

<h2>{{ include.tp-select-blurb }}</h2>
<div id="getstarted"> {% include molecules/buttonGetStarted.html %}</div>

<div id="survey"> {% include molecules/buttonSurvey.html %}</div>

As I guess that your data files can be used for Internationalization (I18n) purpose. The molecule language doesn't need to be passed all the way down. It can be guessed by the molecule itself.

{% if page.language == nil %} 
  // if no language variable in page's front matter
  // we default to site language set in _config.yml
  {% assign language = site.language %}
{% else %}
  // language variable present in front matter
  {% assign language = page.language %}
{% endif %}

// get datas depending on guessed language
{% assign datas = site.data[language] %}

// this can even be more atomic with
{% assign datas = site.data[language]['buttonSurvey'] %}

// include the atom with correct language datas
{% include atom/button.html datas=datas %}

Note that this logic can even be factorized.