Typography

Basic CSS for Headings, Body Copy and Emphasis.

There are main headings from <h1> to <h5> that are customized by eXo Platform.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

The headings can be combined together consistently to define a template for a page. For example, h3 for main title and h4 for the sub titles

Page Title


Sub title part 1


Sub title part 2

To define a line next to headings, simply use the titleWithBorder class.

To define a large cover title, simply use the hero-unit class.

Cover Title

All headings are defined in bootstrap.css which is customized by Core.css. In particular:

Heading Font Size Apply For
.hero unit h1 60px Cover Titles, Page Titles, Product Titles
h1 36px Top level headings, Main subjects
h2 30px Important subjects
h3 24px Sub main important subjects
h4 18px Main headings of a sub important subject
h5 14px Sub content headings of a sub important subject

In some cases, the font size can be smaller depending on its purpose:

Font Size Apply For
13px Default font size for body copy, default menu, default button.
12px Minor content notice, used for specific purposes.
11px Mini text content, used for specific purposes.
Font Color Title Apply For

#333333

Dark Gray Default color for all titles, texts, text input, and labels.

#808080

Medium Gray Text color in navigations, used for special purposes.

#999999

Light Gray Default gray color for small texts, sub-titles, and text explanations.

#2F5E92

Electric Blue Emphasized titles, text hover or press, hyper-links or selected links.

Wiki Home

Title Blue Helvetica Neue - Bold - 24px - #2F5E92 - Drop Shadow

My Draft

Title Normal Helvetica Neue - Bold - 18px - #333333 - Drop Shadow
Mobile Team Organization Normal Helvetica Neue - Regular - 13px - #333333
Added by Khemais Menzli at Oct 25, 2012 10:11 AM Minor Helvetica Neue - Regular - 12px - #999999 - #2F5E92

By default, font style of a page inherits from the CSS style of body. In details:

Object Style
font-size 13
line-height 18
font-family "Helvetica Neue", Helvetica, Arial, sans-serif
color #333333

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula

For other basic CSS, there is no change between the eXo Platform style and Bootstrap:

Lead body copy

Make a paragraph stand out by adding .lead. This can be used for describing main content or cover.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula

To obtain consistency among product main pages, .hero unit can be used for product title and .lead can be used for product description.

Product Title

Short description about the product

Small

Following the eXo Platform style, the emphasis has a bit different on the <small> tag.

Updated on Sep 13, 2013 11:40 AM.

Bold

Simply add the <strong> tag to define bold effect for important content.

UX-Guidelines is to provide an overview about the eXo Platform style.

Italics

Simply add the <stress> tag to define italic effect for text.

eXo Platform includes Portal, ECMS, Social, Forum, Calendar...