User:Cpeel/CSS Standardization

From DPWiki

This was completed, merged, and deployed to PROD in Oct 2017.

The DP codebase has grown very organically over the years, starting out in 2000 when Cascading Style Sheets (CSS) was young and browser support for CSS was very poor. Since that time developers have added new code and styling for code in a variety of ways. CSS, and browser support for it, has come a long ways in 17 years and it's time to get a common look-and-feel using modern CSS.

Try it out

You can see the CSS standardization work in this sandbox on the test server: https://www.pgdp.org/c.css_standardization/

Objectives

The developers started out with several related objectives:

Be HTML5 compliant
HTML5 is the future and is largely backwards compatible with HTML4.x. We should endeavor to make our pages validate against HTML5.
Pure-CSS for themes
Moving to a pure-CSS form for themes, without theme-specific graphics, makes them immensely easier to create and update. Doing so means we don't have to create or modify image files when working with themes.
Site-wide consistency
The site has grown very organically over the past 17 years with each developer adding their own layout, table styles, etc. We made some subtle, and some not-so-subtle, changes to make pages across the site more consistent. See the Design Philosophy for more insight.
Consistent CSS
Using consistent CSS across the site code allows developers to re-use components easily and makes it easier for users to adjust CSS browser-side for accessibility if necessary. The Style Demo gives you an idea of how some standard site objects are rendered in your selected theme.
No (or little) per-page CSS
Instead of embedding CSS styles directly in a page, we want to have the CSS in common files. This allows for better style re-use and gets us on the path to supporting Content Security Policies.

Browser support

We are not designing for specific browsers, but rather designing for modern standards. That is, we are striving for our code to be HTML5 and CSS3 compliant. We have tested against modern versions of Chrome, Firefox, and Safari, in addition to IE 11. The site should degrade gracefully for very old browsers.

Browsers tests

We have tested the site using the following browsers (if no version is specified, the latest supported on that platform is implied):

  • Chrome (OS X)
  • Edge (Windows 10)
  • Firefox (OS X El Capitan)
  • Firefox (Windows 10)
  • IE 11 (Windows 10)
  • Safari (OS X El Capitan)
  • Safari (OS X Sierra)

What changed

The above is nice and all, but when it comes down to brass tacks, you really just want to know what changed that is visible to you, the user. Here is a list of some things that were changed, both subtle and not-so-subtle, with example links to the TEST server.

Note that there are still inconsistencies in applying consistent styling across the whole site. There is a lot of code and we'll be cleaning up bits for a long time.

Standardized tables

We've wanted to standardize the look-and-feel of tables across the site.

For example, consider how the following tables look different from each other in the current version and how they look more similar in the new code:

Headings

We made headers consistent across the site. Most (but not all) pages start with an <h1> tag. For example, consider the following pages:

And what they look like in the CSS Standardization branch:

Sidebar

We made contents in the sidebar more consistent, particularly section headers. Compare the sidebars of the following pages (note the different text sizes and fonts even within a single page):

And what they look like in the new branch:

Search form

We made the search form make better use of screen real-estate without losing any functionality.

Compare current vs new

Preferences Page

You might be surprised to learn that the "tabs" on the preferences page are actually made with images! We re-implemented them using pure CSS. This page overall is probably one of the most visually different changes.

Compare current vs new

Classic Grey theme

We slightly altered the Classic Grey theme to be more inline with the other two. We think it makes it more useful. Use the User Preferences page to change your theme to Classic Grey and check it out.

What didn't change

We didn't change the editing interfaces. We didn't change how anything worked. And while we did change a lot of things you can see, there was at least an order of magnitude more changes behind the scenes that you can't see to make the pages HTML5 and CSS3 compliant.

Issues

Unresolved

If you find problems (invalid HTML, things that don't conform to the stated style guide), please put them here so developers can look at them.

  • page_detail.php -- left align "Pages proofread by you and ..." jjz
    • See the Design Philosophy. Currently that text is in a table row spanning three columns. Perhaps it could be pulled out of the table and set as a heading? -- srjfoo
  • General comment/question about vertical alignment of the headings -- a lot of the headings appear to me to be centered vertically between text blocks. My brain wants the heading to be closer to what it's the heading for, not centered between the blocks above and below. -- srjfoo
    • By default, headings have the same margins above and below them. Margins often collapse between vertical elements (so you don't end up with a huge bunch of whitespace) but basically what you're seeing is correct and the default for headings. I tried futzing with it a bit to make them smaller but that resulted in looking very odd for when the heading is followed by something without any margin or padding (like tables). Not sure there's an easy solution here. -- cpeel

Resolved

  • Project Page -- alignment of the Page Summary table at the very bottom of the page. Both old and new versions have the number of pages correctly aligned, but the new version has "in <page state>" centered instead of left-aligned. -- srjfoo
    • This has been fixed -- cpeel
  • Sidebar for default.php -- Note that this flaw is in the original -- the "More Completed Titles ..." link should be closer to the "Recently Completed Titles" list than the "Recently Begun" heading. Likewise, the "More Recently Begun Titles..." link should be closer to the "Recently Begun" list than the "Completed Projects" heading. -- srjfoo
    • This has been fixed -- cpeel
  • Is there a need for coloured headings?--could be a problem for some, e.g. green headings exacerbating a ghosting problem I have. jjz
    • This has been fixed by making the headings darker, such that now they only have a hint of the underlying color (I just darkened the original). -- cpeel
  • Looking at the list of links in the sidebar (Key Help Documents): the current main site has each item bulleted, which helps identify visually where each link begins and ends if the window is narrow enough that the line wraps. Possible alternative to bullets might be to add a small amount of space after each link? -- srjfoo
    • Addressed by adding some spacing between the documents. I originally removed the bullet to give more horizontal room. -- cpeel
  • One thing I noticed on the Project Page, Change Project State, where there are multiple buttons. The buttons butt up against each other with a narrow height conforming to the surrounding text height. Not really a conversion issue, and probably standard, but it would give users more of a tendency to click the wrong button. -- dacsoft
    • This has been fixed -- cpeel
  • User preferences table centered on page rather than being left aligned per design philosophy. Reported by FallenArchangel in the forum thread. -- srjfoo
    • This has been fixed -- cpeel


Issues found after PM Page and Search Form Redesign rollout

  • "Large page images" table in Project Quick Check results not displaying correctly.
    • Documented: forumpost:1125342 (problem as well as solution)
    • missing close single quote on class, line 31 of pinc/project_quick_check.inc
    • Verified and fixed on TEST and PROD by srjfoo.
    • Fixed in master by cpeel.
  • Project Quick Check link from project page still points to noncvs version.
Retrieved from "https://www.pgdp.net/w/index.php?title=User:Cpeel/CSS_Standardization&oldid=100505"