solution • Atomic Design and Patern Systems - martindubenet/wed-dev-design GitHub Wiki
« Atomic Design » is about coming up with a consistent taxonomy, finding a grouping principle for an intrinsic elements based on the different extrinsic types of dependencies. This term was first documented in 2013 by Brad Frost them as a book in 2016.
| Nomenclature | Concept | Usage (based on Bootstrap v4 components) |
|---|---|---|
| Big Bang | Basic set-up frameworks required for the projet | Librairies for front-end technologies (NodeJS, Webpack VS Gulp, Angular VS React VS VueJS), interfaces (jQuery, Bootstrap) and fonts (Google Fonts, Font Awesome, etc…) and the default font-family and font-size for the <body>. |
| Atoms | If you can’t divide without it becoming useless, then it’s an atom | Color swatches — Typographic styles (<p>, <li> and <label> VS heading tags <h1> to <h6>) — Links anchors <a> — Buttons <a.btn> and <button> — Icons (Google’s Material Icons, Font Awesome, Bootstrap Icons or else) — Form controls (<input> fields without labels), boolean inputs (radio buttons and checkboxes), range sliders — Toggle switches — Tabs, badges, pills and tags — Tooltips — Avatars and product thumbnails VS high resolution <picture> placeholders (with responsive image dimension chart) |
| Molecules | Groups of atoms that work as a single component with a single function |
<select> dropdowns — Dropdown buttons — Dropdown menus — Radio/checkbox buttons inside regular buttons — Date pickers — Search components — Blockquotes — Breadcrumbs — Card components or Media objects with streched links — Input groups (special <label> for <input type> or combined radio/checkbox and text inputs) — Collapsible group items — Alert messages — Informative and boolean modal windows with a close button icon
|
| Organims | Combinations of multiple molecules and have more than one function | Navigation bars — Nav tab controls (active VS clickables tabs) — Media (Music, Video) embeded players — Media grids — Progress indicator — Data tables — Carousels — Form fieldsets |
| Templates | Layout of common site block or pages based on a purpose | Site <header>, <footer> and common <main> contents — Index of articles (list) pages — Detailed article pages — Media player pages — Search results pages — Interactive form pages |
| Pages | A unique page that as it’s own mockup or specifications | Homepage — Contact us — 404 Error — Legal terms of usage and/or privacy statements |
Once a mockup is developed, tested and live on production servers, coming from a design system or not, the designers should not be allowed to do design request on an existing (web) product without a proper request to do so.
Therefor when editing Atoms, Molecules and Organisms styles, it is the designers responsibility to validate with (front-end) developers that the new styles don't break existing Components.
Previous to Ai agents, the « Figma for VS Code extension » provided an easy way for developers to access and inspect designs right from VS Code. You can navigate and inspect design files, collaborate with designers, track changes, and speed up design implementation—all without leaving your development environment.
... we (now) live is a crazy word where our brains can't keep up with the pace at which things evolve. Ask your AI agent for the latest news.