Articles Tagged atomic

One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context. We can prefix each breakpoint. This works well until we start adding multiple classes. That’s when it becomes difficult to keep a track what relates to what and where to add, remove. or change stuff.

There is this sentiment that you don’t design the homepage of a site first. For most sites, it’s an anomaly. It’s unlike any other page and not something to base the patterns you use for the rest of the site or help inform other pages.

You might call it a one-off.¹

One-offs are OK! A world without one-offs is very boring. But a site chock-full of one-offs leads to familiar problems: inconsistency and non-reusable CSS that leads to … Read article “One-Offs”

Do you design digital products (or websites) and hand design files off to developers for implementation? If you answered yes, settle in! While the should-designers-code debate rages on, we’re going to look at how adding a methodology to your design workflow can make you faster, more consistent, and loved by all developers… even if you don’t code.… Read article “Consistent Design Systems in Sketch With Atomic Design and the Auto-Layout Plugin”

Even if you consider yourself a CSS expert, chances are that at some point on a large project you’ve had to deal with a convoluted, labyrinthine stylesheet that never stops growing. Some stylesheets can feel like a messy entangled web of inheritance. … Read article “On the Growing Popularity of Atomic CSS”

• “Atomic” is a browser-based timeline animation tool.
• “Atomic Design” is a design methodology in which you design very small parts and combine them in larger and larger pieces to build a whole.
• “Atomic CSS” is a system in which you apply styles directly through designated HTML classes.
• “Project Atomic” is something for running containerized applications, like Docker? I dunno it’s DevOps-y and above my head.
• “Atomic Web Browser” is an old (looks abandoned) iOS web browser.

None of them have … Read article “The Atomics”

The following is a guest post by Nick Berens, a senior front-end developer at wisnet.com. Nick and his team have been building websites through custom style guides for years. Over those years, Nick has been building and evolving a tool to help with this process. I’ll let Nick explain both the philosophy and the tool.… Read article “Style Guide Driven Development with Atomic Docs”