DEV Community

loading...

Toolbox, a Nuxtjs boilerplate with atomic-design in mind

Edenn Touitou
・2 min read

Hello all !

In an attempt to boost my productivity while staying lazy, I started to create a boilerplate for future personal, pro and school projects. And so I present to you (in its early stage) toolbox !

What is it ?

Toolbox is a project based on Nuxtjs that aims to give frontend developers all the basic HTML structures and elements to bootstrap a project. Forms, menus, tables, you name it. So whenever you need to build a new website, all you would need to do is to gather theses ready-to-use elements and add your custom style according to your graphical chart.

It is based on the concepts of atomic design and component driven development.

Why atomic design ?

I discovered atomic design only recently. In my opinion, this is a really powerful way to build frontend. The fact that it abstracts "complex" HTML structures like tables, modales, forms, menu into a simple ready-to-use component pleases me a lot. To me, these are the benefits of atomic design :

  • code is less redundant
  • CSS style scope is reduced and more precise
  • customisation is way easier
  • putting everything together to form a complete and complex page is faster

To know more about atomic design and component driven development, you can check out this article

Why Nuxtjs ?

Mostly because I have a great time using Nuxtjs for building websites. It is fast and well organized. And with its system of layout, page and component, it already has a foot in atomic design in a way. And most of all, it comes with a lot of useful features like Typescript, Axios for API request and PWA support.

For who ?

At this moment, only for tinkerers. The project is yet at its early stage and can't do much. So if you want something to play around, or if you don't have high expectations, you can use it right now.

But eventually of course, this will be used for serious personal projects and why not for a company or a client.

Want to know more ?

You can check the github repo here to know more about toolbox. How to use it and what's coming next.

Discussion (0)

Forem Open with the Forem app