Use atomic design ftw

Use atomic design WTF !
@loicgoyet

atoms molecules organisms templates pages

molecule example
buttoninput group

organisms example
Dr. Manhattan Home - About - Contact buttoninput group

template example
Dr. Manhattan Home - About - Contact buttoninput group
Col section heading
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit. Donec ut
leo non erat vehicula
aliquam. Donec lorem
tellus, rhoncus ac orci
vel, pellentesque sodales
tellus. Aenean mollis
laoreet egestas. Aliquam
finibus sem pretium est
porta consectetur. Sed
tempor scelerisque elit
quis accumsan. Morbi
sagittis lorem feugiat
blandit lobortis. Vivamus
ut tempus ligula.
Nulla dictum tellus nec
fermentum varius. Fusce
magna ex, rutrum sit
amet scelerisque nec,
cursus sit amet elit.
Interdum et malesuada

page example
Dr. Manhattan Home - About - Contact search
Welcome
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Donec ut leo non erat vehicula
aliquam. Donec lorem tellus,
rhoncus ac orci vel, pellentesque
sodales tellus. Aenean mollis
laoreet egestas. Aliquam finibus
sem pretium est porta
consectetur. Sed tempor
scelerisque elit quis accumsan.
Morbi sagittis lorem feugiat
blandit lobortis. Vivamus ut

scalability & consistency
-Brad Frost
assembling rather than deconstructing, we’re
crafting a system right out of the gate instead of
cherry picking patterns after the fact.

button
padding x-axis: 1.2empadding y-axis: 0.8em
line-height: 1.2
font-size: 1.1em
border-width: 0.01em
background-color: rgb(220, 222, 224)
border-color: rgb(166, 170, 169)

button
tooltips
breadcrumbs
jumbotron
thumbnails
background-color: rgb(220, 222, 224)

button
tooltips
breadcrumbs
jumbotron
thumbnails
.bg-color—gray

<button class="bg-color--gray border-color--gray-dark color--gray-dark padding-y--08x padding-x—12x …”>
button
</button>
-previous article comment
“What about maintenability? Consistence? Markup and style decoupling? (…)
How do you enforce component reusing? Common styling rules?”

<button class=“button”>button</button>
// scss
.button {
@extend %bg-color--gray;
@extend %border-color--gray-dark;
@extend %color--gray-dark;
@extend %padding-y--08x;
@extend %padding-x—12x;
}
// less
.button {
&:extend(.bg-color--gray);
&:extend(.border-color--gray-dark);
&:extend(.color--gray-dark);
&:extend(.padding-y--08x);
&:extend(.padding-x—12x);
}

.bg-color--gray,
.button {
background-color: rgb(220, 222, 224);
}
.border-color--gray,
.button {
border—color: rgb(166, 170, 169);
}
…

@mixin bg-color($color) {
background-color: map-get($colors, $color);
}
.button {
@include bg-color(‘gray’);
}

// scss
.button {
@include bg-color(‘gray’);
@include border-color(‘gray-dark’);
@include color(‘gray-dark’);
@include padding-y(0.8);
@include padding-x(1.2);
}
// less
.button {
.bg-color(‘gray’);
.border-color(‘gray-dark’);
.color(‘gray-dark’);
.padding-y(0.8);
.padding-x(1.2);
}

.button {
}
.thumbnail {
}

// scss
$button—padding-x: 0.8;
.button {
@include padding-x($button-padding-x);
…
}
// less
@button-padding-x: 0.8;
.button {
.padding-x(@button-padding-x);
…
}

// main.scss
$button—bg: green;
@import ‘bower_component/button/button.scss’;
// bower_component/button/button.scss
$button—bg: gray !default;
.button {
background-color: $button-bg;
…
}
// output.css
.button {
background-color: green;
}

// bower_component/button/button.scss
$button—box-shadow: false;
.button {
background-color: $button-bg;
@if $button—box-shadow {
box-shadow: $button—box-shadow;
}
}

$button-themes: (
'primary': (
'bg': blue,
'color': white,
),
'success': (
'bg': green,
'color': white,
),
) !default;
@each $theme, $properties in $button-themes {
.button--#{$theme} {
background-color: map-get($properties, 'bg');
color: map-get($properties, 'color');
}
}

// gulpfile.js
var inject = require('gulp-inject');
gulp.src('./main.scss')
.pipe(inject(gulp.src(‘./bower_component/button/button.scss’), {
relative: true,
name: ‘stylevendor’,
}))
.pipe(gulp.dest(‘./main.scss'));
// main.scss
/* stylevendors:scss */
@import ‘./bower_component/button/button.scss’; // written by gulp
/* endinject */

project partial import order
1. atoms
2. molecules
3. organisms
4. templates
5. pages

project partial import order
3. atoms
4. molecules
5. organisms
6. templates
7. pages
1. code helpers
2. declaration generator

architectures
• abstracts/
• base/
• vendors/
• components/
• layout/
• pages/
• themes/
main.scss

architectures
1. abstracts/
2. base/
3. vendors/
4. components/
5. layout/
6. pages/
7. themes/
➡ code helpers
➡ declaration helpers
➡ atoms
➡ molecules
➡ organisms
➡ templates
➡ pages

css good practices specificity
only classselectors (0 / 0 / 1 / 0)
Nesting Depth max : 2

// wrong
.block {
&.is-active {
.block__component {
…
}
}
}

// good
@mixin when-block-active {
.block.is-active & {
@content;
}
}
.block__component {
@include when-block-active {
…
}
}

css good practices semantic
no business-logic in selector - design hint for selector
Titre de l’actualité
If you are an infrequent traveler you may
need some tips to keep the wife happy
while you are jet setting around the globe.
Many individuals do...
Lire la suite

// wrong
.blog-item {
…
}
Lire la suite

// good
.thumbnail {
…
}
Lire la suite

css good practices declaration type
atoms molecules organisms templates pages
+++ paint
+++ layout
++ paint
++++ layout
+ paint
+++++ layout
++++ paint
++ layout
+++++ paint
+ layout

css good practices values
No Magic Numbers !
// wrong !
.grid {
@include clearfix;
margin-left: -10px;
margin-right: -10px;
}
…
.grid__col {
float: left;
padding-left: 10px;
padding-right: 10px;
}

No Magic Numbers !
$grid—gutter: 20px;
.grid {
@include clearfix;
margin-left: -$grid—gutter / 2;
margin-right: -$grid—gutter / 2;
}
…
.grid__col {
float: left;
padding-left: $grid—gutter / 2;
padding-right: $grid—gutter / 2;
}

No Magic Numbers !
$grid—gutter: 20px;
.grid {
@include clearfix;
margin-left: ceil(-$grid—gutter / 2);
margin-right: floor(-$grid—gutter / 2);
}
…
.grid__col {
float: left;
padding-left: ceil($grid—gutter / 2);
padding-right: floor($grid—gutter / 2);
}

Use atomic design ftw

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Use atomic design ftw (20)

Recently uploaded (20)

Use atomic design ftw