| # | |
| # This is the main Apache HTTP server configuration file. It contains the | |
| # configuration directives that give the server its instructions. | |
| # See <URL:http://httpd.apache.org/docs/2.4/> for detailed information. | |
| # In particular, see | |
| # <URL:http://httpd.apache.org/docs/2.4/mod/directives.html> | |
| # for a discussion of each configuration directive. | |
| # | |
| # Do NOT simply read the instructions in here without understanding | |
| # what they do. They're here only as hints or reminders. If you are unsure |
| # Virtual Hosts | |
| # | |
| # Required modules: mod_log_config | |
| # If you want to maintain multiple domains/hostnames on your | |
| # machine you can setup VirtualHost containers for them. Most configurations | |
| # use only name-based virtual hosts so the server doesn't need to worry about | |
| # IP addresses. This is indicated by the asterisks in the directives below. | |
| # | |
| # Please see the documentation at |
| #!/bin/sh | |
| # homebrew taps | |
| brew tap caskroom/cask | |
| brew tap caskroom/versions | |
| brew tap homebrew/boneyard | |
| brew tap caskroom/fonts | |
| # Updated grep |
| <!-- Example --> | |
| <%= image_tag("rss.jpg", :alt => "RSS", :id => "rss", :class => "rss") %> |
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]><!--> |