Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add atomic design to lindy #383

Merged
merged 1 commit into from
Mar 22, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions src/content/lindy/2024-03-21-brad-frost-atomic-design.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
title: Atomic Design
author: "Brad Frost"
creator: "Brad Frost"
heroImage: "https://atomicdesign.bradfrost.com/images/book-cover.svg"
heroImageAlt: "Book cover for Atomic Design"
link: 'https://atomicdesign.bradfrost.com/'
dateConsumed: "2018-03-12"
pubDate: "2024-03-21"
blurb: "When designing from the ground up, create small, atomic components that can be combined into bigger components. Using biology as a guide, the complexity is organized into molecules, organisms, then pages. Templates are also used as layouts for those pages."
---

Prior to reading Atomic Design, I was set on designing websites through pages.
You think about the page as a whole, maybe breaking them apart into smaller sections.
When I started with wireframing, I didn't think in the framework of design systems.
I took what I knew from looking at websites all day and emulating what I saw.

Brad Frost breaks down this into chapters about where we are coming from,
what to do instead, and how to organize our components. This has been fuel for
what was to come next as UI view frameworks made it easier to conceptualize and
implement components. Web Components made it compliant with web standards.
Sketch and Figma paved the way for that integration between design and code.

While not every project should hold the folder concept of atomic design, its
idea echos in the front-end ecosystem. For smaller projects, I use atoms, single-level.
For larger projects, adding molecules, and maybe organisms, helps with breaking
down the necessary parts. Even better is a design system that has many of these
integrated so I don't have to think about them.

While the book is older now, it's still a great read and a great way for me to
brush up on how to start a project with components in mind.