Charming Pro Documentation


This page provides a brief summary of what’s changed between versions and when possible, hints for migrating.


_Released March 4, 2019

  • Upgrade to Bootsrap 4.3.1


Released December 27, 2018

  • Upgrade to Bootstrap 4.2.1


Released October 2, 2018

  • Upgrade to Bootstrap 4.1.3


Released May 15, 2018

  • Upgrade to Bootstrap 4.1.1


Released April 12, 2018

  • Upgrade to Bootstrap 4.1


Released March 27, 2018

  • The dashboard UI now supports the theme colors
  • Improved website navigation behavior on Firefox for sub-menus (level 3)
  • Added two more color palettes called Bright Blue and Cool which offer completely different looks
  • Improved dashboard mobile nav so it doesn’t reset scroll position

Migration hints

  • The dashboard nav needs an additional class dash-nav-accent-2 (or any other theme color)
  • The dashboard toolbar needs an additional class dash-toolbar-accent-2 (or any other theme color)


Released January 21, 2018

  • Improved navigation behavior on touch devices
  • Reworked color system under the hood: Every component with color (accent-1) can now use primary, secondary, danger, etc.
  • Gradients now feed from theme colors too (bg-gradient-primary)
  • custom.scss was removed
  • -accent-3 was merged with -dark
  • ftr- can now use ftr-primary and all other colors
  • merits- can now use merits-primary and all other colors
  • The color system now allows for easier color customization. The default color palette is slightly different because of this. charming-pro-green.min.css is the palette that was used until now.
  • Update to Bootstrap 4
  • Update to jQuery 3.3.1

Migration hints

  • Replace -accent-3 with dark
  • Replace merits-dark with merits-accent-2 (optional)
  • Replace ftr-dark with ftr-accent-2 (optional)
  • Replace block-dark with block-accent-2 (optional)
  • Replace bg-gradient-98 with bg-gradient-dash, bg-gradient-1 with bg-gradient-accent-2, andbg-gradient-2 with bg-gradient-accent-1 (note the reversal of 1 and 2 here)
  • Link charming-pro-green.min.css if you want the same colors as before
  • If you build charming yourself: _custom.scss was removed. Make your own copy of charming-pro-custom.scss and move your custom variables to the top that new file. Then use the resulting CSS file.


Released January 7, 2018

  • Completely new navigation for the website template that looks pretty on mobile, scrolls down with the user and supports up to four levels of nested sub menus.
  • Overhauled the dashboard side bar navigation so it can support three levels of nested sub menus
  • Update to Bootstrap beta.3

Migration hints:

  • Replace the website navigation <nav class="navbar charming-navbar navbar-expand-lg navbar-light> and all it’s children with the new navigation <nav id="web-nav" class="web-nav"> from the example
  • Replace the dash nav dom element <nav class="dash-nav" id="dash-nav"> and all it’s children with the new navigation. The markup has changed with this update.
  • Follow the Bootstrap beta 3 migration guide


Released December 20, 2017

  • Released the base theme under MIT License, the name of the theme is “Charming”
  • The template with the layouts/components becomes “Charming Pro”
  • Overhauled spacing classes to be in line with Bootstrap for compatibility
  • Switched to the common CDNs for libraries instead of local node_modules

Migration hints:

  • Paths and file names change from charming to charming-pro (example: charming.css becomes charming-pro.css)
  • In about-us.html the Partners blog has changed the classes bg-accent-2 text-accent-contrast-2 to block-dark text-light
  • Spacing classes have moved around a bit. Sorry for this breaking change, but it is in line with Bootstrap which makes things easier in the long run. I made a mistake when I made the spacing classes behave considerably different from Bootstrap. The following changes apply to all spacing classes such as mt-2, mb-4, p-5 and so on. The regular expression I used to find all of these is ["mp ][mptblryx](-sm|-md|-lg|xl|)-3[" ] (replacing the h with the number).
    • Spacing classes m-7 become m-8 (update these first)
    • Spacing classes m-6 become m-7
    • Spacing classes m-5 become m-6
    • Spacing classes m-4 become m-5
    • Spacing classes m-3 become m-5
    • Spacing classes m-2 become m-4
    • Spacing classes m-1 become m-3
    • Spacing classes m-h become m-1 (update these last)
  • SCSS variables $body-text is now $body-color
  • The SCSS file structure has changed (Bootstrap is now under node_modules, and the base theme is under modules/theme-machine).
  • Upgraded some node_modules so it works with Windows as well


Released December 11, 2017

  • Made licensing much more permissive: Developer now allows non-free products (SaaS apps) and Entrepreneur allows for multiple projects.


Released October 27th, 2017

  • Updated Bootstrap 4 to beta.2

Migration hints:

Few breaking changes which are all described here


Released September 25th, 2017

  • Updated Bootstrap 4 to beta

Migration hints:

There are quite a few breaking changes from Bootstrap again (hopefully for the last time). Also, there are some regressions in Bootstrap that will be fixed with the next beta. See point number one:

  • offset-1 classes have been removed, but will be added again in the next version of Bootstrap
  • Rename navbar-toggleable-md to navbar-expand-lg
  • hidden- classes have been replaced with d-*-none, e.g. d-lg-none
  • All classes that have been called inverse have been renamed back to dark, analog to Bootstrap 4
  • Form validation: has-danger is now is-invalid on the form control. form-control-feedback was changed to invalid-feedback
  • Also see the list of changes to Bootstrap 4


Released April 27th, 2017

  • Updated Bootstrap to alpha.6
  • Removed navbar-centered as this can now be done with Bootstrap flexbox utilities
  • Added new example website called “Startup” with multiple new pages:
    • Alternative landing page
    • Blog overview
    • Blog article
    • Pricing
    • About
    • Contact
    • Multiple HTTP error messages
  • Merged “Lander” example into the new “Startup” example
  • Reworked the colors of the dashboard to fit better with the website color scheme
  • A lot of work has gone into the Box component to make it versatile, it is used in many places now
  • Changed versions to 0.x instead of 0.0.x since Charming and Bootstarp 4 are approaching v1
Migration hints:

This is a big, breaking update since Bootstrap switched to flexbox-only. Here are some hints that should make migration easier:

  • charming.css now includes Bootstrap 4, you’ll only need to include this one CSS file
  • The dashboard layout has been completely refactored to work with flexbox, the markup is different
  • The dashboard elements (formerly called widgets) now use the box component
  • The lander example is now found under examples/startup/landing-page.html as an alternative landing page
  • The navigation has been reworked. This will change again in the future as Bootstrap 4 navigation gets implemented
  • The jumbotron component has been replaced with a block
  • All classes that were called “dark” (ex.: merits-dark) have been renamed to inverse (ex. merits-inverse) to be in line with Bootstrap 4
  • The pricing tables have been completely refactored to use the Box component


Released November 28th, 2016

  • Added more semantic HTML tags
  • Added snippets folders with contain snippets of common parts (like the navigation)
  • Fixed margin for form elements on jumbotron callout on mobile
  • Created three distinct dashboard pages
  • Moved the dashboard navigation collapse button to next to the logo
  • Updated jQuery to 3.1.1
  • Autofocus added to login related forms
Migration hints:
  • The class dash-main was renamed to dash-app to avoid confusion with <main> tag.
  • The jumbotron-callout on the Lander example needs pb-1 and pt-2. The form elements within mb-1
  • The dash-nav-logo now contains the dash-nav-controller


  • Dashboard and widgets added
  • Color system refactored
Migrations hints:
  • Themed buttons have been renamed from btn-theme-1 to btn-accent-1 (and 2)
  • Jumbotrons now use bg-gradient-1 / bg-gradient-2 for background coloring. Compare your jumbotron class names with the example
  • Pricing table heads now use pct-head-accent-X for coloring.
  • Merits now require merits-dark or merits-light
  • The class box-accent is now box-head box-head-accent-1


Released November 1st, 2016

  • Added HTML linting to the build process
  • Fixed indentation and other warnings by the linter
  • Lander example: Moved inline styles for jumbotron background to file css/lander-example.css
  • Lander example: Removed holder.js dependency as we’re using real images for this now


Released October 28th, 2016

Migration hints:
  • Bootstrap alpha.5 renamed responsive helpers, example pull-xs-right to float-xs-right.
  • Bootstrap alpha.5 renamed spacing classes, example m-t-1 to mt-1, and m-a-1 to m-1.


Released August 5th, 2016

  • Initial release of the alpha version.