Combination View Flat View Tree View
Threads [ Previous | Next ]
Jonathan Neal
Conventions and Best Practices
July 2, 2010 12:07 PM
Answer

Jonathan Neal

LIFERAY STAFF

Rank: Junior Member

Posts: 66

Join Date: August 29, 2007

Recent Posts

Hey guys,

I thought I would share with you a new document I'm working on to communicate our Liferay theming conventions and best practices when building themes and plugins. Feedback is welcome and appreciated.

--------

Rules are organized by selector weight, with lighter "less specific" rules placed toward the top of the stylesheet, and heavier "more specific" rules placed toward the bottom.

All rules and comments are divided by one empty line.

Comments are used to head and divide sections of the stylesheet.
They are written as a forward slash /, an asterisk *, a space, 8 dashes -, a space, the comment, then a space, 8 dashes-, a space, an asterisk *, and a forward slash /.

Each rule is written as the selectors, a space, the opening brace {, a new line for each property in the declaration block, and a new line for the closing brace }.

Rules separate the selector and the declaration block with one space before the opening brace {.

When using multiple selectors, the comma separator , is proceeded by a linebreak, so that each selector will appear on a new line.
The last selector still separates itself between the declaration block with one space before the opening brace {.

Declarations are arranged in alphanumeric order by property name, and are each indented by one tab before the property.

Shorthand properties are used whenever applicable.

Properties are immediately proceeded by a colon : and one space, followed by the value which is immediately proceeded by one semi-colin ;.

Colors are specified by using their hexidecimal value.

Hexidecimal values are written in all caps, and condensed into three digits whenever possible.

All padding, margin, and border values are condensed whenever possible.

All measurements equal to 0 will drop the unit suffix.
For example, 0px, 0em, and 0% are written as 0.

When using a URL, relative addresses are used whenever possible, and quotations are never included.

When using a URL, url is immediately proceeded by the opening parenthesis (, the address of the asset, and then the closing parenthesis ).

Font names are only wrapped in double quotations " when the font name includes spaces or special characters.

When using multiple fonts, the comma separator , is proceeded by one space.

Line heights will not include the em unit suffix.

 1/* -------- An example of well written CSS in Liferay --------*/
 2
 3.sample-portlet {
 4    padding: 10px;
 5}
 6
 7.sample-portlet p {
 8    color: #555;
 9    font: 90% "Courier New", Courier, monospace;
10    margin: 1em 0;
11}
12
13.sample-portlet p img,
14.sample-portlet p .bg {
15    border: 10px solid #FF0;
16}
17
18.sample-portlet p .ajax {
19    background: #000 url(../images/ajax_bg.png) no-repeat center center;
20}
21
22/* -------- Portlet Configuration --------*/
23
24.portlet-configuration img {
25    border: 10px solid #00F;
26}