Garden is a css library created based on Leroy Merlin’s needs, and used internally as well.


As for component idealization (the conception of a new component, such as buttons) Garden follows the Atomic Design and Mobile-first principles.

Stack wise, Garden was built using PostCSS for CSS processing, alongside with a couple PostCSS plugins.

As for JavaScript components, they are primarily written on ES2015 (using Babel) and bundled to ES5 UMD components with Webpack.

Garden also relies on jQuery to provide API standards for it’s components. Please take note Garden does not comes with jQuery, allowing you to use your own version based on your needs. You can opt for Zepto, for example. Or a custom build of jQuery as well.

Browser Support

Garden CSS/JS components targets all major browsers, including IE9+. CSS prefixors are added through Autoprefixer.

Getting Started

Be sure to checkout the Getting Started section for more info on how to use Garden.

A huge shoutout to the Primer project, which heavily inspired the layout and the documentation approach of this library.