The single hardest part of front-end development at scale is making changes to code and understanding all of the visual and behavioral effects that will occur as a result.
When you build a component, tests should be written that expose each state a component can be in. This test should generate a static html file and a corresponding image for every discrete state a component can be in.
| <mjml> | |
| <mj-body> | |
| <mj-container background-color="#ccc"> | |
| <!-- Company Header --> | |
| <mj-section padding-bottom="0" background-color="#fff"> | |
| <mj-column width="100%"> | |
| <mj-image align="left" src="https://avatars0.githubusercontent.com/u/16115896?v=3&s=200" width="50px"/> |
| <mjml> | |
| <mj-body> | |
| <mj-container background-color="#f8f8f8"> | |
| <!-- Company Header --> | |
| <mj-section padding-bottom="0"> | |
| <mj-column width="100%"> | |
| <mj-image align="left" src="https://avatars0.githubusercontent.com/u/16115896?v=3&s=200" width="50px"/> |
| <mjml> | |
| <mj-body> | |
| <mj-container background-color="#f8f8f8"> | |
| <!-- Company Header --> | |
| <mj-section padding-bottom="0" padding-top="0" padding-bottom="0" padding-left="0"> | |
| <mj-column> | |
| <mj-image padding-top="20" padding-left="15" padding-bottom="15" align="left" src="https://s3.eu-central-1.amazonaws.com/airfy-mail-assets/Logo.png" width="62px"/> |
| 'atom-text-editor[data-grammar="text html nunjucks"]:not([mini])': | |
| 'tab': 'emmet:expand-abbreviation-with-tab' | |
| 'atom-text-editor[data-grammar="source nunjucks"]:not([mini])': | |
| 'tab': 'emmet:expand-abbreviation-with-tab' | |
| #https://github.com/atom/autocomplete-plus/issues/86#issuecomment-82661027 | |
| 'atom-text-editor.autocomplete-active:not([mini])': | |
| 'tab': 'autocomplete-plus:confirm' |
| <!-- | |
| Example: A simple list component with each item as a block one below other with some padding and border. | |
| --> | |
| <!-- Atomic CSS --> | |
| <ul class="MB(baseSpacing) Bgc(#0280ae)"> | |
| <li class="P(halfBaseSpacing) BdB(1px)"></li> | |
| ... | |
| </ul> |