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

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.

Components Issue
css/base/elements.css #2398445: Clean up the "elements" component in Bartik
css/components/admin.css #2398453: Clean up the "admin" component in Bartik
css/components/book.css #2398455: Clean up "book" component in Bartik
css/components/breadcrumb.css #2398457: Clean up the "breadcrumb" component in Bartik
css/components/captions.css #2398459: Clean up "captions" component in Bartik
css/components/comments.css #2398461: Clean up the "comments" component in Bartik
css/components/content.css #2398463: Clean up the "content" component in Bartik
css/components/contextual.css #2398465: Clean up the "contextual" component in Bartik
css/components/dropbutton.component.css #2398467: Clean up "dropbutton" component in Bartik
css/components/featured-top.css #2398469: Clean up the "Featured-top" component in Bartik
css/components/featured-bottom.css #2419475: Clean up the "Featured bottom" component in Bartik
css/components/footer.css #2398471: Clean up the "footer" component in Bartik
css/components/form.css *Clean up form code in Bartik*
css/components/forum.css #2408513: Refactor forum module CSS files inline with our CSS standards
css/components/header.css #2466983: Clean up the "header" component in Bartik
css/components/help.css #2408581: Clean up the "help" component in Bartik
css/components/highlighted.css #1340640: Remove "Highlighted" region from Bartik
css/components/list.css #2408653: Remove lists.css from Bartik, add it's current code directly to the components it references.
css/components/messages.css #2456805: Clean up and fix bugs within the "messages" component in Bartik
css/components/node-preview.css *Clean up node preview code in Bartik*
css/components/pager.css #2408467: Rewrite pager component inline with our CSS standards
css/components/primary-menu.css *Clean up primary menu code in Bartik*
css/components/search.css #2486409: Clean up the "Search" component in Bartik
css/components/search-results.css #2486441: Clean up the "Search results" component in Bartik
css/components/secondary-menu.css *Clean up secondary menu code in Bartik*
css/components/shortcut.css *Clean up shortcut code in Bartik*
css/components/skip-link.css #2409069: Clean up the "skip-link" component in Bartik
css/components/sidebar.css *Clean up sidebar code in Bartik*
css/components/table.css *Clean up table code in Bartik*
css/components/tabs.css *Clean up tabs code in Bartik*
css/components/tips.css *Clean up tips code in Bartik*
css/components/user.css *Clean up user code in Bartik*
css/components/vertical-tabs.component.css #2408511: Rewrite vertical-tabs component inline with our CSS standards
css/components/views.css *Clean up views code in Bartik*
css/components/buttons.css *Clean up buttons code in Bartik*
css/components/media.css #2399709: Remove media.css from Bartik, add it's current code directly to the components it references.
css/ckeditor-iframe.css #2064379: Remove ckeditor-iframe.css and load relevant Bartik CSS files for CKEditor's iframe mode.
css/colors.css *Clean up colors code in Bartik*
css/layout.css #2398451: Clean up "layout" CSS in Bartik
css/print.css *Clean up print code in Bartik*

 
 
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.

Comments

jyve’s picture

looks like colors in lowercase are ok, so that's off the list: #1360790: CSS coding standards: Recommend lowercase not UPPERCASE hex colors

droplet’s picture

- RGB colors should be in uppercase.

lowercase ( code standard just updated )

JohnAlbin’s picture

Status:Active» Postponed

Drupal's current "CSS coding standards" are still (after 4 years) still marked as DRAFT. I actually disagree with 2 of the 3 things mentioned in the issue summary. (Which is part of the reason that the standards are still in draft mode.)

Once the CSS coding standards are out of DRAFT, we can revisit.

mgifford’s picture

Issue summary:View changes
Status:Postponed» Active
Related issues:+#1360790: CSS coding standards: Recommend lowercase not UPPERCASE hex colors

The CSS coding standards are out of draft mode now, right?

https://www.drupal.org/coding-standards

sqndr’s picture

Title:Bartik should follow the Drupal CSS coding standards» Bartik css file(s) should follow the Drupal CSS coding standards
sqndr’s picture

Assigned:jyve» Unassigned

Removing assignment because it was from 3 years ago.

emma.maria’s picture

Title:Bartik css file(s) should follow the Drupal CSS coding standards» [META] Bartik should follow the Drupal CSS coding standards.
Issue summary:View changes
Status:Active» Postponed
Issue tags:+frontend, +CSS
emma.maria’s picture

Issue summary:View changes
emma.maria’s picture

Issue summary:View changes
emma.maria’s picture

Issue summary:View changes
emma.maria’s picture

Issue summary:View changes
emma.maria’s picture

emma.maria’s picture

Title:[META] Bartik should follow the Drupal CSS coding standards.» [META] Overhaul Bartik's code.
Issue summary:View changes
Status:Postponed» Active
emma.maria’s picture

Issue summary:View changes
DickJohnson’s picture

Do we have any kind of "original plan of Bartik" around? I mean the kind of plan where is defined correct font-sizes, colors and stuff like that. Made few checks to current CSS and it f.ex looks like we're using more than 25 different font-sizes in Bartik and that sounds kind of a lot.

LewisNyman’s picture

@DickJohnson It was designed in the browser so I don't think that there will be able documentation outside of the code. Maybe you can make a separate issue to investigate all the font sizes? Kind of similar to #2298783: Investigate colour consistency in Seven

LewisNyman’s picture

Issue summary:View changes

I made a suggestion regarding the clean up plan in #2347751: Remove id selectors from templates of Bartik. I'm going to update the issue summary here so it's more clear what I mean in practice. One part is tweaking the wording of the sub-issue categories so they are not CSS files specific, but component specific. This is because a lot of CSS files do not completely match up with the standards's definitely of components.

One example is in elements.css:

a.feed-icon {
  display: inline-block;
  padding: 15px 0 0 0;
}

The feed-icon CSS should be move into it's own CSS file, as it's a defined component. I think this becomes a task of the elements.css issue.

Another example is the #footer component which has styling in about 6 different files, so it make sense for this to become it's own issue that affects multiple files that perfects the footer component.

DickJohnson’s picture

Did some investigation as @LewisNyman suggested on #16. #2399247: Investigate font-size consistency in Bartik

In short: We have 37 different values for font-size property.

LewisNyman’s picture

We have uncovered a new situation, which is when core module files need to be changed, such as template and CSS, in order to fix Bartik's files. I have suggested a process here: #2398453: Clean up the "admin" component in Bartik

Now we have momentum under this initiative, I think we can solve these wider problems in core that Bartik can inherit. I have created a new issue that will deal with this component across Core, Seven, and Bartik.

I guess the process would work something like this:

  1. Discover a change is required to a core module that will affect all themes - example
  2. Create the global issue - example
  3. Postpone the current, Bartik-specific issue until the global issue is committed, or reduce it's scope so it does not rely on the global issue to be fixed.

How does that sound?

emma.maria’s picture

Issue summary:View changes
idebr’s picture

Issue summary:View changes
idebr’s picture

Issue summary:View changes
idebr’s picture

Issue summary:View changes
idebr’s picture

idebr’s picture

Issue summary:View changes
idebr’s picture

Issue summary:View changes
idebr’s picture

Issue summary:View changes
idebr’s picture

Issue summary:View changes
idebr’s picture

Issue summary:View changes
dcrocks’s picture

Issue tags:+accessibility

This should come up here.

LewisNyman’s picture

But remember we shouldn't be changing the design in these issues, only restructuring the code.

emma.maria’s picture

emma.maria’s picture

Issue summary:View changes
emma.maria’s picture

Issue summary:View changes
emma.maria’s picture

Issue summary:View changes
idebr’s picture

idebr’s picture

idebr’s picture

idebr’s picture

Issue summary:View changes
idebr’s picture

Issue summary:View changes
idebr’s picture

idebr’s picture

jp.stacey’s picture

Issue summary:View changes
idebr’s picture

emma.maria’s picture

Issue summary:View changes
emma.maria’s picture

emma.maria’s picture

Issue summary:View changes