Stack Overflow
Stack Overflow

Questions tagged [atomic-design]

Atomic design is a methodology used to construct web design systems created by Brad Frost, based on the idea of dividing elements into atoms, molecules, templates and pages, where the next layer is building using the previous layer.

http://atomicdesign.bradfrost.com/table-of-contents/

37 questions
7
votes
1 answer

Combine Backend and Frontend Development with Laravel, Patternlab, Atomic Design and Vue.js

I'm going to launch a new project with this two frameworks (I like): Laravel 5 Vue.js The Frontend developer prepares the HTML's in atomic design, generated with patternlab.io. Now I'm looking how I can integrate the patternlab.io project that I…
brokedid
  • 879
  • 2
  • 10
  • 35
5
votes
1 answer

Angular9's reactive forms & atomic design

I am implementing atomic design in my Angular 9 application. This means that I will build my pages with atoms, molecules & organisms. All is going fine, except for the ReactiveFormsModule. I want to convert the to its own component, so…
Joel'-'
  • 652
  • 1
  • 5
  • 17
5
votes
1 answer

Atomic Design, is a modal an organism?

There is a tile (molecule) with an image, some text and a play button. When the button is triggered a video should be shown via a modal. I think a modal should be an organism, but i want the modal to be part of the tile, which is an molecule. The…
Znar
  • 193
  • 12
4
votes
2 answers

Atomic Design, organism in organism?

Atomic Design seem to be an interesting methodology to construct an UX structure. But can one organism contain others organisms ?
Jerome
  • 603
  • 2
  • 5
  • 15
3
votes
1 answer

Atomic Design with Redux: Where to place components using the store?

I have a molecule that uses the state to control the visibility of another UI element using the store. Is it suitable to use the store from any where when applying Atomic Design or should there be one place/layer where all these components are…
Majed Badawi
  • 27,616
  • 4
  • 25
  • 48
3
votes
1 answer

How to use Atomic Design with Angular?

Is it advisable to use angular with atomic design? "A lot has been said about creating design systems, and much of it focuses on establishing foundations for color, typography, grids, texture and the like. This type of thinking is certainly…
Jhonatan Moreno
  • 79
  • 1
  • 2
3
votes
3 answers

How could I get changed value from vuetify select by emitting in atomic design pattern?

I am trying to get the changed value of vuetify v-select by using $emit but it doesn't work. I divided components by applying atomic design pattern (atoms(child component and not to connect with the store), organisms(parent component)) and vuex…
Doyoun
  • 89
  • 1
  • 11
3
votes
0 answers

Setting up a tech-agnostic Atomic Design workflow

We are currently working on setting up a design system for our company and part of the process is to create a pattern library based on Atomic Design. Our frontend team is currently using React Styled Components in their workflow. One of the main…
kn03i
  • 141
  • 4
2
votes
2 answers

Size-Spacing thinking and implementation approach in Atomic design suggested by Brad Frost in Responsive design

I understand it is very abstract asking, but I am unable to visualize space( padding, margin) & size ( width, height) when following atomic design. I could understand intent of atom, molecules , organisms, but where should I keep my padding ,…
spjgoku
  • 71
  • 1
  • 6
2
votes
1 answer

Rendering a component inside another in Nunjucks & Fractal

I'm working on a design system and just getting my head around the component way of thinking. We're using Nunjucks and Fractal. We have an existing component, an accordion which gets it's data from a JSON object. The props being title and…
Daz Lee
  • 144
  • 1
  • 9
2
votes
1 answer

Angular 8 + Atomic Design

I have some questions about atomic design in angular. The basics are understandable, I create the smallest atomic components, then link into larger ones, up to the page. When should I implement display at different resolutions in templates? Let's…
JuniorWithEverything
  • 413
  • 4
  • 13
2
votes
1 answer

How can I use ComponentName.js instead of index.js when importing React component (from Atomic design structure directory)

I am using Gatsby (React) for my project. I am using Atomic design folder structure e.g: src/components/Organisms/Header In this folder I like to…
meez
  • 3,783
  • 5
  • 37
  • 91
2
votes
1 answer

Atomic Design Pattern - Business Logic

I am implementing Atomic Design pattern in my project. Just a quick question, in where distinct stage should i put the business logic if i implement atomic design pattern?
Agent Droid
  • 71
  • 1
  • 14
2
votes
3 answers

How can I dynamically export components in index.js?

I'm working on a project with nuxt.js and I want to implement the atomic design methodology so I currently import the components like this import ButtonStyled from '@/components/atoms/ButtonStyled.vue' import TextLead from…
Yung Silva
  • 1,324
  • 4
  • 20
  • 40
2
votes
1 answer

assemble.io partial pass data to nested partials

I am using assemble.io and I would want to modularize everyhing using the "atomic design" principles. Let's say that I start with a couple of single atoms atomic partial "title" (a-h2-title.html)
Riccardo De Contardi
  • 2,128
  • 7
  • 17
1
2 3