Clean up the "footer" component in Bartik

Investigated this a bit. I think that current footer.css (+some footer related stuff from other files) should be split up to either 2 or 4 separate files. If 2, then one for structural styles and one for visual styles. If 4, then one for footer menu, one for footer blocks, one for footer columns and one for footer generally.

In SMACSS world, you would avoid re-styling components based on their location, and instead use variants. Maybe it would sense to do the same here.

I think separating the structural/layout and visual styling is a bad idea for themes, although I think it makes sense for modules. All code related to a component should be in the same file.

Started to work a bit on this. At this stage I removed footer related id's from page.html.twig and changed css on typography.css, colors.css, contextual.css, footer.css, table.css, layout.css and print.css to match this change.

To see testbot.

Made a split from footer.css to four different files: footer.css, footer-menu.css, footer-columns.css and footer-wrapper.css. Cleaned up a bit the footer.css and changed the preprocess that adds footer-columns class to body. Instead is adding layout-footer-columns now.

New files were missing and fixed some coding standard issues also.

1. +++ b/core/themes/bartik/css/components/footer-menu.css
   --- /dev/null
   +++ b/core/themes/bartik/css/components/footer-wrapper.css
   
   +++ b/core/themes/bartik/css/components/footer-wrapper.css
   +++ b/core/themes/bartik/css/components/footer-wrapper.css
   @@ -0,0 +1,34 @@
   
   @@ -0,0 +1,34 @@
   +/**
   + * @file
   + * Visual styles for Bartik's footer wrapper.
   + */
   

   .footer__wrapper is a child of .footer. So it should be able to be contained in the same file as .footer.

2. +++ b/core/themes/bartik/templates/page.html.twig
   @@ -175,22 +175,22 @@
   +    <div class="footer__wrapper">
          <footer class="section">
            {% if page.footer_firstcolumn or page.footer_secondcolumn or page.footer_thirdcolumn or page.footer_fourthcolumn %}
   -          <div id="footer-columns" class="clearfix">
   +          <div class="footer-columns" class="clearfix">
                {{ page.footer_firstcolumn }}
                {{ page.footer_secondcolumn }}
                {{ page.footer_thirdcolumn }}
                {{ page.footer_fourthcolumn }}
   ...
   +          <div class="footer" role="contentinfo" class="clearfix">
                {{ page.footer }}
   

   We have loads of mentioned of the word footer here, the logic is kind of weird. How can we have a footer class inside of a footer element? I think we need to rewrite this markup and maybe rename the footer region so it makes sense. We also switch between using the footer-wrapper element as the main parent and the .footer element. I also think it makes sense to rename this component to site-footer because it's more specific, vs the generic meaning of the footer HTML component.

Here's is a suggestion for the footer markup:

    <div class="site-footer__wrapper">
      <footer class="site-footer">
        {% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth %}
          <div class="footer-columns clearfix">
            {{ page.footer_first }}
            {{ page.footer_second }}
            {{ page.footer_third }}
            {{ page.footer_fourth }}
          </div>
        {% endif %}
        {% if page.footer_fifth %}
          <div role="contentinfo">
            {{ page.footer_fifth }}
          </div>
        {% endif %}
      </footer>
    </div>

I agree on most of stuff, but I wouldn't like to use footer_fifth as it's completely different element than previous four.

It's not a good practice to name the region after how it looks, because on narrow devices those columns are no longer columns

Ok, point taken.

New patch around. Don't need feedback on this as it's nowhere near ready. Sending it to testbot to see what happens.

And the patch.

After investigating this a bit, it's probably better to continue with #7 instead of #15.

Did some work on page.html.twig. Changed markup near the one @lewisnyman and @emma.maria suggested and changed the css to match it.

To see the testbot.

Did some more changes to page.twig.html and the css-files related to it and now we're starting to be pretty close on emma.marias suggestion.

This one also to testbot just to see the results.

No idea where that came from.

1. +++ b/core/themes/bartik/bartik.libraries.yml
   @@ -15,7 +15,10 @@ global-styling:
   +      css/components/footer-wrapper.css: {}
   

   The site-footer__wrapper is a subcomponent of site-footer so it can got into the same file.

2. +++ b/core/themes/bartik/bartik.libraries.yml
   @@ -15,7 +15,10 @@ global-styling:
          css/components/footer.css: {}
   

   This should also be renamed to site-footer to match the new component name.

3. +++ b/core/themes/bartik/css/colors.css
   @@ -42,8 +42,7 @@ a:active,
   -#page-wrapper,
   -#footer-wrapper {
   +#page-wrapper {
   

   I think we need to replace this with site-footer__wrapper instead of removing it

4. +++ b/core/themes/bartik/css/components/footer.css
   @@ -1,142 +1,33 @@
   -#footer .block .content {
   +.site-footer__bottom .block .content {
   

   Instead of replacing #footer with .site-footer__bottom we should be trying to be as broad as possible here. Let's just use .footer as the parent selector where ever possible

#23.1 Currently there is no styles for .site-footer.css outside layout.css, so I'll rename the file as site-footer.css which can be used for .site-footer and site-footer__wrapper styles, right?
#23.2 Footer.css is now for stuff that was previously targetted with #footer. #footer is now known ass .site-footer__bottom, so my guess is that this should be renamed as site-footer-bottom.css.
#23.3 I moved the style to footer-wrapper.css. Trying to think why I did it, but I'm not sure. For me it really doesnt make any difference in which one of these two files the bg-color is living. For consistency the original one is better tbh.
#23.4 I think this is as it should be. The styles were previously targetting only the content of blocks in #footer.

As a reminder. Originally the structure was:

<div id=footer-wrapper>
  <footer class=section>
     <div id=footer-columns>
     </div> <!---- #footer-columns ->
     <div id=footer>
     </div> <!---- #footer ->
  </footer>
</div>

Now it's:

<div class=site-footer__wrapper>
   <footer class=footer>
      <div class=site-footer__top>
      </div> <!---- .site-footer__top ->
      <div class=site-footer__bottom>
      </div> <!---- .site-footer__bottom ->
   </footer>
</div>

Assigned to myself.

Renamed the files:
footer.css -> site-footer-bottom.css
footer-wrapper.css -> site-footer.css
footer-menu.css -> site-footer-bottom-menu.css
footer-columns.css -> site-footer-top.css

Out of remaining todo-list I'm not completely sure if:

      <div class="site-footer__top clearfix">
        {{ page.footer_first }}
        {{ page.footer_second }}
        {{ page.footer_third }}
        {{ page.footer_fourth }}
      </div>
    {% endif %}
    {% if page.footer_fifth %}
      <div class="site-footer__bottom role="contentinfo">
        {{ page.footer_fifth }}

suggested by both lewisnyman and emma.maria can fit the current issue summary. I think that is affecting a lot of different things and not being just pure refactoring, right?

Removed the 3 extra files based on #28.

Thanks. I found a few things :P

1. +++ b/core/themes/bartik/css/colors.css
   @@ -42,8 +42,7 @@ a:active,
   +#page-wrapper {
   

   It looks like we've lost some styling here?

2. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,155 @@
   +.site-footer__wrapper .block .content a {
   ...
   +.site-footer__wrapper .block .content a:hover,
   +.site-footer__wrapper .block .content a:focus {
   

   Is it even possible to add links to the footer that aren't in a block? Do you think we could get away with removing .block .content from the selectors?

3. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,155 @@
   +.site-footer__wrapper .block {
   ...
   +.site-footer__wrapper tr.odd {
   ...
   +.site-footer__wrapper tr.even {
   

   In loads of these situations we are using the .site-footer__wrapper class as the parent selector but we should be using the main component as the selector, which is site-footer. The wrapper is a sub-component

4. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,155 @@
   +.site-footer__bottom .menu li a {
   +  float: left; /* LTR */
   +  padding: 0 12px;
   +  display: block;
   

   Display block is redundant when using with float.

5. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,155 @@
   +  border-right: 1px solid #555; /* LTR */
   +  border-color: rgba(255, 255, 255, 0.15);
   ...
   +  border-color: rgba(255, 255, 255, 0.15);
   +  border-right: none;
   

   These two sets LTR and RTL properties don't seem to match up

6. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,155 @@
   +[dir="rtl"] .site-footer__bottom .menu li:last-child a {
   +  padding-left: 0;
   +  border-left: none;
   +}
   +/**
   + * Visual styles for Bartik's footer top region.
   

   We need a blank line before this comment

7. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,155 @@
   +.site-footer__top .content li a {
   ...
   +[dir="rtl"] .site-footer__top .content li a {
   ...
   +.site-footer__top .content li a:hover,
   +.site-footer__top .content li a:focus {
   

   We can also remove the .content li from these selectors... I think

8. +++ b/core/themes/bartik/css/components/table.css
   @@ -10,7 +10,7 @@ table {
   -#footer-wrapper table {
   +.site-footer__wrapper table {
   
   @@ -51,8 +51,8 @@ tr th {
   -#footer-wrapper tr td,
   -#footer-wrapper tr th {
   +.site-footer__wrapper tr td,
   +.site-footer__wrapper tr th {
   
   +++ b/core/themes/bartik/css/layout.css
   @@ -45,10 +45,10 @@ body,
   -#footer-wrapper {
   +.site-footer__wrapper {
   ...
   -#footer-wrapper .section {
   +.site-footer__wrapper .footer {
   

   Also in these situations I think we should use site-footer instead of the wrapper.

9. +++ b/core/themes/bartik/templates/page.html.twig
   @@ -175,22 +175,22 @@
   +      <footer class="footer">
   

   We need to change this class to 'site-footer'

Rerolled after changes in layout.css.

Fixed: 31.1, 31.3, 31.4, 31.6, 31.7, 31.8 and 31.9.

page.html.twig cleanup went just in, so this is in need of reroll, again.

Rerolled & combined classes into one single attribute instead of having multiple class attributes.

Rerolled after #2392361: Bartik theme: “triptych” and footer-columns classes added to body but never used in CSS

It's starting to look good, but I think that in contextual.css and print.css we could target .site-footer instead of .site-footer__wrapper.

Me to, also in colors.css

+++ b/core/themes/bartik/css/components/footer.css
@@ -1,142 +1,155 @@
+.site-footer tr.even {
+  background-color: #2c2c2c;
+  background-color: rgba(0, 0, 0, 0.15);
...
+.site-footer__bottom {
   letter-spacing: 0.2px;
   margin-top: 30px;
   border-top: 1px solid #555;
   border-color: rgba(255, 255, 255, 0.15);
...
+[dir="rtl"] .site-footer__bottom .menu li a {
   float: right;
   border-left: 1px solid #555;
   border-color: rgba(255, 255, 255, 0.15);
...
+.site-footer__top h2 {
+  border-bottom: 1px solid #555;
+  border-color: rgba(255, 255, 255, 0.15);
...
+.site-footer__top a:focus {
+  background-color: #1f1f21;
+  background-color: rgba(255, 255, 255, 0.05);

In these situations, we don't need to provide a fallback color for rgba, because we no longer support IE8

I'll need to go through the code in browser to check to see if there are any redundant styles in there.

Working on this at dc brighton sprint.

Looks like last patch is missing whole site-footer.css.

I went through and tried to find optimisations here and there. It was too hard to suggest without checking out if they broke anything first. There were loads of redundant rgba colors being used on a solid background.

That one is making a huge difference in look of footer at least for me. Putting screenshots on in short while.

Before:

After:

Needs reroll after naming change on footer got commited.

rerolled the patch in #45 to accommodate the naming changes on footer.

#2422975: Bartik footer has CSS regressions. is now fixed

Patch no longer applies:

error: patch failed: core/themes/bartik/css/components/footer.css:1
error: core/themes/bartik/css/components/footer.css: patch does not apply
error: patch failed: core/themes/bartik/css/layout.css:55
error: core/themes/bartik/css/layout.css: patch does not apply

This should apply. I had to merge in changes and wasn't sure if which css declarations should stay or go so I just kept what seemed to belong to this issue. I didn't read everything but it looks like there was some minor changes in layout.css, so that'll need reviewing.

Reviewing.

Does not apply anymore.

vagrant@dev:/var/www/drupal8(8.0.x⚡) » git apply clean_up_the_footer-2398471-58.patch
error: patch failed: core/themes/bartik/css/layout.css:142
error: core/themes/bartik/css/layout.css: patch does not apply

Rerolled.

Added the changes to page.html.twig. Uploading the updated patch here.

Styling breaks after applying patch

Tried to inter-diff from #45, but failed.
So created patch with changes in page.htm.twig and css files according to that.
This cleanup will also cover https://www.drupal.org/node/2148319 and https://www.drupal.org/node/2304971.

I think it's better to keep each issue separate so it's easier to review and test.

Removed css of other issues and re-reolled & updated patch.

Send to test bot

Nice thanks

1. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,144 @@
   +/* ------------------ Footer ------------------ */
   

   We need to convert this comment into a similar style that is at the top of every other file, with w @file tag, also rename it site footer

2. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,144 @@
   +/* ------------------ Footer Top Styling ------------------ */
   ...
   +/* ------------------ Footer Bottom Styling ------------------ */
   

   These comments aren't inline with our single line comment standards, see: https://www.drupal.org/node/1887862#comments

@rpayanm Thanks for working on this!

1. +++ b/core/themes/bartik/css/colors.css
   @@ -1,4 +1,7 @@
   +/**
   + * @file
   + * Color Module Styles.
   + */
   

   The comment by @Lewis Nyman was ment for site-footer.css only. There are separate issues for the different stylesheets, for more info have a look at the meta issue: #1342054: [META] Clean up templates and CSS

2. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -1,52 +1,38 @@
   + * @file
   + * Footer.
   

   The comment should be updated to 'Site footer' to reflect the new name of the component.

+++ b/core/themes/bartik/templates/page.html.twig
@@ -167,10 +167,10 @@
+          <div id="site-footer__top" class="site-footer__top clearfix">

@@ -178,7 +178,7 @@
+          <div id="site-footer__bottom" class="site-footer__bottom clearfix" role="contentinfo">

This patch introduces two new id-attributes that are not referenced in any CSS or javascript. If I'm not mistaken these can be removed.

ok thank you for you review :)

Don't mind the testbot, it's having a bad day :)

1. +++ b/core/themes/bartik/css/components/contextual.css
   similarity index 59%
   rename from core/themes/bartik/css/components/footer.css
   
   rename from core/themes/bartik/css/components/footer.css
   rename to core/themes/bartik/css/components/site-footer.css
   

   The CSS file is renamed, but the file reference is not updated in bartik.libraries.yml. This means the CSS file is no longer loaded.

2. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -1,52 +1,38 @@
   +/* ------------------ Footer Top Styling ------------------ */
   
   @@ -82,65 +68,80 @@
   +/* ------------------ Footer Bottom Styling ------------------ */
   

   These comments are not in line with our CSS coding standards, see #74.2

ohh that rigth :)

Or would be this.

1. +++ b/core/themes/bartik/css/components/contextual.css
   @@ -1,8 +1,8 @@
   -.contextual-region .contextual .contextual-links a {
   +.contextual-region .contextual-links a {
   

   Let's leave this selector as is, since there is a separate issue for this file at #2398465: Clean up the "contextual" component in Bartik

2. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -1,52 +1,38 @@
   -  color: #c0c0c0;
   +.site-footer__wrapper .content {
      color: rgba(255, 255, 255, 0.65);
   

   The duplicate color statement is to provide a fallback for browsers that don't support rgba colors. Removing those is probably better to leave for another issue.

3. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -1,52 +1,38 @@
   -  color: #fcfcfc;
   +.site-footer__wrapper .content a {
      color: rgba(255, 255, 255, 0.8);
   

   Same here: the duplicate color attribute is to provide a fallback for browsers that have no support for rgba colors.

4. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -1,52 +1,38 @@
   -  color: #fefefe;
   +.site-footer__wrapper .content a:hover,
   +.site-footer__wrapper .content a:focus {
      color: rgba(255, 255, 255, 0.95);
   

   And here

5. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -54,27 +40,27 @@
   -#footer-columns .content {
   +.site-footer__top {
      margin-top: 0;
    }
   

   This is a different selector. The .site-footer__top has no margin-top.

6. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -54,27 +40,27 @@
   -#footer-columns .content ul {
   +.site-footer__top ul {
   ...
   -[dir="rtl"] #footer-columns .content ul {
   +[dir="rtl"] .site-footer__top ul {
   

   These changes introduce a visual regression of the contextual links in the footer:

   

7. +++ b/core/themes/bartik/templates/page.html.twig
   @@ -167,10 +167,10 @@
   -    <div id="site-footer__wrapper">
   +    <div id="site-footer__wrapper" class="site-footer__wrapper">
   

   Let's remove this id as well when it is no longer in use.

@lewis,
Both done.

@idebr,
1. Done.
2/3/4. I think we should do this in same issue, when cleaning up specific file.
5. Done.
6. Done, but not sure this is best approach. For now ul, li inside .content will get effected by styling.
7. Done.

Patch no longer applies after #2398451: Clean up "layout" CSS in Bartik was committed.

@crazyrohila RE: 84.2 / 84.3 / 83.4 We left the fallback colors in on purpose in other issues mentioned in the meta #1342054: [META] Clean up templates and CSS. I love cleaning up code as much as you do (probably more), but let's leave this for another day :)

@idebr, That's fine.
Updated code.

Changes look good! Needs a reroll after #2148319: h2 on footer blocks must be hidden by default but must show when its enable was committed.

@crazyrohila Thanks for the reroll! I found no more visual regressions, so that's great :). I do think we can clean up some more unused and unnecessary css:

1. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,189 @@
   +.region-footer-first,
   +.region-footer-second,
   +.region-footer-third,
   +.region-footer-fourth,
   +.region-footer-fifth {
   

   Let's replace these selectors with .site-footer .region?

2. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,189 @@
   +  .region-footer-first,
   +  .region-footer-second,
   +  .region-footer-third,
   +  .region-footer-fourth {
   ...
   +  [dir="rtl"] .region-footer-first,
   +  [dir="rtl"] .region-footer-second,
   +  [dir="rtl"] .region-footer-third,
   +  [dir="rtl"] .region-footer-fourth {
   ...
   +  .region-footer-first,
   +  .region-footer-second,
   +  .region-footer-third,
   +  .region-footer-fourth {
   

   Let's replace these selectors with .site-footer__top .region?

3. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,189 @@
   +.site-footer__top .content li {
   +  list-style: none;
   +  margin: 0;
   +  padding: 0;
   +}
   

   These styles don't seem to have any effect and can be removed.

4. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,189 @@
   +.site-footer__bottom .menu ,
   +.site-footer__bottom .menu-item {
   +  list-style: none;
   +  margin: 0;
   +  padding: 0;
   +}
   

   Let's split these selectors up, since the margin and list-style declaration have no effect on .menu-item.

5. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,189 @@
   +  border-color: rgba(255, 255, 255, 0.15);
   

   The styling for border-color is not RTL specific and can be removed here.

6. +++ b/core/themes/bartik/css/components/table.css
   @@ -11,7 +11,7 @@ table {
   -#footer-wrapper table {
   +.site-footer__wrapper table {
   
   @@ -69,8 +69,8 @@ tr th {
   -#footer-wrapper tr td,
   -#footer-wrapper tr th {
   +.site-footer__wrapper tr td,
   +.site-footer__wrapper tr th {
      border-color: #555;
      border-color: rgba(255, 255, 255, 0.18);
    }
   

   Let's move these overrides to the site-footer stylesheet, as they belong to the site-footer component.

7. +++ b/core/themes/bartik/templates/page.html.twig
   @@ -167,10 +167,10 @@
   -    <div id="site-footer__wrapper">
   +    <div class="site-footer__wrapper">
   ...
   -          <div id="footer-columns" class="clearfix">
   +          <div class="site-footer__top clearfix">
   

   The site-footer currently uses three wrappers. Let's reduce this to two: .site-footer and .site-footer__top/__bottom.

8. +++ b/core/themes/bartik/templates/page.html.twig
   @@ -167,10 +167,10 @@
          <footer class="site-footer section layout-container">
   

   The .section class here doesn't do anything and can be removed.

9. +++ b/core/themes/bartik/templates/page.html.twig
   @@ -178,7 +178,7 @@
   +          <div class="site-footer__bottom clearfix" role="contentinfo">
   

   The newly added class clearfix doesn't do anything and can be removed.

There was visual regression issue against latest HEAD. Attached Screenshot.

@idebr, Thanks for feedback, appreciate that. Hope I'll have sharp eye like that after 3-4 months continue working on core's css, and can avoid these silly mistakes :P

1., 2. Done.
3., 4. Merged site-footer__top and site-footer__bottom li. Removed list-style and margin, but we still need padding to override default padding from system.theme.css
5., 6. Done
7. There are two wrappers around site-footer__top and site-footer__bottom, one to apply background and other for max-width. For Now I have removed one, and applied .layout-container class to site-footer__top and site-footer__bottom.
8., 9. Done

@crazyrohila Awesome changes! I found a last one:

+++ b/core/themes/bartik/css/components/site-footer.css
@@ -93,18 +92,10 @@
 .site-footer__top .content ul {
-  list-style: none;

By removing the list-style attribute, the list items now displays discs outside the container. Let's either keep the current styling (eg. no discs) or fix the display of the discs so they are placed inside the container:

Removing list-style from all ul doesn't seem a good option to me, because we are providing wysiwyg to user. So change that selector to .menu and increased padding a bit for ul, ol.

And there was a issue with blockquote too, text was visible, which is fixed now.

Before

After

@crazyrohila Thanks, this is looking really great! I found two minor nitpicks and one regression:

1. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,189 @@
   +.site-footer blockquote {
   +    color: #555;
   +}
   

   Nitpick: the attribute has 4 spaces while the Drupal coding standards requires 2.

2. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -0,0 +1,189 @@
   +.site-footer .content ol,
   +.site-footer .content ul {
   +  padding-left: 1.4em; /* LTR */
   +}
   +[dir="rtl"] .site-footer .content ol,
   +[dir="rtl"] .site-footer .content ul {
   +  padding-right: 1.4em;
   +  padding-left: 0;
   +}
   ...
   +.site-footer__top .content .menu {
   +  padding-left: 0; /* LTR */
   +}
   +[dir="rtl"] .site-footer__top .content .menu {
   +  padding-right: 0;
   +}
   

   This adds a 1.4em padding-left to the footer menu in site-footer_bottom. You can either use .site-footer .content ul:not(.menu) or add a new selector to override the padding.

   

3. +++ b/core/themes/bartik/css/components/table.css
   @@ -11,9 +11,7 @@ table {
   -#footer-wrapper table {
   -  font-size: 1em;
   -}
   +
   

   Nitpick: this newline can be removed.

Updated code.

Didn't get time to check UI, just did suggested changes. tomorrow will check changes in UI.

@crazyrohila Cheers! I did another manual test to confirm there are no visual regressions.

Screenshot before:

Screenshot after:

This would be much, much easier to review if it were rolled with git diff -M10% — that'd make the diff show changes to the footer CSS, rather than showing a deleted file and an added file.

Might be wise to still do that, to make it easier for a committer.

@Wim Leers Thanks for the pro-tip, I learned something new today :)

Rerolled the patch in #95 with the tip from #97

CSS is not frozen in beta. Committed b3ab01c and pushed to 8.0.x. Thanks!