Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

TechDebt: Clean-up Footer Styling

Created by: webuxr

This ticket involves 4, very small, code-level issues I found in the a11yproject.com site footer that I feel can be fixed quickly, carries near zero risk for the site, and reduces tech debt.

After completing the work detailed below, a typical site user should not notice a thing while a developer/contributor might appreciate these small issues being cleaned-up.

Summary

  1. Remove inline margin-bottom: 0; CSS from footer HTML
  2. Remove unnecessary .row class from footer HTML
  3. Swap ID for class in footer HTML, CSS, and JS
  4. Remove duplicate styles from master.scss

Overview

1. Remove inline margin-bottom: 0; CSS from footer HTML

Add a new class to _sass/_footer.scss for setting margin-bottom: 0; and add this new class as needed in _layouts/default.html.

2. Remove unnecessary .row class from footer HTML

Perhaps an oversight however, the <ul> of contributors in the footer has the class row applied. Since this <ul> is already the child of a <div> with the class row applied, re-applying it to the <ul> is unnecessary. Removing this class just makes things cleaner and more clear. I believe this class was never needed in the first place.

3. Swap ID for class in footer HTML, CSS, and JS

Working with the same chunk of HTML mentioned in number 2. ...and I swap the reference to ID#continubutors-list to class .continubutors-list in the listed JS and SCSS file. This now matches how we're referencing other, similar areas of the footer in our JS and SCSS files. Plus classes are nice and flexible, IDs are not.

4. Remove duplicate styles from master.scss

If we look in css/master.scss and then in _sass/_notification.scss, we'll notice duplicated style declarations. Removing these styles from css/master.scss not only removes the dupe but gets rid of poor code style (style declarations should not appear in our main SASS stylesheet which is meant only for importing other styles).

Contributor notes

I've already done the work above in my local copy of the A11y site but wanted to follow our own process for fixing things (plus I'm just so bored at the moment). I do however, still need to fully test my work in more platform/browser/device combinations.

Otherwise, feedback welcome!