Blog

New Global Stylesheet: v5.0

|

We published a new version of the global stylesheet—v5.0. These changes stemmed from wanting to add a link for content editors to log in and go to the current page to edit content. 

After making a few changes, I figured it was a good time to do some housecleaning.

Changes include:

  • Added a new footer partial with "Last updated on...". Content editors can click on the date to log in and edit that page. Closes wvuweb/cleanslate-toolkit#5.
  • Prefixed everything with .wvu-. So, .nav has changed to .wvu-nav, .site-logo to .wvu-site-logo, .sidebar to .wvu-sidebar, etc.
    • This follows the naming conventions of the masthead and footer.
    • It allows any styling in the global stylesheet to get out of the way if necessary. Remove .wvu- and you have a clean slate (pun unintended).
  • Completely removed the Compass dependency.
    • The only dependency is Sass (or you can grab the compiled CSS).
  • The Mobile First Skeleton Grid is now easier to override (2 classes instead of 3)
  • All grid offset classes use margin instead of padding. This allows the grid to play nice with box-sizing: border-box;.
  • Updated how we implement border-box according to best practices from CSS Tricks
  • Completely rewrote _blogs.scss styles. Blog styles are now for CleanSlate instead of Slate.
    • Here's what _blogs.scss looked like before and after.
  • This global stylesheet mainly targets CleanSlate. Slate and other platforms are compatible, but we’ve focused testing of this stylesheet for CleanSlate.
  • Footer contact info in paragraph tags no longer have top and bottom margin. Improves layout.
  • Updated print styles to latest from HTML5 Boilerplate project.
  • Updated normalize.css to v3.0.2.
The CleanSlate Toolkit uses v5.0 of the global stylesheet. Download the CleanSlate Toolkit on Github or view a site using the CleanSlate Toolkit to see these changes in the wild.

FAQ

Does this include the new branding from Ologie?

No. This is just a technical update from v4.0 of the global stylesheet. Adam Glenn is working on some new, cool things related to the new branding. Once those are ready, he'll send out several communications related to those materials.

Is this backwards compatible with global.css v4?

Mostly, yes. See the change log above for more details. The most notable change is prefixing classes with .wvu-. I upgraded the Intel Science and Engineering Fair site to use v5.0. You can see the changes it required in the commit log for that theme. Look at the commits from 2/5/2015. Upgrading to v5.0 took about 20 minutes to complete and test in production.