Some sass & less hints to a better implementation of the atomic design

1. Use atomic design WTF !
@loicgoyet

6. atoms molecules organisms templates pages

7. atom example
button

8. molecule example
buttoninput group

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

10. 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

11. 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

12. 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.

13. button

14. 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)

15. 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)

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

17. button
tooltips
breadcrumbs
jumbotron
thumbnails
.bg-color—gray

19. <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?”

20. @Extends

21. <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);
}

22. <button class=“button”>button</button>
.bg-color--gray,
.button {
background-color: rgb(220, 222, 224);
}
.border-color--gray,
.button {
border—color: rgb(166, 170, 169);
}
…

24. @mixins

25. <button class=“button”>button</button>
@mixin bg-color($color) {
background-color: map-get($colors, $color);
}
.button {
@include bg-color(‘gray’);
}

26. <button class=“button”>button</button>
// 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);
}

27. <button class=“button”>button</button>
.button {
background-color: rgb(220, 222, 224);
border—color: rgb(166, 170, 169);
}
.thumbnail {
background-color: rgb(220, 222, 224);
border—color: rgb(166, 170, 169);
}

28. @variables

29. <button class=“button”>button</button>
// 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);
…
}

30. // 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;
}

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

32. $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');
}
}

36. // 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 */

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

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

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

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

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

42. css good practices specificity
// wrong
.block {
&.is-active {
.block__component {
…
}
}
}

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

44. 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

45. css good practices semantic
no business-logic in selector - design hint for selector
// wrong
.blog-item {
…
}
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

46. css good practices semantic
no business-logic in selector - design hint for selector
// good
.thumbnail {
…
}
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

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

48. 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;
}

49. css good practices values
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;
}

50. css good practices values
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);
}

52. @loicgoyet - @nantescss -