fractal.build as an atomic design tool

• fractal-twig-boilerplate

  1 2 10.0 JavaScript

  This is a simple boilerplate for Fractal using Twig, Bootstrap 4, Webpack 4 and SASS.

Other users have created boilerplates for using ABEM CSS in fractal or ditching handlebars to use fractal with Twig templates instead.

• fractal-build-example

  2 2 0.0 SCSS

  evaluation of fractal.build atomic design pattern tool

In my first fractal.build example, I used a gulp setup with SASS for a quick proof of concept. In a future JAMStack project, I would go for PostCSS to use native CSS 3 / CSSnext features and try to avoid unnecessary tool depencies.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Tailwind CSS

  1,281 78,568 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

So what are design systems and what is atomic design? Much has been said and written about CSS methodologies like BEM, ABEM, ITCSS, and utility-based approaches like Tailwind or Bootstrap. Follow the links for further reading, if you like.

• storybook

  322 82,881 10.0 TypeScript

  Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

  

Fractal looks less shiny than Storybook, that I have used for ReactJS projects, but it can easily be used for projects without any JavaScript framework.

• React

  1,696 222,111 9.9 JavaScript

  The library for web and native user interfaces.

  

Fractal looks less shiny than Storybook, that I have used for ReactJS projects, but it can easily be used for projects without any JavaScript framework.

• Bootstrap

  530 167,478 9.6 JavaScript

  The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

  

So what are design systems and what is atomic design? Much has been said and written about CSS methodologies like BEM, ABEM, ITCSS, and utility-based approaches like Tailwind or Bootstrap. Follow the links for further reading, if you like.

Suggest a related project