Rebranding Publisher CDN Portal

Plain HTML / Printer friendly.Plain HTML / Printer friendly.

 

Requirements

The V3 Publisher Portal is a brand new invention using HTML5, CSS3 and LESS technologies, designed for today's and future's browsers. In order to rebrand the portal, minimum understanding on these technologies is required.

 

HTML5 and CSS3

HTML5

HTML5 enables better semantic markup and rich features which can be well extended on the portal in future. Along with CSS3, the styling of elements are clearner and speak for themselves.

For example, the following rule denotes that the bullet items in the first <nav/> element are in-line with the paragaph:

footer nav:nth-of-type(1) > ul > li { display: inline; list-style: none; }

The portal is well tested on Gecko-based and Webkit-based browsers (the recent ones, as long as CSS3 is supported), such as Firefox, Google Chrome and Safari. It works functionally well on other browsers such as Internet Explorer and Opera, with trivial UI glitches.

You may learn more about them by reading the specifications:

 

LESS

LESS is not a standard but excellent work produced by Alexis Sellier. It is an extension of CSS (like SASS) with variables, mixins, selector inheritance, etc. It is originally written in Ruby and rewritten in JavaScript with easier adoption, greater performance, and runtime compilation. It therefore serves as the foundation of style rebranding in the V3 portal.

Before we look into the real stuff, you may learn more about the "language" from its documentation.

 

Layout and Structure

Wireframe

The wireframe below shows the HTML structure used by generally most of the pages in the portal.

Wireframe

 

Common IDs and Classes

And these are the IDs and classes constituting most of the elements of the structure.

/* Key IDs, some are already shown in the wireframe above. */
#logo, #header-nav, #welcome, #page-wrapper, #page, #page-title, #page-nav, #page-summaries, #side-nav,

/* Decorators */
.highlight, .hidden, .underlined, .unsupported,

/* Data */
.items, .entities, .records,

/* UI Components */
.actions, .links, .notifications,
.box1, .box2,

/* Hackable Stuff */
.action-write, .action-delete,

 

Styling

Stylesheets

The portal is designed with the goals of reducing our customer's ramp-up time and enabling freedom for Aflexi's refactoring. Hence, rebranding no longer requires overriding CSS rules but setting variables in LESS.

Before you begin styling, these are the key stylesheets being used:

  • base.less - Contain predefined mixins, such as .clear, .list-flat, .radius, etc. Imported by standard.less. (View)
  • standard-vars.less - Contain set of standard variables. (View Copy)
  • standard.less - Standard styling of the portal. (View)

 

Basic Styling

  1. Get a copy of default.less and rename it e.g. mystyle.less.
  2. Get a copy of standard-vars.less and rename it e.g. mystyle-vars.less.
  3. Generate your jQuery theme, based on the color scheme you redefine in mystyle-vars.less. We'll call it jqui.css.
  4. Replace in mystyle.less:
    1. @import url(/css/publisher/default-vars.less); with @import url(http://your/path/to/mystyle-vars.less);
    2. @import url(/css/v/jqui/publisher-default.css); with @import url(http://your/path/to/jqui.css);
  5. Further tweak mystyle-vars.less.
  6. Voila!

 

Putting It Online

To maintain backward compatibility with our existing Portals, the CSS URL you set through our V2 portal is being honored and used by our code to resolve the CSS (LESS in fact) URL in V3.

For example, if CSS URL is set as http://your/path/to/oldstyle.css, the existing V2 portal loads it via:

<link rel="stylesheet" type="text/css" href="http://your/path/to/oldstyle.css" />

And the V3 portal loads it via:

<link rel="stylesheet/less" type="text/css" href="http://your/path/to/oldstyle-3.less" />

All you need to do is to ensure that mystyle.less is available as oldstyle-3.less.

This mechanism will be replaced in near future.

 

Advanced Styling

LESS is not error tolerant, if a variable or mixin referred by standard.less is missing, the UI will be broken. For this reason, standard-vars.less exists in the @import as a safeguard for Aflexi to define future variables. We do not recommend you to style elements separately from what we are controlling in standard.less, unless you are familiar with the technologies and you are ready to keep up to date to our UI changes (such as new IDs and classes that we may not announce publicly).

Refer to the line with more.less in your mystyle.less.