PCCW Global

  1. Home
  2. Page layouts

Page layouts

Sky Framework provides detailed descriptions of the layout structure it uses and provides guidelines for development teams so that they can combine snippets of code from multiple layouts to create unique interfaces, while keeping their applications compliant with the PCCW Global standards.

The layouts are grouped into two categories, the content page layouts and the application layouts, however, both types of layouts use a common layout pattern, that separates page content in 3 distinctive segments - header, body and footer.

Common layout markup

All layout templates use a common markup base, that should be used as a foundation before implementing the predefined coded boilerplates.

The header segment contains the following:

  • HTML declarations and global settings for best cross-browser compatibility and visual consistency
  • Links to the Sky Framework and additional stylesheet files

  • Link to the fonts used for the framework typography
  • The body tag that should have either one of the two classes page-fluid or page-application depending on the layout
  • The opening tag of the <div class="wrapper"> element, used as the layout foundation. The closing tag of this element is located at the footer segment.
  • The header row that includes the header navigation component. In content page layouts the header navigation component scrolls with the rest of the document, while in the application page layouts it is fixed at the top of the screen for resolutions larger than 992px.
  • The breadcrumb row that includes the breadcrumbs component

The footer segment contains:

  • The </div> closing tag of the <div class="wrapper"> container initially defined in the header segment.
  • Links to the jQuery and Sky Framework javascript files
HTML markup
Copy<!-- HEADER SEGMENT -->

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="https://skyframework.pccwglobal.com/dist/skyframework.css" type="text/css" />
</head>

<body class="page-fluid">
  <div class="wrapper">
    <div class="header">
      <!-- header navigation component -->
    </div>
    <div class="breadcrumbs-row">
      <!-- breadcrumbs component -->
    </div>
<!-- BODY SEGMENT -->
Copy<!-- FOOTER SEGMENT -->

  </div> <!-- /wrapper -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://skyframework.pccwglobal.com/dist/skyframework.js"></script>
</body>
</html>

Body segment

Different blocks of code can be combined for the dynamic content segment to form different layouts depending on the layout type and the content to be rendered. Content page layouts are designed to promote text and visual content while application layouts have been specifically designed to accommodate complex application interfaces. However, both layouts are versatile enough to allow interchangeability of their content with only small display compromises.

Sky Framework provides you with coded layout boilerplates to ensure that a well built, stable foundation is used for your application, that is effortlesly working on all types of devices and resolutions, is being updated without human intervention to the latest framework revisions, and it also accelerates future development by using standardized framework guidelines.

Multiple variations of sample content layouts have been created to kickstart the migration process - it is as simple as copy/pasting the markup of the layout that fits best each application screen requirements and replace code where necessary.

Content page layouts

Content page layouts use a body structure divided in content rows with distinct content, make extensive use of the responsive grid layout and are suitable for content lists, product and presentation pages.

The following elements can be used to compose various layouts.

  • Optional featured content rows; a section with different contrast than the rest of the content to make its content stand out.
  • An optional hero content-row; a banner that usually contains a background image to promote specific content. Browse the content rows section for more details.
  • An optional filter sidebar
  • The actual content - text, photos or other media files, tables, charts, widgets, lists, forms. The content itself can have its own internal layout using the responsive grid system.
Form layout Example use cases:
Any form, eg edit product
List layout Example use cases:
Lists of items, eg products
List with sidebar layout Example use cases:
Filterable list content, eg product lists
Single page layout Example use cases:
Product presentation pages, etc
Single page with sidebar layout Example use cases:
Filterable page content, eg reports
Vertical center layout Example use cases:
Application login forms

Application layouts

Application layouts use the master-list layout, showing lists and detailed item views at the same time, making use of all the available screen size. They are suitable for complex and demanding applications, dashboards.

Application form layout Example use cases:
Profile, password reset page
Application master-detail layout Example use cases:
Lists of items with item details
Application single page layout Example use cases:
Item description page
Application widget dashboard Example use cases:
Filterable widget dashboard
© 2024, PCCW Global