Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bourbon update #115

Merged
merged 10 commits into from
May 16, 2018
Merged
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,13 @@ Version 2.0 2017-12-18
- Revised load order of variables, vendors, mixins, and components
- Removed vendor code from repository
- Introduced Atomic Design naming conventions

Version 2.1 2018-05-10
---------------------------------------------
- KSS Node generating style guide and pattern library
- More components, variables, and mixins

Version 3.0 2018-05-14
---------------------------------------------
- Updated to latest stable release of Bourbon (5.0.0)
- Added autoprefixer and postcss for better vendor prefix support
37 changes: 30 additions & 7 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ module.exports = function(grunt) {
sass: {
options: {
includePaths: [
"node_modules/bourbon/app/assets/stylesheets",
"node_modules/bourbon/core",
"node_modules/bourbon-neat/app/assets/stylesheets",
"node_modules/normalize.css",
"node_modules/neat-omega/core",
Expand Down Expand Up @@ -37,10 +37,21 @@ module.exports = function(grunt) {
}
}
},
postcss: {
options: {
map: true,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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!

processors: [
require('autoprefixer')
]
},
dist: {
src: 'css/*.css'
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass', 'styleguide']
tasks: ['sass', 'postcss', 'styleguide']
},
jsmin: {
files: 'js/**/*.js',
Expand All @@ -61,27 +72,37 @@ module.exports = function(grunt) {
styleguidecss: {
dest: 'styleguide/css',
relativeSrc: '../css',
options: {type: 'dir'}
options: {
type: 'dir'
}
},
styleguidejs: {
dest: 'styleguide/js',
relativeSrc: '../js',
options: {type: 'dir'}
options: {
type: 'dir'
}
},
styleguideimg: {
dest: 'styleguide/img',
relativeSrc: '../img',
options: {type: 'dir'}
options: {
type: 'dir'
}
},
styleguidefonts: {
dest: 'styleguide/fonts',
relativeSrc: '../fonts',
options: {type: 'dir'}
options: {
type: 'dir'
}
}
},
verbosity: {
symlinkquiet: {
options: { mode: 'hidden' },
options: {
mode: 'hidden'
},
tasks: ["symlink"]
}
}
Expand All @@ -94,8 +115,10 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-symlink');
grunt.loadNpmTasks('grunt-verbosity');
grunt.loadNpmTasks('grunt-postcss');

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

}
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# [Decanter](https://github.com/SU-SWS/decanter)
##### Version: 2.0.0
##### Version: 3.0.0

Changelog: [CHANGELOG.md](CHANGELOG.md)

Expand Down
43 changes: 43 additions & 0 deletions UPGRADE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# Upgrade
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great. Thanks @josephgknox

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


Upgrade from version 2.1.0 to 3.0.0
-----------------------------------

Version 3.0.0 is a new major version of Decanter. The primary difference between
version 2.1.0 and 3.0.0 is that Bourbon has been updated from version 4.2.7 to
the latest stable version, 5.0.0.

For details on other changes in this release, as well as details on all
Decanter releases, see [CHANGELOG.md](CHANGELOG.md).

### Migrating from v4 to v5 of Bourbon

See Bourbon's documentation overviewing what has changed between these two
versions at https://www.bourbon.io/docs/migrating-from-v4-to-v5/.

### What's been updated in Decanter

Only Bourbon mixins and functions being utilized in Decanter thus far needed to
be combed through and updated.

All deprecated code being used in Decanter from version 4.2.7 of Bourbon has
been updated to leverage and implement the new means of accomplishing the same
thing. These changes are:

1. Added new method (post-processor) of adding required vendor prefixes:
autoprefixer with postcss. Bourbon 5.0.0 has removed all prefixing features, as
it is no longer best practice for pre-processors like SCSS to handle prefixing.
A new Grunt task, `grunt compile` has been configured. This task compiles All
SCSS to CSS and adds any necessary prefixes to code.
2. The `$weight` and `$style` arguments in the `@font-face` mixin have been
removed. As a result, the mixin now includes one less argument. All fonts being
called with the mixin has been updated with the new implementation.
3. All of the font stack variables are now prefixed with `font-stack-`. The
fallback for all three primary fonts in Decanter leverage these variables. The
new variables has been added to all of the font calls.

### How to Upgrade Decanter in your project

1. Check out or pull down the latest version 3 code of Decanter
2. Run npm install to get the newest packages
3. Compile the SCSS
4 changes: 2 additions & 2 deletions css/decanter-grid.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/decanter-no-markup.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading