CODEWITHSUNDEEP
frameworksjekyllfrontendliquid
Arrowcatch
Arrowcatch

Reputation: 1650

Jekyll as a Frontend Framework - Workflow Solution needed

This is a copy from my thread in the Jekyll-Forums

Situation

At our company we go through the same phases for every project:

  1. Design
  2. Presentation
  3. Development

Unfortunately we are so tightly bound by the sheer number of projects, that we haven't updated our frontend-workflow for years. We are still wandering the old road:

  1. Design (Photoshop)
  2. Presentation (convert psd to jpg Screenshots & Mockups)
  3. Development (convert psd to html)

I always hate to see how much time and money we're leaving on the table by trodding along this path. Each step is completely seperated from the others. And... ah well, I guess I dont have to list all the disadvantages this approach comes with.

I'd like to change that and create a sophisticated & flexible frontend framework for us.

Goal

For this Jekyll seems just right, since its fast and there are some nice automated styleguide-solutions out there. (eg this one)

Overall this is the plan:

enter image description here

In this workflow I see the following advantages:

  1. Very fast & flexible (almost no extra work)
  2. Much better Output (live-prototype instead of screenshots)
  3. Happy Developers (styleguide instead of huge psd file)
  4. Better connection between Design, Presentation & Development

Problem

I can see everything coming together nicely, but I'm wondering how one would do this part:

enter image description here

  1. You have a Master-Version of the Framework with every possible component in it.

  2. To start working on a new project you create a fresh instance of it that only includes the components you need. Only those components will be part of the automated styleguide.

Of course I could just keep the Master-Framework somewhere, copy-paste it for each new project and delete the uneccessary componenty by hand. But I guess this is just asking for trouble.

Does anyone know a better solution for this? Some kind of generator, that could do this?

Thanks for any kind of advice. :-)

Upvotes: 1

Views: 158

Answers (1)

David Jacquel
David Jacquel

Reputation: 52829

This is a good question.

What you're trying to do is called atomic design, and this can be done with Jekyll.

By using includes, you can build a powerful set of components like :

{% include fish.html param1="truite" param2=page.variable %}

And you can then get datas inside included files with :

{{ include.param1 }}

or

{% if include.param2 %}
  ...

So, yes !, you can get out of this old fashioned design workflow with Jekyll.

Upvotes: 1

Related Questions