Migrating to v2.0.0

CoreUI 2.0.0 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.

Summary

Here are the big ticket items you’ll want to be aware of when moving from v1.x.x to v2.0.0.

Global changes for Admin Templates

  • We decided to moved all SCSS and JavaScript files was to separate repository @coreui/coreui. Our templates now require latest stable version of @coreui/coreui to work properly.
  • Our admin templates are not available via npm anymore. You can clone a repository from GitHub or download from our website.

Global changes

  • $enable-rounded is enabled by default.
  • Build system overhauled to use a series of npm scripts instead of Gulp. See package.json for all scripts, or our project readme for local development needs.
  • Dropped Bower support as the package manager has been deprecated for alternatives (e.g., Yarn or npm). See bower/bower#2298 for details.

By component

This list highlights key changes by component between v1.x.x and v2.0.0.

  • .mobile-sidebar-toggler has been deprecated. Use our new sidebar toggler plugin
  • .sidebar-toggler now requires additional data attributes data-toggle="sidebar{-sm|-md|-lg|-xl}-show". Read more about sidebar toggler plugin](https://coreui.io/docs/docs/components/sidebar/#sidebar-toggler)
  • .aside-menu-toggler now requires additional data attributes data-toggle="aside-menu{-sm|-md|-lg|-xl}-show". Read more about aside menu toggler plugin](https://coreui.io/docs/docs/components/aside-menu/#aside-menu-toggler)
  • Icons now require .nav-icon class.
  • .divider has been deprecated. Instead, use .nav-divider.

Social box

  • .social-box is now .brand-card and now requires that its children element have the new .brand-card-header and .brand-card-body classes.
  • .brand-card-header requires a background declaration of some kind ex. .bg-facebook or .bg-reddit

Social buttons

  • Buttons now require .btn-brand class.

Switches

  • Dropped .switch-default class for simplicity’s sake. Use .switch classes instead now.
  • .switch-xs has been deprecated.
  • .switch-label is now .switch-slider.
  • We’ve changed .switch-*-outline to .switch-outline-*.
  • We’ve dropped .switch-icon and .switch-text for one class .switch-label.
  • Data attributes data-on="On" and data-off="Off" have been dropped. Instead, use data-checked="On" and data-unchecked="Off".