14th Floor, KLJ Tower, Delhi Office
| <div class="container"> | |
| <h1>Use <code>:root</code> for Flexible Type</h1> | |
| <h2>Resize this Window 😁</h2> | |
| <p>Now that you've set the <code>:root</code> pseudo-class to calculate <code>font-size</code> based on <a href="https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/">viewport height and width</a>, the body will utilize the root <code>em</code> that's based on the value calculated by <code>:root</code>. <em>Notice when you resize the window that the root font size for all elements stays relative no matter viewport size?</em></p> | |
| <p>Sugar plum cake apple pie sweet fruitcake lemon drops gingerbread. Tart icing topping apple pie chupa chups jelly-o chupa chups ice cream. Jelly-o pie chocolate bar lollipop donut.</p> | |
| <p>Powder tiramisu dessert. Chocolate cake marzipan topping. Biscuit croissant gummi bears topping gingerbread cotton candy bonbon cupcake cake.</p> | |
| <p>Chocolate carrot cake jelly dragée. Sugar plum candy canes tiramisu. Chocolate marshmallow tootsie roll cake cake. |
| <!-- | |
| 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> |
| Anyway, the <button> example @jitendravyas posted earlier (from the Yahoo's site) may be the very best example to explain everything about ACSS. | |
| People new to ACSS will tell you that this is ugly like hell, that changing some styling for that button means to edit the markup which means to go against the Separation of Concern principle, that they do not understand what all these classes mean, how can somebody learn all that, that it is bloating the markup, and did I mention that it is ugly like hell? | |
| Now let's say you are a Yahoo! engineer working working on the "Universal Header (UH for short)" team. You are in charge of making that big ass component that is the UH work across all the many many web sites Yahoo owns. Web sites built on various tech stacks, dealing with different script directions (RTL/LTR), different release cycles, different CSS resets, etc. etc. I have worked with that team and I can tell you they are facing really big challenges (including styles injected to pages by crappy ads)... | |
| Before A |
| <!doctype html> | |
| <!--[if IE]><html xmlns="http://www.w3.org/1999/xhtml" class="ie"><![endif]--> | |
| <!--[if !IE]><!--> | |
| <html style="margin: 0;padding: 0;" lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> | |
| <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="Content-Type" content="text/html;" charset="utf-8"> | |
| <!--[if !mso]><!--> |
| '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' |
| <!doctype html> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <title></title> | |
| <style type="text/css"> | |
| #outlook a { | |
| padding: 0; | |
| } |
| <mjml> | |
| <mj-head> | |
| <mj-attributes> | |
| <mj-text font-family="-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',sans-serif" font-size="16px" color="#212121" font-weight="400" font-style="normal" /> | |
| </mj-attributes> | |
| </mj-head> | |
| <mj-body> | |
| <mj-container> | |
| <mj-section> | |
| <mj-column> |
| <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"/> |