Core styling

Sky Framework is built on top of a visual style guide that dictates the styling for body content and basic elements. Components, layouts and workflows are also constructed with respect to this style guide.

• Color palette
• Typography
  • Body text
  • Headings
  • Small tag
  • Hyperlinks
• Basic elements
  • Lists
  • Thematic breaks

---

Color palette

The color palette used in the Sky Framework is based on distinct colors defined by PCCW Global brand guidelines. Multiple accents are created around the dominant colors to promote certain functionalities.

---

Typography

Sky Framework uses the Open Sans font family as a base (courtesy of Google fonts), but also gracefully degrades to Helvetica, Arial and system sans-serif fonts. The necessary files required to make use of the Open Sans font family are included as part of the Sky Framework

---

Body text

Body font-size is set at 15px (=1em) and the line-height set at 22px. Direct body descendant elements that use em values use the body font size as a base. Keep in mind that em values are always relative to their parent container font-size.

---

Headings

Headings from <h2> through <h6> are available - in descending order of importance. The <h1> tag is reserved for the company logo. All the heading tags have predefined colors and predefined margins that depend on the parent element.

Code output

HTML Markup

Copy<h2>Heading 2 - <small>Secondary text</small></h2> <!-- font-size 2.5em-->
<h3>Heading 3 - <small>Secondary text</small></h3> <!-- font-size 1.5em -->
<h4>Heading 4 - <small>Secondary text</small></h4> <!-- font-size 1.2em -->
<h5>Heading 5 - <small>Secondary text</small></h5> <!-- font-size 1em -->
<h6>Heading 6 - <small>Secondary text</small></h6> <!-- font-size 0.75em -->

---

Small tag

You can use the <small> tag to decrease text-size to 0.9em of its parent container.

Code output

HTML Markup

Copy<p>This is how <small>small text</small> looks compared to normal paragraph text.</p>

---

Hyperlinks

Hyperlinks have predefined color states.

Code output

Hyperlink

HTML Markup

Copy<a href=#>Hyperlink</a>

---

Basic elements

Sky Framework includes predefined styling for commonly used HTML tags, like lists and thematic breaks.

---

Lists

There are two kinds of lists - unordered defined as <ul> and ordered defined as <ol> - and are suitable for displaying lists of items that belong to the same group. A styled-list class is required for the lists to be visually styled according to the framework standards.

Lists can be nested within each other as shown below, but they can also be mixed with each other - an ordered list can be placed inside an unordered list and vice-versa.

Code Output

HTML markup

Copy<ul class="styled-list">
  <li>This is an unordered list item</li>
  <li>This is an unordered list item</li>
  <li>This is a nested list
    <ul>
      <li>This is an unordered list item</li>
      <li>This is an unordered list item</li>
      <li>This is an unordered list item</li>
    </ul>
  </li>
  <li>This is an unordered list item</li>
</ul>

<ol class="styled-list">
  <li>This is an ordered list item</li>
  <li>This is an ordered list item</li>
  <li>This is a nested list
    <ol>
      <li>This is an ordered list item</li>
      <li>This is an ordered list item</li>
      <li>This is an ordered list item</li>
    </ol>
  </li>
  <li>This is an ordered list item</li>
</ol>

---

Thematic breaks

Thematic breaks are used to divide content into different sections. Additional classes have been defined to change the style - heavy and dotted or alter the thematic break margin distance between sections - lg, md and sm.

Code Output

HTML markup

Copy<...>
<hr class="lg">
<...>
<hr class="md">
<...>
<hr>
<...>
<hr class="sm">
<...>

HTML markup

Copy<...>
<hr class="heavy">
<...>
<hr class="dotted">
<...>