Brad Frost
bradfrost.com · Personal blog · on HN since 2014
Brad Frost, a web designer and consultant, writes about front-end design, design systems, and his Atomic Design method.
What HN saysCommenters praise Atomic Design for making component-based UI work simpler, and cite his post on the word 'just' and learning React.
91HN people shared it
24linked it in comments
86stories submitted
4.4Kstory points
3 months agolast shared
2014people per year2026
Most-shared posts
- 1Atomic Web Design13 people · 7 points · first shared 2015 · discussion on HN
- 2A Global Design System5 people · 16 points · first shared 2024 · 1 comments on HN
- 3Don’t Get Clever with Login Forms4 people · 1.1K points · first shared 2019 · 506 comments on HN
- 4Front-of-the-Front-End and Back-of-the-Front-End Web Development4 people · 87 points · first shared 2021 · 71 comments on HN
- 5Facebook, You Needy Sonofabitch3 people · 1.1K points · first shared 2017 · 387 comments on HN
- 6My struggle to learn React3 people · 230 points · first shared 2018 · 210 comments on HN
- 7“Just” (2015)3 people · 25 points · first shared 2018 · 7 comments on HN
- 8Front end Design3 people · 5 points · first shared 2016 · discussion on HN
- 9Front-end design, React, and a bridge over the great divide2 people · 206 points · first shared 2019 · 133 comments on HN
- 10You probably don’t need input type=“number”2 people · 149 points · first shared 2019 · 116 comments on HN
- 11Surviving the New MacBook Pro2 people · 126 points · first shared 2017 · 116 comments on HN
- 12The UX of Login Codes2 people · 12 points · first shared 2025 · discussion on HN
- 13Raw-Dogging Websites2 people · 8 points · first shared 2024 · discussion on HN
- 14Living with Bullshit2 people · 6 points · first shared 2015 · discussion on HN
- 15Full-Stack Developers2 people · 6 points · first shared 2017 · 2 comments on HN
What HN people wrote when they linked it
ElFitz · 2021-09-12
Personally, I found that working with clients where everyone, designers included, followed the principles laid out in atomic design[1] (or closely enough), not matter the tools used, and favoured reusing existing components, was much simpler and pleasant.
But it usually only went as far as having the designers follow it in Sketch, Figma or whatever, and the devs separately implementing the components themselves.
What is the (supposed) added value of something like Storybook over this?
[1]: https://bradfrost.com/blog/post/atomic-web-design/
typetrail · 2019-07-19
Are you referring to posts like this?: http://bradfrost.com/blog/post/my-struggle-to-learn-react/
"There’s a giant, great JavaScript community out there, but I feel like a lot of times there’s an implied (or sometimes explicit) 'OBVIOUSLY' or 'just' that comes with a lot of the territory. For instance, I was confused why there are different ways to create components in React, and several people tersely responded 'it’s common knowledge that you use functions for simple components and use classes for managing state.' I had no idea! I didn’t see an explanation of that stuff in the docs. If that’s what the convention is, that’s totally fine. Just don’t assume everyone has that info downloaded.",
The assessment is pretty harsh on the guy, I think in Brad's case he's one of the more publicly documented instances of someone putting in the right kinds of effort.
pedro1976 · 2019-07-18
Worth mentioning Brad Frost with his wonderful formalized approach for componetized UIs, called Atomic Design [0]
[0] https://bradfrost.com/blog/post/atomic-web-design/
nickledave · 2015-09-06
Worth reading the follow-up post: http://bradfrost.com/blog/post/living-with-bullshit/
He's not against ads. He's against shitty ads that piss off customers.
Anybody know if there actually are any studies that show that these ads (1) help businesses attract clients and (2) do so without alienating more clients than they attract? Or are they all just for businesses that don't care about keeping customers anyways (e.g. weight loss fads)
mbesto · 2015-09-06
All of this "bullshit" exists because it works.
What's amazing is that the author pays his own bills as a result of such bullshit existing. The companies he's consulting to don't magically make money from nothing.[0]
[0] - http://bradfrost.com/web/
tylerchilds · 2021-02-22
> Is someone forcing you to use it against your will?
I mean, kind of?
My problem with GraphQL isn't necessarily GraphQL itself, but with the sprawl of things creeping further and further into client-side code.
As companies are finding GraphQL to "unlock greater developer productivity", it's becoming more and more expected to have this in our toolkit as "front-end people".
There's been a few blog posts recently that I relate to. I feel like I'm at a point in my career where I could "knuckle-down and get good" but I don't actually want to get good at more and more endless technologies. I'd rather be able to define my niche specialization and thrive within that space.
[1]: https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the…
[2]: https://www.trysmudford.com/blog/i-think-im-a-design-engineer/
[3]: https://notes.baldurbjarnason.com/2021/02/20/the-layers-of.html
DoreenMichele · 2020-10-13
I have a long history of doing "community development" type work both online and off. And that includes being lead mod for an organization trying to make the transition to registered non-profit and volunteer work of various sorts over the years and so forth.
It's actually hard to communicate what I do. I'm sort of like the "mortar" person described in this article about trying to convey your job title: https://bradfrost.com/blog/post/job-title-its-complicated/
I do a variety of things and I know something about design and I know something about economic development and I know something about community building (the social fabric part of that) of various sorts and so forth. It's not you, it's partly that community development work tends to suffer from this problem that outsiders have no idea what "planning" (or "development") is and so forth and it's partly that I'm kind of a Jill of All Trades and I never quite know how to tell people what I do.
Thank you for that suggestion in your second paragraph. I have no idea how to do that, but that's terrific feedback and a great idea.
I'm currently short of sleep, but will try to make those changes at some point (hopefully soon-ish). That looks like a huge improvement to what I did and I will think some more on what I did there and how that got misinterpreted by you and how I can make it better.
yellowapple · 2019-06-27
I love how this article cites Brad Frost's "Don't Get Clever with Login Forms"[1], yet at the same time advocates specifically for doing one of the "don'ts" listed in that cited article ("don't split login across multiple pages").
Reading through Twilio's article, I still don't see a satisfactory explanation why they did it this way instead of just presenting both fields plus a list of buttons for other authentication methods (like what they even acknowledged to be the norm, citing examples like Pinterest and Twitch). If you're trying to dynamically choose the authentication method by looking up some preference associated with the user's email address, then you are exhibiting the textbook definition of overthinking the problem.
If users want to login with Google/Facebook/Twitter/Microsoft/etc. credentials, provide a button for it and call it a day. Those login methods will automatically (in all likelihood) provide an email address for your app to tie to its internal "user" representation (though you might have to explicitly request that particular permission in the OAuth or SAML or whatever flow).
[1]: http://bradfrost.com/blog/post/dont-get-clever-with-login-forms/
evunveot · 2015-07-10
I'm surprised how much the personal standards I've built up working solo for many years align with these.
Regarding "Presentation-Specific vs Layout-Specific Styles," the way I've come to organize things is roughly "outside-in" i.e.: position, margin, border, width/height, padding, font/line-height, text styles. I also always put "display" and "box-sizing" first, if they're present, since they change the effect of several things that follow.
I disagree with "Prefer nested selectors ... only if both .foo and .foo .bar need styling." I prefer nested selectors always, mostly because it's annoying to have to go back and nest something later when you realize the container needs rules, too. Also I sense that there's something beneficial about the nesting of the (in my case) scss matching the nesting of the HTML, but that might just be aesthetics.
Also disagree with "Settle for a few (2-3) breakpoints and use those only," at least for the types of designs I have to work with nowadays. The prevailing style seems to consist of a series of striking, highly independent sections with their own internal layout (think the landing page of a typical, new open source project or startup, with a hero unit or carousel, a list of features in some number of columns, testimonials in some [other] number of columns, etc.). If you make each of those sections adhere to the same handful of breakpoints, either you carefully limit your design or you risk ending up with strange looking layouts in…
monooso · 2026-04-10
> Raw HTML/CSS/JS are out of distribution just like assembly (no one builds apps like this)
Plenty of people build apps with vanilla CSS and JS (and HTML is just HTML). It's a really nice way to work.
Here are a few links to get you started.
https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfi…
https://simonwillison.net/2025/May/31/no-build/
https://bradfrost.com/blog/post/raw-dogging-websites/
alex1138 · 2026-03-28
Perhaps but then you get stuff like this https://bradfrost.com/blog/post/facebook-you-needy-sonofabitch/
They need to play fair or GTFO
tipiirai · 2025-05-09
Agreed. No reason to show more than 100+ entries on a single table. Event sourcing isn't about UI patterns but rather one level beyond it: the "back of the frontend" [1]:
[1]: https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the…
SansGuidon · 2024-11-07
this reminds me of a similar blog https://bradfrost.com/blog/post/just/
frio · 2023-08-11
That's a shame. You can find documentation at https://bradfrost.com/blog/post/atomic-web-design/ on the methodology -- it's pretty lightweight, and is really just a vocabulary for discussing different groups of UI elements. When you have to build a consistent style for your application, this kind of tool is really useful -- it helps you build more reusable components and keep them documented somewhere.
muzani · 2022-08-18
With Android it's actually difficult as most boilerplates go obsolete in 2-3 years.
But basically copying functionality that takes a while to build.
1. Design system [1] that's integrated with Compose. Meaning blocks are built as part of other blocks.
2. Networking and caching - these can take half a day to assemble and debug.
3. Test integration. Easily days or weeks to do on Android, because dumb stuff like some misaligned libraries.
4. Dependency injection, also harder to set up the larger code gets.
[1] https://bradfrost.com/blog/post/atomic-web-design/
gherkinnn · 2022-03-30
Nope, I've worked with and on design systems since 2010.
And Brad Frost's Atomic Design [0], a formal system for developing a design system, was first written in 2013.
0 - https://bradfrost.com/blog/post/atomic-web-design/
knubie · 2020-07-07
This is from Atomic Design[0], but are you commenting on the right article?
[0] https://bradfrost.com/blog/post/atomic-web-design/
jppope · 2019-09-15
A SFC should do a single thing well.
Check out atomic design, it might help you :)
http://bradfrost.com/blog/post/atomic-web-design/
moviuro · 2019-08-19
I prefer to use the autotype function of password managers (Ctrl-V on Keepass[0], and rofi-pass[1] for pass(1)); there are other issues with them though (such as "modern" login pages [2])
[0] https://keepass.info/help/base/autotype.html
[1] https://github.com/carnager/rofi-pass
[2] http://bradfrost.com/blog/post/dont-get-clever-with-login-forms/
chrismorgan · 2019-07-18
Go for http://bradfrost.com/blog/post/atomic-web-design/ instead. His site over HTTPS uses a self-signed certificate that expired over eight years ago.
newscracker · 2018-09-20
I seriously can't imagine this taking off, and even if it does, staying strong and growing bigger than other matching platforms that charge their customers for verification and other features.
Facebook is already quite creepy and needy. [1] Please dissuade people from using this service if you can.
[1]: http://bradfrost.com/blog/post/facebook-you-needy-sonofabitch/
itsangaris · 2018-06-02
Ok, so Brad is already making sweeping declarations about React, yet less than a month ago he specifically posted about his struggle to learn it: http://bradfrost.com/blog/post/my-struggle-to-learn-react/ cool...
neon_electro · 2017-05-05
When you say "atomic", do you mean atomic design as popularized by Brad Frost? [1] Are you using atomic design or some other design system?
[1] http://bradfrost.com/blog/post/atomic-web-design/
joepie91_ · 2015-07-10
> Maybe not all my clients support javascript, but substantially all I care about do.
See here: http://bradfrost.com/blog/post/fuck-you/
> I even take advantage of this on my blog by rigging a field in the comments section to not be visible for users but be visible for spammer bots, so that they will fill it out and the software can auto-reject it.
That is a reverse CAPTCHA, it works very well, and has absolutely nothing to do with Javascript. They are typically implemented using CSS.