Upgrade to Bootstrap v5

[StudioKonKon]

Bootstrap v5 is sill in Beta but there were too many issues in v4. This project was originally made with Less and Bootstrap v3 but was not upgraded properly. This may be only a personal project that I only intend to use for myself but it is due for an upgrade.

New Changes:

• [x] Remove deprecated or replace code.
• [x] Support new components and styles.
• [x] Rely more on Bootstraps new Utility API and Classes to reduce duplicate code and selectors.
• [x] Remove styles where they already exist in Bootstrap's default variables.
• [x] Remove contrast colours collection and use Bootstrap's own theme colours to make it easier to generate the contrasting colours.
• [x] Use Bootstrap's grey color system, replacing the use of darkening or lightening black and white values.
• [x] Reduce overall file size by removing duplicate or redundant code.
• [x] Use GoHugo for testing and documentation.
• [x] Make selectors less specific.
• [x] Background colour will now be the default white. Use .bg-light instead. .bg-light when used on the body uses a different shade so it contrasts better with components also using .bg-light.
• [x] Use opacity instead of the muted text colour so colours contrast better with coloured backgrounds.

Major Changes:

• [x] Rework Form components and styles.
• [x] Rework Alert components.
• [x] Rework Card components.
• [x] Rework Modal components.
• [x] Rework Nav Tabs and Nav Pills.
• [x] Rework Dropdown components.
• [x] Accordions to rely on utility class. E.g: class="accordion-button accordion-button-white bg-primary text-white"
• [x] New styles for focus/hover badges (optional).
• [x] Remove old badge classes E.g: badge-primary
• [x] Make unimportant component styles optional. E.g: dropdown, modal, nav-tab colours etc.
• [x] Make social colours available in our variables but optional to use.
• [x] No longer rely on jQuery.
• [x] Replace old grid layout and card margins in favour for Bootstrap's new Grid System with Columns and Gutters.
• [x] Add CSS variables to left sidebar for better theming (will require RGBA) [v1.4.*]
• [ ] Upgrade basic app dashboard (other layouts will be added later as and when needed)

Fix bugs and issues:

• [x] Fix Card component padding and margin styles interfere with header and body content when using header contrast colours or .card-title and .card-subtitle.
• [x] Fix Form component line-height and height styles so they are compatible with input groups, navbars and menus without mismatched heights or margins.
• [x] Use component variables for colours in inputs instead of overriding duplicate styles.
• [x] Fix Button icons vertical alignment.
• [x] Bootstrap's own badge component no longer supports hover and focus on a.badge and button.badge. This means creating a new style to replace this instead of heavily using utility classes and to fix badge styles in outline buttons.
• [x] Fix Nav Tabs and Nav Pills when used in card headers using .card-header-tabs or .card-header-pills.
• [x] Add less transparent border for cards. Card should look the same on a light background but be visible and more obvious on a white background.
• [x] Remove background colour from card-footer to prevent issues with card background utilities.
• [x] Improve heading sizes and weight

Project Layout

• [x] Scss/Sass file should be better organised and structured for easier importing.
• [x] Replace _konkon-colors.scss.
• [x] _variables.scss should contain bootstrap variable overrides only.
• [x] Move theme variables into _theme-variables.scss.

_bootstrap-required.scss Include all necessary functions, variables an mixins for both our custom code and Bootstrap's. This will not produce any CSS and is useful for customising builds and including with @use if Dart is supported. This is used in Child Themes or custom builds where not all of Bootstrap may be use. For Example, when importing our _konkon-components.scss or separate styles without any of the core Bootstrap styles.

_bootstrap-optional.scss and _konkon-optional.scss Simply import All of bootstrap's or our optional styles.

_konkon-components.scss Import All of our custom components. This is completely separate and optional. It's recommended only to use what's needed and without the core Bootstrap module.

Icons

Icons still use the Material Design Iconic Font as there are a few issues with Bootstrap's new Icon set and don't include most other icons. Bootstrap's Icon may get it's own separate style. This theme relies on the .icon class so any icon library will work with it with some custom styling. The .icon class must always be specific to a parent so the styles can be different according to the components it's used with instead of using very long prefixes. E.g .btn .icon or .dropdown .icon or .toast-header .icon

More Information

More on Migration: https://getbootstrap.com/docs/5.0/migration/

[StudioKonKon]

• [X] Updated table styles and removed outdated code including custom theme styles and tables within cards.
• [X] Resolve issues with dropdowns in responsive tables causing blank overflow scrolling.

  Dropdowns in responsive tables cannot be fixed due to issues relating directly to Bootstrap and Popper. We would need to either patch it ourselves or wait for an update.

[StudioKonKon]

• [x] Consider replacing old offcanvas menu with the Bootstrap 5.0.0-beta3 offcanvas component? Other functionality may be lost. If these major changes affect how the UI respond and act dramatically then we'll leave Bootstrap's new component off and use our own.
• [x] Separate our custom Bootstrap styles and have a different style as an addon for the dashboard like layout as well as separate styles for other front and backend layouts.

[StudioKonKon]

Import order (from Bootstrap 5.1.*)

— @import "bootstrap-required";

In order for overrides to work, variable overrides need to be defined before bootstrap's. It appears the authors' do not fully understand the `!default" keyword and that variables are not reactive, even though it's already been pointed out, this issue is more apparent in the new Bootstrap 5.1.0 release. Original Issue: https://github.com/twbs/bootstrap-npm-starter/issues/43

// Functions
@import "../node_modules/bootstrap/scss/functions"; // Required (Bootstrap)
@import "functions"; // Theme Required

// Variable Overrides
@import "variables"; // Theme Required

// Bootstrap Variables
@import "../node_modules/bootstrap/scss/variables"; // Required (Bootstrap)

// Theme Variables
@import "theme-variables"; // Theme Required

// Maps
@import "bootstrap-maps"; // Theme Required

// Mixins
@import "../node_modules/bootstrap/scss/mixins"; // Required (Bootstrap)
@import "mixins"; // Theme Required

// Utilities
@import "../node_modules/bootstrap/scss/utilities"; // Required (Bootstrap)

When using this theme, only @import "bootstrap-required"; is needed unless other variable overrides are required. Any bootstrap overrides must always come before bootstrap's own @import "../node_modules/bootstrap/scss/variables"; with the downside of not been able to use bootstrap's own variables.

Alternatively. use @use "bootstrap" as bootstrap; https://github.com/twbs/bootstrap-npm-starter/issues/43#issuecomment-781456048

Bootstrap 5.1.0

Due to existing variable override issues, some new maps need regenerating. We will do this in _bootstrap-maps.scss as bootstrap no longer allows maps to be overridden before importing due to lack of map-merge and !default

// Required
$theme-colors: map-merge($theme-colors, $custom-theme-colors); 
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value"); 
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb); 
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text"); 
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg"); 

Bootstrap 5.2.0-beta1

Issue with maps have now been fixed. _bootstrap-maps.scss will still be used for map overrides. Only $theme-colors is need as required.

// Required
$theme-colors: map-merge($theme-colors, $custom-theme-colors); 

[StudioKonKon]

Upgrade to Bootstrap v5.3.* - v6.0.0

• [x] Fix migration issues
• [x] Update and/or remove deprecated variables
• [x] Fix missing utilities (Since v5.3.0)
• [x] Cards (dark mode fix)
• [x] Navbars and Menus (dark mode fix)
• [x] Import new dark mode colour scheme
• [x] Replace .bg-light option on body to better support dark mode
• [x] Support for SVG icons
• [x] Redesign App UI
• [x] Deprecate .left-sidebar-* in favour of .sidebar-*
• [x] Use data-sk-type attribute instead of class names for easier dynamic control over different sidebar types
• [x] Replace dropdown icons with border styles
• [x] Replace styles for dropdown with Bootstraps own css variables
• [x] Replace styles for modals with Bootstraps own css variables
• [x] Upgrade navs and tabs to use css variables
• [x] Upgrade panels styles
• [ ] Re-add the collapsible-sidebar and define it as [data-sk-type="collapsible"]
• [x] Bootstrap v6 Ready

Get Ready for Bootstrap v6.0.0: https://getbootstrap.com/docs/5.3/migration/

Issues

• [x] Fix custom colour issues with alerts
• [x] Fix dropdown caret styles
• [x] Fix and update badge styles
• [x] Fix navs and tabs style and layout issues
• [x] Fix pagination styling issues
• [x] Fix toasts styling issues
• [x] Fix issue adding utilities (may require new import to include api and helpers)
• [ ] Fix progress styling issues

Updates

Sidebar HTML

<div class="sidebar" data-sk-type="fixed">
  <div class="sidebar-wrapper">
    <!-- Sidebar Content  -->
  </div>
</div>

Sidebar JS

const sidebar = new konkon.Sidebar("#left-sidebar")

function sidebarClose(event) {
   if (typeof sidebar.triggerAutoClose !== "undefined") {
      sidebar.triggerAutoClose(event)
   }
}

document.addEventListener("mousedown", sidebarClose, false)
document.addEventListener("touchstart", sidebarClose, false)