GenesisUI 1.6.0 with Bootstrap 4 Alpha 6 has landed! What's new?

Bootstrap 4 Alpha 6 has landed, and it’s one of biggest ships to date. Grid system and all major components has been rewritten and now support flexbox. That's why we had to make some big changes in our templates to support latest version of Bootstrap.

Embracing Flexbox

Bootstrap 4 and GenesisUI are now flexbox by default! Flexbox is an immensely powerful layout tool, providing unparalleled flexibility (hah) and control to our grid system and core components. It comes at the cost of dropping IE9 support, but brings significant improvements to component layout, alignment, and sizing.

Upgrade guide

  1. Bootstrap CSS selectors:
    • Change classes pull-left to float-left
    • Change classes pull-right to float-right
    • Change classes float-xs-left to float-left
    • Change classes float-xs-right to float-right
    • Change classes text-xs-center to text-center
    • Change classes text-right to text-right
    • Change classes text-xs-left to text-left
    • Change classes text-xs-left to text-left
    • Change classes tag to badge
    • Change classes tag-* to badge-*
    • Change classes col-xs-* to col-*
  2. GenesisUI layout CSS selectors
    • Body:
      • Add class app to body element
        Version 1.5: <body class="...">
        Version 1.6: <body class="app ...">
      • Change class navbar-fixed to header-fixed
      • Change class fixed-nav to sidebar-fixed
      • Change class compact-nav to sidebar-compact
    • App Header:
      • Add class app-header to header element.
        Version 1.5: <header class="navbar">
        Version 1.6: <header class="app-header navbar">
      • Remove <div class="container-fluid">...</div> from header.
      • Change class mobile-toggler to mobile-sidebar-toggler.
        Version 1.5: <button class="navbar-toggler mobile-toggler hidden-lg-up" type="button">&#9776;</button>
        Version 1.6: <button class="navbar-toggler mobile-sidebar-toggler hidden-lg-up" type="button">&#9776;</button>
      • Remove mobile-nav-toggle and add class mobile-sidebar-toggler.
        Version 1.5: <button class="navbar-toggler hidden-lg-up" type="button" mobile-nav-toggle>&#9776;</button>
        <button class="navbar-toggler mobile-sidebar-toggler hidden-lg-up" type="button">&#9776;</button>
      • Change class sidebar-toggle to sidebar-toggler.
        Version 1.5: <a class="nav-link navbar-toggler sidebar-toggle" href="#">&#9776;</a>
        Version 1.6: <a class="nav-link navbar-toggler sidebar-toggler" href="#">&#9776;</a>
      • Change class float-right or float-xs-right to ml-auto.
        Version 1.5: <ul class="nav navbar-nav float-right">
        Version 1.6: <ul class="nav navbar-nav ml-auto">
      • Change class aside-toggle to aside-menu-toggler.
        Version 1.5: <a class="nav-link navbar-toggler aside-toggle" href="#">&#9776;</a>
        Version 1.6: <a class="nav-link navbar-toggler aside-menu-toggler" href="#">&#9776;</a>
    • App body
    • App Footer
      • Change class footer to app-footer
        Version 1.5: <footer class="footer">
        Version 1.6: <footer class="app-footer">
  3. Angular 2 Version
    • Remove SmartResizeDirective Directive from app.module.ts
    • Remove following file src/app/shared/smart-resize.directive.ts
    • Update all files in src/app/shared
  4. Ajax & Static Version
    • Update folowing file js/app.js
  5. AngularJS Version
    • Update folowing file js/directives.js

Version 1.5 Structure

<!DOCTYPE html>
<html lang="en">
<head>
  ...
</head>
<body>
  <header class="navbar">
    <div class="container-fluid">
      ...
    </div>
  </header>

  <div class="sidebar">
    <nav class="sidebar-nav">
      ...
    </nav>
  </div>

  <!-- Main content -->
  <main class="main">
    <!-- Breadcrumb -->
    <ol class="breadcrumb">
      ...
    </ol>
    <div class="container-fluid">
      ...
    </div>
  </main>

  <aside class="aside-menu">
    ...
  </aside>


  <footer class="footer">
    ...
  </footer>

</body>
</html>

Version 1.6 Structure

<!DOCTYPE html>
<html lang="en">
<head>
  ...
</head>
<body class="app">
  <header class="app-header navbar">

    ...

  </header>
  <div class="app-body">
    <div class="sidebar">
      <nav class="sidebar-nav">
        ...
      </nav>
    </div>

    <!-- Main content -->
    <main class="main">
      <!-- Breadcrumb -->
      <ol class="breadcrumb">
        ...
      </ol>
      <div class="container-fluid">
        ...
      </div>
    </main>

    <aside class="aside-menu">
      ...
    </aside>
  </div>

  <footer class="app-footer">
    ...
  </footer>

</body>
</html>