[META] Clean up templates and CSS

Note: We are going to try and have this issue as the one and only code cleanup meta issue for Bartik.

Problem/Motivation

1. Bartik's template files need to be assessed and cleaned up of redundant markup, bad formatting and ID's.
2. Bartik's CSS files need to follow Drupal's CSS Coding Standards.

Proposed resolution

General cleanup

• #1903048: Revise Bartik template indentation inline with best practices.
• #2395825: Remove closing tag comments in template files.
• #2399709: Remove media.css from Bartik, add it's current code directly to the components it references.
• #2398447: Remove the "typography" CSS file in Bartik
• #2396489: Add missing RTL rules to Bartik theme CSS
• #2548805: Add sensible base layout styles for lists in Bartik.
• #2399247: Reduce number of different font-sizes in Bartik for better consistency

Refactor CSS into components (current focus)

Also next we are raising issues based specifically around the CSS files in Bartik that were created in #2375673: Split Bartik's CSS into SMACSS style components. We are aiming to refactor the code for Bartik (templates and CSS) based around components and avoid issues that make changes across a lot of files in Bartik.

Components currently in Bartik listed with their equivalent clean up area issue.

NOVICE TASKS

 
 
The work that will be within the issues in the table above are as follows:

Cleanup tasks

1. Check each selector in the CSS file (associated with the particular issue) is in use within core right now.
   If not...
   a) Check to see if the classes in core have been changed and correct them (for e.g. I found this in this issue ).
   or
   b) Remove that CSS completely from the CSS file.
2. a) Check the CSS selectors are not being replicated in other stylesheets in Bartik.
   b) Check the CSS properties are not being overridden by other stylesheets in Bartik.
   If a) move all of the properties to the selector in the stylesheet that you think most appropriate for the component you are dealing with.
   If a) and b) also remove the CSS properties and values being overridden within that ruleset.
3. If you find CSS for a component which seems out of place in the file it is currently in move it to the one you think is the correct one.
4. If a selector appears to be too long and/or too specific, check if the selector can be simplified. for eg. .something .something .something { } being modified to .something .something { }.
5. Check that RTL styles exist when needed and are formatted as per the guidelines. (for e.g. we found that RTL styles are broken on certain pages in this issue, so fix anything you see missing/incorrect in the CSS file.
6. If you think the contents of the CSS file could be further broken down into more components CSS files, or grouped together with other existing CSS files to form one component do it. The initial SMACSS issue may not of been perfect, guidelines on CSS file organisation for Drupal 8 can be found here.
7. Check the markup from the templates that all of the classes are used as selectors in the CSS files. If not remove them. See an example issue here for this.

Formatting tasks

1. Add a File comment to the top of the stylesheet - see here for guidelines.
2. Check any other comments are formatted correctly - see here for guidelines.
3. Check Whitespace is being used correctly, this includes indentations and line breaks - see here for guidelines.
4. Check the formatting of rulesets, properties and media queries are correct - see here for guidelines.
5. As mentioned above, check existing RTL styles are formatted correctly - see here for guidelines.

These tasks will be included in the issues for each component and referenced back to this meta.