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.
Questions tagged [atomic-design]
37 questions
2
votes
1 answer
Atomic Design with React hierarchy decision: What can be included in atomic components?
We are following in a successful way the Atomic Design to organize our ReactJS components in our library. After some dozen components build, we start to have a fundamental doubt about how to organize the organisms.
Our goal is to build a rule of…
Mendes
- 17,489
- 35
- 150
- 263
2
votes
0 answers
Handlebars limit scope of partial variable to one descendant
Using handlebars is it possible to pass a sting from one partial to another in this manner:
Parent Template
{{>text-field parentclass="two-col__"}}
{{>text-field parentclass="two-col__"}}
Child Template
BMCwebdev
- 146
- 2
- 12
2
votes
1 answer
Jekyll and modular/atomic design
I am currently looking at developing a "static" website, few pages only. However, by design, I can tell there is going to be repetitive layouts/patterns. I am thinking doing a data-oriented approach, with my HTMLs being as reusable as possible. Here…
user2929613
- 405
- 1
- 5
- 14
1
vote
1 answer
How to extend styling of component without using wrapper element?
I'm working with styled-components in atomic system.
I have my
And I have molecule that extends that atom, by just adding some functionality to it without wrapping element:
const Molecule = ({}) => {
const…
Alyona
- 1,682
- 2
- 21
- 44
1
vote
1 answer
React Native Components Override styles "leaking"
I'm trying to build my own component library specific to my React Native app using the Atomic Design Methodology, so I have small components like Paragraph, Title, Wrap, Button, Subtitle etc. in a single file called "Atoms". I can import them in my…
Captain Green
- 26
- 6
1
vote
0 answers
BEM / ABEM Naming Convention: Strategy for Clear Communication of Modifier Location?
I've been leaning towards adopting ABEM for my CSS, a modified naming convention based off of the popular BEM and adapted for use with Atomic Design.
Question:
When using ABEM, the modifiers are combined with the base class and not used…
David Mays
- 466
- 4
- 14
1
vote
2 answers
Unable to resolve module `../../../../src/redux` from `node_modules/react-redux/lib/connect/mapDispatchToProps.js
I am trying to add redux with redux toolkit to an existing react native app with my first attempt at atomic design.
I have wrapped my index.js components in a per the docs but it seems like react-redux is searching for a location called…
peekay
- 30
- 7
1
vote
3 answers
How to Export Variables with a Dynamic Names
I have a components folder in nuxt.js
/components/atoms/
and inside that folder I have an index.js to export all components dynamically
const req = require.context('./', true, /\.vue$/)
const components = {}
req.keys().forEach(fileName => {
…
Yung Silva
- 1,324
- 4
- 20
- 40
0
votes
0 answers
Way to manage props simply in the react atomic design pattern
I have adopted the Atomic Design Pattern in my React project and am using it with TypeScript.
However, when props come down from pages to atoms, there are frequent situations where up to 5 depths are reached.
In this situation, if one of the props…
돌맹이
- 1
- 1
0
votes
0 answers
Strategies for working with multiple components (atoms, molecules)(Atomic Design) - NextJS
Until the release of TurboPack, using NextJS in this project can be tricky as webpack slows down with scalability.
The issue is that my project contains several components that are imported into the whole system, the system divided into pages…
rick
- 554
- 6
- 18
0
votes
0 answers
Navbar hover dropdown with atomic design & styled & react.js
if navbar hover, i want show dropdown menu
I'd like to change display: none of the components created in another file to display:block.
Menu.jsx
const Container = styled.div`
display: none;
width: 106px;
height: 36px;
backgroud-color:…
George___032
- 1
- 1
0
votes
1 answer
Is possible to use Atomic Design in PHP Laravel Blade?
In React, you can create separate components in folders, which have their own JS and CSS.
In Laravel I saw the possibility of using @includes(), @extends(), @yarn(), and @section() sending parameters to edit the internal content and simulate react,…
Modane
- 31
- 1
0
votes
1 answer
Atomic Design with Storybook Dynamic elements
I am working on a project that is using Atomic Design along with Storybook.
I am a little confused as how to add atoms to molecules. ie if I had a base Modal with a header body and footer area how would I add atoms dynamically to them.
So the first…
jjlittle
- 47
- 1
- 8
0
votes
1 answer
Atomic Design: should a wrapper be an atom if it's not reusable?
In our company we are using Atomic Design for our design system (made with React and with Styled Components as our styling solution), in order to break down our UI into atoms, molecules and organisms
I have a doubt regarding when an atom should be…
rfc1484
- 9,441
- 16
- 72
- 123
0
votes
0 answers
Atomic design typescript react
import React from "react"
import styled, { css } from "styled-components"
import * as Router from "react-router-dom"
const styles = css`
text-decoration: none;
font-weight: 500;
color: #0b0080;
&:hover {
text-decoration: underline;
…
user3476614
- 537
- 2
- 8
- 26