- Removed
su-link-underline,su-link-no-underline, and.su-linknested variant states as they don't play nice with JIT mode. - Replace this functionality by installing and using the tailwind children varients plugin within your project and using it with the no-underline utility.
- Renamed
su-input-basetosu-input - We removed the base styles from form elements as they were too hard to override. You are now expected to add the following css classes to your form elements.
su-buttonsu-radiosu-checkboxsu-fieldsetsu-labelsu-legendsu-textareasu-select
We are still working on this. We will have documentation on this change by stable release.
The two major differences are in the removal of deprecated code and a change to the webpack build. Make sure you get the new npm dependencies. Card.twig schema has changed. Please look at the new variable name and options.
More instructions forthcoming...
There are now two grid systems available in this project, one of which is built with Flexbox and the other of which is built with CSS Grid. The systems can be used jointly or independently of each other, depending on your project's needs.
While the CSS Grid system is entirely new (and comes with new functions and mixins), the Flexbox system is an updated version of the previously used system. Therefore, only the Flexbox system requires an upgrade from the previous version. You are encouraged to explore the CSS Grid system for enhancement and usability in your project.
While the available Flexbox grid system still remains a class-based system, the
class names have changed and are processed dynamically, using a combination of new
functions and mixins. These can be found /core/src/scss/utilities/functions/flex/
and /core/src/scss/utilities/mixins/flex, respectively.
Example: grid--6-of-12 is now flex-6-of-12
The grid includes five tiers of predefined classes for building complex responsive layouts. You can customize the size of your columns (or items inside of your columns) on small, medium, large, extra large, or extra extra large devices.
For grids that are the same from the smallest of devices to the largest, use the
.flex-*-of-*and .flex-*-*-of-*classes. Specify a numbered class when you need
a particularly sized column; otherwise, feel free to stick to .flex-*-of-*.
Example: if you want to produce a layout where a column spans two of the available
twelve columns at every breakpoint, you would do the following: class="flex-2-of-12"
If you wanted to produce a layout that would span two of the available
twelve columns, you would do the following: class="flex-lg-2-of-12 flex-xl-2-of-12 flex-2xl-2-of-12"
You can now push grid columns with responsive classes. The classes are sized to match columns.
Example: .flex-push-xs-5
You can now find all the files you need for your project inside decanter/core. /core/src/ contains all the raw
source files that one can read/edit, including .scss, .js, .twig templates and image files in their respective
folders. /core/dist/ contains the distribution version of the .css and .js files used in production sites.
Font files have been removed from Decanter and are now being downloaded from the Google CDN with the except of a few that are being downloaded from a Stanford server.
The font Crimson Text is no longer part of Decanter and has been removed. Two new fonts have been added.
- Kalam (handwriting display font)
- Noto Sans Devanagari Subset (for Sanskrit font support)
Decanter now uses the BEM (Block Element Modifier) naming convention. All decanter
components are now namespaced with the su- prefix in their class names.
Example: .su-button, .su-main-nav
Elements within a component have class names that start with the component name plus 2 underscores plus the element name.
Example: .su-main-nav__toggle
Modifier classes start with the component or element name that they are modifying plus 2 hyphens plus the modifier name.
Example: .su-main-nav--light, .su-main-nav__toggle--center
Version 5.0.0 has dropped the Atomic Design structure to allow for more flexible component creation. All component
.scss files (including variants) can now be found under /core/src/scss/components within individual
component folders.
The /variables directory has been moved inside the /utilities directory.
Previously inside the /mixins directory, /layouts now has path /core/src/scss/layout with .scss files for
Flexbox Grid and CSS Grid layouts inside /layout/flex and /layout/grid respectively. Each grid system now has many
different one to four column layouts.
Many new mixins have been added or changed. Below are a few notable ones.
- Updated media query mixins that work with our new grid system can be found inside the
/breakpointdirectory. - Modular scale mixins for rendering modular spacing (uses the Bourbon modular scale with a factor of 1.25 between steps) and typography (uses a curated scale) have been introduced.
- Many typography mixins have been added, including
@type-ato@type-fwhich could be used to generate styles for headers and other text elements.
Many helper functions have been added to the directory.
The new /placeholders directory inside the /utilities directory contains .scss files with placeholder classes that
developers can extend in their own projects. Currently, this directory holds mostly base styles for our components,
e.g., %button-base, %card-base.
Grunt has been mostly deprecated in 5.0.0. Most of the build steps previously performed by grunt are now performed by npm scripts, several of which invoke webpack. You will want to migrate any integrations you have with grunt over to npm / webpack.
Webpack is now the tool that processes the source SCSS and JS
and generates the distribution CSS and JS files.
npm scripts are used to run webpack
and other tools, e.g. kss, eslint. Stop using grunt.
The following npm scripts are available:
npm run buildgenerates the dev (non-minified) .css and .js for decanter and the styleguide.npm run distgenerates the production (minified) .css and .js for decanter and the styleguide.npm run watchregenerates the dev (non-minified) .css and .js for decanter and the styleguide whenever the source files change.npm run styleguidebuilds the styleguide.npm run eslintandnpm run sasslintlint the code.npm run startopens a tab in your default browser and loads the styleguide on port9000.npm run devis a shortcut that runs thebuild,styleguide,watchandstartscripts.
Image and other file assets are now managed through webpack builds and in order to simplify your experience we have gone to great lengths to ensure that all references to files (images/fonts/etc) are now either encoded directly into the generated CSS or fetched from a remote CDN. If you had a build tool that was moving the assets previously you can stop that.
- If you are on version 3.1.x skip over this version and head directly to 5.
- Actually, if you are still reading this, skip this version completely. It didn't work out for us and it won't work out for you.
- Mega Menu and Main Menu components have been dropped in favor of the navigation component
- Neat was dropped in favor of CSS grid native and new variables/mixins. Sorry, but there is no upgrade path from neat's syntax to this new version.
- Decanter grid css classes have been mostly been removed.
- We changed the variable names for all of the breakpoints and their values. Good luck with that :D
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.
See Bourbon's documentation overviewing what has changed between these two versions at https://www.bourbon.io/docs/migrating-from-v4-to-v5/.
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:
- 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 compilehas been configured. This task compiles All SCSS to CSS and adds any necessary prefixes to code. - The
$weightand$stylearguments in the@font-facemixin 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. - 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.
- Check out or pull down the latest version 3 code of Decanter
- Run npm install to get the newest packages
- Compile the SCSS