Logo
  • PHP
    • HipHop / HHVM
    • Modern PHP
    • PHPStorm
    • LAMP
    • Laravel
    • Composer
    • PDO
  • JavaScript
    • node.js
    • AngularJS
  • CSS
    • SASS
    • “CSS4” (CSS level 4)
  • HTML
  • Git
  • LAMP
  • Vagrant
  • UI / UX
  • Architecture of …
  • Off-Topic
With ♥ from Berlin
March 31, 2014
Chris
Bootstrap, CSS
0

An introduction into Atomic Design, a super-clean way to style web applications

PreviousNext

A super-interesting talk of Brad Frost at beyond tellerrand 2013, explaining the basics of Atomic Design:

What is Atomic Design ?

Summarized, it’s super-simple: Brad Frost and Dave olsen, the guys behind the according site patternlab.io, call it “Build systems, not pages.” – Don’t design and develop (from a frontend perspective) full pages, instead design and develop small elements. Really small elements, indeed the smallest elements possible, like a button. And then combine these elements to larger units, like a input box, that consists of a label, a text field and a button. And then combine these units of elements to even larger units, like a full form. And so on … You get the idea. Like LEGO.

You don’t design every page.
You design and develop all used elements and element-combinations!

The final full pages are then just a combination of these units.

A little disclaimer:
Don’t be irritated by the very weird (german) first minutes of the clip, this is obviously a very nerdy joke.

Also check out patternlab.io, a wonderful set of components for starting with Atomic Design.

Side-note: Beyond Tellerrand 2014, a mostly english-speaking frontend conference in Germany, is already sold out. The speakers list is awesome, as usual: Chris Coyier, Ethan Marcotte, Erik Spiekermann, Jonathan Snook. You should know these names by the way :)

This article was written quite a while ago (8 years), please keep this in mind when using the information written here. Links, code and commands might be outdated or broken.

Random articles

  • Adobe releases Firebug-like developer tools to edit and extract PSDsAdobe releases Firebug-like developer tools to edit and extract PSDs
  • [Link] Improving Smashing Magazine’s Performance: A Case Study[Link] Improving Smashing Magazine’s Performance: A Case Study
  • Beautiful, minimal WordPress theme ZUKI by Elmastudio (with 30% discount)Beautiful, minimal WordPress theme ZUKI by Elmastudio (with 30% discount)
  • Jonathan Snook – CSS is a Mess – How to organize CSS in big projects (54min video talk)Jonathan Snook – CSS is a Mess – How to organize CSS in big projects (54min video talk)
  • 8 awesome pure CSS spinner / loader8 awesome pure CSS spinner / loader
  • [Link] Retinafy your Site / Device by Nijiko Yonskai[Link] Retinafy your Site / Device by Nijiko Yonskai
  • Angelina Fabbro talks about “CSS4” in this excellent conference videoAngelina Fabbro talks about “CSS4” in this excellent conference video
  • A quick video introduction into Shadow-DOM, the game-changing DOM-subtree-technologyA quick video introduction into Shadow-DOM, the game-changing DOM-subtree-technology
  • New features in SASS 3.3 (a talk by SASS-creator Chris Eppstein)New features in SASS 3.3 (a talk by SASS-creator Chris Eppstein)
atomicatomic designCSS
Share this

Leave A Comment Cancel reply

october cms

[Link] How To Install October CMS on a VPS running Ubuntu 14.04

Quick tutorial on how to install October CMS on Ubuntu 14.04 by DigitalOcean. Worth a bookmark, does the job. I

ilovepreloaders – A tumblr collection of preloader animations

An excellent collection of preloaders (GIFs, Movies and real ready-to-copy&paste code) here in this wonderful blog: http://ilovepreloaders.tumblr.com/ This thing just

hack-php

Facebook releases HipHop (HHVM) 3.0, adds mysqli and support for Hack language

Lots of movement in the PHP world these days! After releasing Hack (a dramatically improved fork of the entire PHP

js javascript

Push database changes to all clients in real-time (!) with AngularJS and Firebase

The coolest talk I’ve seen this week: Anant Narayanan of Firebase shows how to build a simple but really impressive

-45% (or even 50%) off on DesignWall today

Get 45% off on DesignWall.com with this coupon code: AMTHUNTER45 It’s also possible to get off 50% by taking part

Microsoft enters post-password era with Hello (promo video)

Just a short promotion clip, but definitly interesting: Microsoft announces Hello, the authentication system inside Windows 10, using fingerprints, iris

php

How to install latest PHP 5.4.x on Ubuntu 12.04 LTS (Precise Pangolin)

Disclaimer: Currently 5.5 is the very latest version of PHP, but the common way to install PHP 5.5 has a

phpstorm-8

PHPStorm 8 has just been released

The excellent PHP IDE PHPStorm just had a major release these days: Version 8 is out, coming with latest PHP

vagrant

How to setup a local server (in a virtual machine) with Vagrant in PHPStorm

This is part 1 of a series on How to get a modern workflow in PHP development. Part 2 is

pdo-debug

Debug PDO with this one-line function. Yeah!

Update: This article is a little bit older, the tool has changed gently. Everthing this article still works exactly like

1/4

Categories

Search

css3-chrome-font
Google rolls out Chrome 37, finally fixes horrible font-rendering
(Links) How to fix an extremely slow Symfony inside a Vagrant box
Stressed and unrelaxed while coding ? Try some ultra-deeply-relaxing ASMR audio clips. It will change your life. Seriously.
php
How to install sqlite driver for PHP in Ubuntu & Debian
vagrant
A super-simple Vagrant LAMP stack bootstrap (installable with one command)
the-php-login-project
How to install php-login-minimal on Ubuntu 12.04 LTS
What’s new in PHPStorm 10 (Official promo video)
Symfony devs: Creator of Symfony framework is hiring (Cologne, Germany)!
“Fuck you. Pay Me.” How to deal with clients, the professional way. An excellent talk with Mike Monteiro.
Interesting stats on SONY’s hacked passwords
phpstorm-8
When PHPStorm’s cache eats up your harddisk space
composer
[Link] How to require versions of PHP, HHVM / HipHop, GD, curl, openssl etc. with Composer
composer
How to install Composer on Windows 7 / 8 or Ubuntu
O’Reilly’s Learning JavaScript Design Patterns by Addy Osmani for free
phpstorm 7.0 php
How to install GitHub’s, NetBeans’s and Sublime2’s syntax highlighting code colours theme in PHPStorm 6/7

Tags

apache bash centos composer conference coupon CSS debian fonts framework git GitHub hack HHVM HipHop HTML HTML5 IDE JavaScript JS LAMP laravel linux mod_rewrite MVC MySQL Nginx optimization PHP PHP 5.5 PHP 5.6 phpmyadmin PHPStorm security server SSD Ubuntu UI UX vagrant video virtual machine voucher VPS wordpress
Side-Project: Wordle-Solver:
www.wordle-helper.info

Pages

  • Privacy Policy
 
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT