June 2018 updates

🎢 Funland update - June 2018

☀️ The summer is almost here and with it, a great batch of Toolbox updates !

---

Update notifications

Because it's always safer to keep your Toolbox's modules updated, you will now see some notification in the styleguide or in the terminal to notify you about some great new versions.

It happens from :

"generator-toolbox": ">=2.1.0"
"toolbox-utils": ">=1.4.0"

Better performances

Because Toolbox-Reader is so sloooooowwww when it loads every components yaml files, from toolbox-utils >=1.4.0, the data provided to the reader are now optimized to reduce significantly the first load of your styleguide.

Flexible components hierarchy

Atomic design is great, but sometimes you will need a more custom component organisation and because of it, Toolbox now let you choose what hierarchy you want to use from the generation.

When calling $ yo toolbox, you will be hable to define your own structure by simply choosing your type separated by “<” character. For example blocks<sections<containers. Learn more on the documentation.

If you refactor an existing project, you can also add a new parameter in your .yo-rc.json :

{
  "generator-toolbox": {
    "promptValues": {
      "atomic": "blocks<sections<views", ← 
    }
  }
}

With that fresh project, or if you refactor your current project structure, you will be hable to still create new components or variants using :

$ yo toolbox:generate
// or
$ yo toolbox:variants

And calling your components with Twig still use the component namespaces :

<div>
  {% include "@blocks/input/input.twig" with { placeholder: "search" } %}
  {% include "@blocks/button/button.twig" with { label: "go !" } %}
</div>

Finally, it should render your structure nicely inside Toolbox-Reader.

Multiple bundles

Our approach for CSS and JavaScript until now was to pack everything inside a big main.css or main.js, but in some case and with the rise of HTTP2, you will need more often a finer control of your outputs. For that reason, we add a new bundles setting inside the toolbox.json for SCSS and JavaScript.

You will have something like :

...
"bundles": {                                      
  "js": [
    {
      "name": "slider",
      "src": "components/molecules/slider/slider.js"
    }
  ],
  "scss": [
    {
      "name": "critical",
      "src": "components/critical.scss"
    },
    {
      "name": "slider",
      "src": "components/molecules/slider/slider.scss"
    }
  ]
},
...

Learn more on the toolbox.json documentation.

New publishing process

Because sometimes your styleguide project is supposed to be delivered elsewhere, Toolbox offers you now two ways of doing it combined under the ./publish.sh file.

It will create for you a dist/frontend Git branch and also a clean way to publish your project well built on the NPM registry.

Learn more on how to do it on the publishing documentation.

IE fixes

Toolbox looks finally less broken on IE with better styles and a better polyfill requirements.