Use atomic design ftw

Use atomic design WTF !@loicgoyet

https://twitter.com/loicgoyet

atoms molecules organisms templates pages

atom example

button

molecule example

button input group

organisms example

Dr. Manhattan Home - About - Contact button input group

template example

Dr. Manhattan Home - About - Contact button input group

Col section headingLorem 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 fames ac ante ipsum

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 s e m p r e t i u m e s t p o r t a co n s e c tetu r. S e d te m p o r scelerisque elit quis accumsan. Morbi sagittis lorem feugiat blandit lobortis. Vivamus ut tempus ligula.

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

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

@Extends

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

…

@mixins


@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 { 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); }

@variables


// 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

architectures1. 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 class selectors (0 / 0 / 1 / 0)

Nesting Depth max : 2

css good practices specificity

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

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

}

.block__component { @include when-block-active { … } }

css good practices semanticno 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); }

@loicgoyet - @nantescss -

Use atomic design ftw

Technology

Transcript of Use atomic design ftw