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 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.
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
- Get a copy of
default.less and rename it e.g. mystyle.less.
- Get a copy of
standard-vars.less and rename it e.g. mystyle-vars.less.
- Generate your jQuery theme, based on the color scheme you redefine in
mystyle-vars.less. We'll call it jqui.css.
- Replace in
mystyle.less:
@import url(/css/publisher/default-vars.less); with @import url(http://your/path/to/mystyle-vars.less);@import url(/css/v/jqui/publisher-default.css); with @import url(http://your/path/to/jqui.css);
- Further tweak
mystyle-vars.less.
- 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.
Plain HTML / Printer friendly.
