Bourbon update #115

josephgknox · 2018-05-09T23:06:35Z

READY FOR REVIEW

Summary

Updated to latest version of Bourbon (v5.0.0)
Updated all deprecated code that we were utilizing (namely font-face and Font stack variables)
Latest version removes prefixing features, so have added autoprefixer and postcss (plus related Grunt command) to add vendor prefixes only where needed (https://github.com/postcss/autoprefixer); also added postcss as part of watch task

Needed By (Date)

N/A

Urgency

N/A

Steps to Test

Pull this branch
Ensure that local version of style guide and pattern library has remained unchanged (visually)
Can also test new grunt command (grunt postcss); also runs with grunt watch if running when change is made

Affected Projects or Products

Decanter

Associated Issues and/or People

This is duplicating the default task. Remove this line.

You can, instead, move the 'postcss:dist' tasks in to the styleguide task array in line 120. You will also probably want to ensure that it is ran after calling grunt sass but you cannot simply just add this to the end of that command. As you want to make this a dependency I would suggest registering another a new task called compile or something that runs both grunt sass and grunt post-css in the same command.

eg: grunt.registerTask('compile', ['sass:dist', 'postcss:dist']);

Good catch! And, I really like the compile task idea. I've corrected this and have added that task.

sherakama · 2018-05-09T23:32:01Z

css/decanter.css

@@ -991,7 +991,7 @@ table {
  border-right: 0; }

 html {
-  font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
+  font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;


Looks like Roboto went away here. Was this intensional?

The fonts after "Source San Pro" here are generated by the $font-stack-helvetica font stack variable. These are fallbacks. Bourbon has updated these.

Thanks for confirming.

sherakama · 2018-05-09T23:32:17Z

css/decanter.css

  .decanter-serif h1, .decanter-serif
  h2, .decanter-serif
  h3, .decanter-serif
  h4, .decanter-serif
  h5, .decanter-serif
  h6 {
-    font-family: "Crimson Text", "Georgia", "Cambria", "Times New Roman", "Times", serif; }
+    font-family: "Crimson Text", "Georgia", "Times", "Times New Roman", serif; }


Cambria is missing here.

The fonts after "Crimson Text" here are generated by the $font-stack-georgia font stack variable. These are fallbacks. Bourbon has updated these.

Thanks for confirming.

sherakama · 2018-05-09T23:32:48Z

css/decanter.css

@@ -1424,7 +1424,7 @@ a.decanter-button--unstyled {
  .decanter-icon-block .decanter-icon-block__img {
    float: left;
    margin-right: 1rem;
-    margin-right: 1.776889em; }
+    margin-right: 1.5625em; }


Was this margin change intensional?

Yes. modular-scale(n) is being used on this component (it's the only component utilizing this so far) and it has been updated. We can change it use the margin mixin instead (for now), but there is no real visual difference in the style guide and pattern library as it adjusted relatively.

As long as this change is acceptable to you 👍

sherakama · 2018-05-09T23:34:10Z

package.json

@@ -17,21 +17,24 @@
    "url": "https://github.com/SU-SWS/decanter/issues"
  },
  "dependencies": {
-    "bourbon": "^4.2.7",
+    "bourbon": "^5.0.0",


These are pretty major changes. Please change the version of decanter to 3.0.0

Any reason why we would want to wait until Neat is updated, too? Or, would that be cause for updating to 4.0.0?

Neat is a pretty major update as well (By the way, i'm happy to make myself available to answer questions about updating neat. Some of the concepts on how neat handles padding, margins, and containers changed pretty significantly between neat 1.x and the latest stable release (v2.1.0).)

Thanks, @kgcreative! Sounds like another major release with Neat would be a good idea then. So, I'll update the version now and we can again release a new version with the eventual Neat updates.

Thanks for the offer to help; I'll surely want to pick your brain on how to best make the updates.

Should we upgrade Neat, or should we refactor to use CSS Grid? What's the longevity of Neat now that grid is widely supported?

Neat 2.x (And the upcoming 3.x) can be used as forward-compatible fallbacks for both flexbox and grid. Had the SU Homepage Launch happened 6 months later, I would have used grid for components. CSS grid and flexbox have so many advantages over floated layouts, which will make most float-based frameworks mostly obsolete. Browser support for both are really good. Neat's breakpoint management is really great, but a lot of grid layouts can handle being responsive by using smart fractional units combinations and zero breakpoints, so even that is a massive improvement.

Yes! We do plan on upgrading Neat as the next major undertaking (version 4.0.0).

Shea and I have also begun to talk about (and want to meet with you, JB, about) adding CSS Grid and/or Flex Box-based classes that can be used in Decanter in addition to the Neat grid. That is, our template files for pages and other items that can and should be more rigid can leverage the current Decanter grid classes (Neat), but patterns and components can leverage more flexible ones (CSS Grid/Flex Box).

In the short-term, though, to get the project in a place where it is utilizing the latest Bourbon and Neat, I thought that this work should be prioritized first, especially before we start building out too many components and patterns that would need to be updated.

sherakama

Comments left.

sherakama · 2018-05-10T19:37:56Z

@JBCSU

I have reviewed these changes and this PR looks GTG. Please have a review as well.

The next steps after approval will be:

Cut a new v2 branch off of master (done)
Tag and release a version for 2.1.0
Merge this PR in to master
Tag and release a 3.0.0 version
Close out and re-groom the backlog with new versions and goals (we should set a meeting for this.)

sherakama · 2018-05-10T20:01:53Z

css/decanter-grid.css

@@ -265,6 +266,4 @@ body {
  margin-left: 85.2980433528%; }

 .decanter-offset-eleven-twelfths {
-  margin-left: 93.8278476881%; }
-
-/*# sourceMappingURL=decanter-grid.css.map */


@josephgknox
It looks like the source map gets removed with the auto-prefixer. Is this going to cause an error for debugging?

sherakama · 2018-05-10T20:05:13Z

Gruntfile.js

@@ -37,10 +37,21 @@ module.exports = function(grunt) {
        }
      }
    },
+    postcss: {
+      options: {
+        map: true,


@josephgknox: I have now set this to true in order to preserve the sass maps.

@sherakama awesome! I had originally set it to false as the sass task was writing the maps. Based on order of operations (and now that these things happened as part of a single command) this should've been set to true. Thanks!

sherakama · 2018-05-11T16:01:05Z

@josephgknox

Along with this PR I would like to see an UPGRADE.md file with instructions on how to upgrade from 2.x to 3.x

josephgknox · 2018-05-11T21:12:19Z

@sherakama took a first stab at stubbing out an UPGRADE.md.

sherakama · 2018-05-11T21:17:46Z

UPGRADE.md

@@ -0,0 +1,43 @@
+# Upgrade


This is great. Thanks @josephgknox

Sweet! Thanks for adding the steps to actually receive the update. :)

JBCSU

Sorry for the delay in approving this. Somehow I missed the PR and the request for review.

sherakama · 2018-05-16T15:50:38Z

@josephgknox

This is ready to go. Please do the following in order:

Tag and release a version for 2.1.0 from the v2 branch in both github and npmjs
Merge this PR in to master
Tag and release a 3.0.0 version from the master branch in both github and npmjs

I'll put together a meeting to do some backlog grooming and goal setting for next week.

Thanks everyone.

josephgknox · 2018-05-16T17:31:22Z

https://github.com/SU-SWS/decanter/tags
https://github.com/SU-SWS/decanter/releases
https://www.npmjs.com/package/decanter

Joe Knox added 2 commits May 8, 2018 16:04

bourbon update and autoprefix

023bfad

added grunt-postcss

bbfbafe

josephgknox requested review from sherakama and JBCSU May 9, 2018 23:06

josephgknox assigned sherakama and JBCSU May 9, 2018

sherakama reviewed May 9, 2018

View reviewed changes

sherakama requested changes May 9, 2018

View reviewed changes

Joe Knox added 2 commits May 10, 2018 11:51

added compile task and default task FIXUP

940cf82

updated changelog and readme

a9e721f

Ran grunt compile

a37501e

sherakama reviewed May 10, 2018

View reviewed changes

Enabled the css map through the prefixes.

ebb3685

sherakama reviewed May 10, 2018

View reviewed changes

Joe Knox added 2 commits May 11, 2018 14:08

update changelog and add upgrade file

0c6a858

FIXUP

c7253be

Update UPGRADE.md

755e3b4

sherakama reviewed May 11, 2018

View reviewed changes

JBCSU approved these changes May 15, 2018

View reviewed changes

sherakama approved these changes May 16, 2018

View reviewed changes

Update CHANGELOG.md

f8d16b6

josephgknox merged commit 62c65f9 into master May 16, 2018

josephgknox deleted the bourbon-update branch May 16, 2018 16:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bourbon update #115

Bourbon update #115

josephgknox commented May 9, 2018

sherakama May 9, 2018

josephgknox May 10, 2018

sherakama May 9, 2018

josephgknox May 10, 2018 •

edited

Loading

sherakama May 10, 2018

sherakama May 9, 2018

josephgknox May 10, 2018

sherakama May 10, 2018

sherakama May 9, 2018

josephgknox May 10, 2018 •

edited

Loading

sherakama May 10, 2018

sherakama May 9, 2018

josephgknox May 10, 2018

kgcreative May 10, 2018

josephgknox May 10, 2018

JBCSU May 15, 2018

kgcreative May 15, 2018

josephgknox May 15, 2018

sherakama left a comment

sherakama commented May 10, 2018

sherakama May 10, 2018

sherakama May 10, 2018

josephgknox May 10, 2018

sherakama commented May 11, 2018

josephgknox commented May 11, 2018

sherakama May 11, 2018

josephgknox May 11, 2018

JBCSU left a comment

sherakama commented May 16, 2018

josephgknox commented May 16, 2018


		grunt.registerTask('styleguide', ['run:styleguide', 'verbosity:symlinkquiet']);
		grunt.registerTask('default', ['postcss:dist']);

Bourbon update #115

Bourbon update #115

Conversation

josephgknox commented May 9, 2018

READY FOR REVIEW

Summary

Needed By (Date)

Urgency

Steps to Test

Affected Projects or Products

Associated Issues and/or People

See Also

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

josephgknox May 10, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

josephgknox May 10, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sherakama left a comment

Choose a reason for hiding this comment

sherakama commented May 10, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sherakama commented May 11, 2018

josephgknox commented May 11, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JBCSU left a comment

Choose a reason for hiding this comment

sherakama commented May 16, 2018

josephgknox commented May 16, 2018

josephgknox May 10, 2018 •

edited

Loading

josephgknox May 10, 2018 •

edited

Loading