Atomic Design FTW

Transcript

1. ATO M I C D E S I G N F T W W R I T I N G B E T T E R C S S
3. F R A M EWO R K S ?
4. <button class="btn btn-success">Success</button> <button class="btn btn-danger">Danger</button> // HTML - buttons
5. "For performance reasons, all icons require a base class and individual icon class."
7. .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; … } .btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; } // button structure (base) // button layout (individual)
8. B O S O N S
10. H I G G S B O S O N P L AC E H O LD E R S
11. %boson-btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; … } %boson-btn-primary { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .atom-btn-primary { @extend %boson-btn; @extend %boson-btn-primary; }