PCCW Global

  1. Home
  2. Migration to v2

Migration to v2

Sky Framework v2.0 has been rewritten almost from the ground up to keep pace with modern standards, resulting in better documented source code, smaller footprint, less markup, new utility classes and many more.

A few markup changes are required in order to bring your project up to date with Sky Framework v2. CSS and Javascript core changes remain transparent to users.

Supported browsers and devices changes

Due to the use of flexbox, stock Android browsers up to version 4.3, Internet explorer 10 and Windows mobile devices are no longer supported.

Required markup changes

The following markup changes are required in order for the codebase to be usable.

Layout markup changes

Content page layouts

Containers with classes content-area, main and footer-inner must be removed.

HTML markup
<!-- OLD MARKUP -->
<div class="content">
  <div class="content-area"> <!-- REMOVE -->
    <div class="main"> <!-- REMOVE -->
      <div class="container">
        <!---->
      </div>
    </div>
  </div>
</div>
<!-- NEW MARKUP -->
<div class="content">
  <div class="container">
    <!---->
  </div>
</div>
<!-- OLD MARKUP -->
<div class="footer">
  <div class="footer-inner"> <!-- REMOVE -->
    <!---->
  </div>
</div>
<!-- NEW MARKUP -->
<div class="footer">
  <!---->
</div>

Application layouts

The content-area container needs to be removed - as a result the viewport container is now a direct descendant of the content container. All main containers must be wrapped inside a main-wrapper container - sibling to the viewport container.

The sidebar should switch orders with the main-header.

In addition to the above changes, in all single page application layouts the main class needs to be replaced with main-overflown.

HTML markup
<!-- OLD MARKUP -->
<div class="content">
  <div class="content-area"> <!-- REMOVE -->
    <div class="viewport">
      <!---->
    </div>
    <div class="main">
      <div class="main-header">
        <!---->
      </div>
      <div class="sidebar">
        <!---->
      </div>
      <!---->
    </div>
  </div>
</div>
<!-- NEW MARKUP -->
<div class="content">
  <div class="viewport">
    <!---->
  </div>
  <div class="main-wrapper"> <!-- NEW -->
    <div class="main">
      <div class="sidebar"> <!-- MARKUP ORDER CHANGE -->
        <!---->
      </div>
      <div class="main-header"> <!-- MARKUP ORDER CHANGE -->
        <!---->
      </div>
      <!---->
    </div>
  </div>
</div>
<!-- SINGLE PAGE APPLICACTION LAYOUT OLD MARKUP -->
<div class="main">
  <!---->
</div>
<!-- SINGLE PAGE APPLICACTION LAYOUT NEW MARKUP -->
<div class="main-overflown">
  <!---->
</div>

Inside the main-header container, the following markup changes are required.

The float-* and *-lg classes must be removed. The input-group class needs to be replaced with search-sort-group, and the input-extension class must be removed.

HTML markup
<!-- OLD MARKUP -->
<div class="main-header">
  <div class="float-md-right float-lg-right"> <!-- REMOVE -->
    <a class="btn btn-main btn-xxs-block btn-xs-block">...</a>
  </div>
  <div class="input-group"> <!-- RENAME TO search-sort-group-->
    <div class="search-group">
      <!---->
    </div>
    <div class="input-extension">  <!-- REMOVE -->
      <div class="dropdown" data-toggle="dropdown">
        <!---->
      </div>
    </div>
  </div>
</div>
<!-- NEW MARKUP -->
<div class="main-header">
  <a class="btn btn-main btn-xxs-block btn-xs-block">...</a>
  <div class="search-sort-group"> <!-- RENAMED FROM input-group -->
    <div class="search-group">
      <!---->
    </div>
    <div class="dropdown" data-toggle="dropdown">
      <!---->
    </div>
  </div>
</div>

Component markup changes

  • In the file browser component, the div container needs to be removed and the custom-file class should be directly applied on the label. Check the file browser updated markup.
  • The revoke-pad-* classes have been renamed to reverse-pad-*. Check the reverse padding classes section for more details.
  • The inline-block class applied on input fields has been renamed to form-control-inline for consistency. Check the input fields markup in the forms section.
  • The table-overflown container class has been renamed to table-actions. Any table-actions classes applied directly on table elements need to be removed. Check the tables with actions section for the updated markup.
  • The toggle-viewport class found in the master-detail list layout has been renamed to btn-toggle-viewport.
  • The popover-toggle button class of popovers has been renamed to btn-popover-toggle
  • A data-toggle="dropdown" attribute is now required on the btn-dropdown-toggle button of dropdowns to enable their functionality
  • A data-toggle="popover" attribute is now required on the btn-popover-toggle button of popovers to enable their functionality
  • A data-toggle="tab" attribute is now required on the buttons of tabs to enable tab functionality
  • A data-toggle="toggle" attribute is now required on the btn-toggle button of toggles to enable their functionality
  • A data-toggle="widget" attribute is now required on the btn-widget-sidebar-toggle button of widgets to enable sidebar toggle functionality

Javascript changes

  • In alerts, Javascript method name hide has been renamed to remove and Javascript event names hide and hidden have been renamed to remove and removed respectively
  • In tags Javascript event name hidden has been renamed to removed

Optional markup changes

The following changes are marked as optional, because the markup is still usable and functional without any further refactoring, however it is suggested to make the changes for cleaner markup.

Optional layout markup changes

  • The first descendant div in all content-rows can be safely removed, since it is no longer required.
  • The first descendant div in the viewport container in page application layouts can be safely removed, since it is no longer required.

Optional component markup changes

  • The custom-select class is no longer required for selects - the custom style is now applied to all selects by default.
  • In the alerts component, the contained div element is no longer required. Check the updated alert component markup.
  • The span element contained in the h3 title of the widget component is no longer required.
  • The nowrap class is no longer required alongisde the actions table cells in the responsive tables with actions component.
© 2024, PCCW Global