RTL

Overview

Short CSS classes to help maintain consistency and save you time

These short, structured class names are easy to remember and help you work faster. What’s more, the spacings and sizes are consistent with the values declared in variables.

Variable Value
@siteWidth 980px
@spacingXs 5px
@spacingS 10px
@spacingM 15px
@spacingL 20px
@spacingXl 30px

Miscellaneous

Helper class name Description
.cf A badass clearfix hack to clear floating elements without using presentational markup. Just apply this to the parent container and you won't need to use
anymore. See http://nicolasgallagher.com/micro-clearfix-hack for more details :)
.hidden Hides an element. Use this as opposed to inline styles.
.elsewhere Moves an element off the page, hiding it from the user.
.fl .fr Floats an element left or right, respectively.
.fno Cancels the floating position of an element.
.clr Clearing floated elements.
.relative Relatively positioning an element
.layered Absolutely positioning an element: removing it from the flow of the document.
.decorative Force secondary font
.uppercase Transform text in uppercase
.lowercase Transform text in lowercase

Spacing

Usage: .[type][direction][size].
Example: .prl (applies a large padding to the right side of the element).

Value Description
[type] Margin (m) or padding (p).
[direction]

The side or axis on which to apply the spacing:

  • a All
  • t Top
  • r Right
  • b Bottom
  • l Left
  • h Horizontal
  • v Vertical
[size]
  • n None
  • xs eXtra Small
  • s Small
  • m Medium
  • l Large
  • xl eXtra Large
show code hide code 
<!-- The id attribute describes the class value-->
<div id="padding-all-small" class="pas"> ... </div>
<div id="padding-all-none" class="pan"> ... </div>
<div id="margin-top-extra-large" class="mtxl"> ... </div>
<div id="margin-left-none" class="mln"> ... </div>

Border radius

Usage: .br[direction][size].
Example: .brtlm (applies a medium-sized border radius to the top-left corner of the element).

Value Description
[direction] The side or corner on which to apply the border radius. Values can be all (a), top left (tl), top right (tr), bottom right (br), bottom left (bl), top (t), left (l), bottom (b), or right (r).
[size] One of 3 sizes, defined in the variables.less file. Values can be small (s), medium (m), or large(l).
show code hide code 
<!-- The id attribute describes the class value-->
<div id="border-radius-all-medium" class="bram"> ... </div>
<div id="border-radius-top-left-small" class="brtls"> ... </div>
<div id="border-radius-bottom-medium" class="brbm"> ... </div>

Text alignment

Usage: .ta[alignment].
Example: .tac (centers text within the element).

Value Description
[alignment]

The alignment of the text. Values can be:

  • l Left
  • r Right
  • c Center
  • j Justify
  • i Inherit
.hyph This class activates hyphenation on paragraphs for example, or on a generic container. This is a progressive enhancement, it is now supported by Firefox, IE10, and Safari. The browser must know the language, for example with <html lang="en"> for a proper hyphenation.
show code hide code 
<!-- The id attribute describes the class value-->
<div id="text-align-center" class="tac"> ... </div>
<div id="text-align-left" class="tal"> ... </div>
<div id="text-align-justify" class="taj"> ... </div>

Block layout

Usage: .disp[layout].
Example: .dispi (makes an element inline).

Value Description
[layout]

The block layout. Values can be:

  • b Block
  • ib Inline block
  • i Inline
show code hide code 
<!-- The id attribute describes the class value-->
<div id="display-block" class="dispb"> ... </div>
<div id="display-inline" class="dispi"> ... </div>
<div id="display-inline-block" class="dispib"> ... </div>

Block alignment

Usage: .ba[alignment].
Example: .bac (centers a block element within its container).

Value Description
[alignment]

The alignment of the block. Values can be:

  • l Left
  • r Right
  • c Center
show code hide code 
<!-- The id attribute describes the class value-->
<div id="block-align-center" class="bac"> ... </div>

Vertical alignment

Usage: .va[alignment].
Example: .vam (vertically alignment of an element to the middle).

Value Description
[alignment]

The vertical alignment. Values can be:

  • m Middle
  • b Bottom
show code hide code 
<!-- The id attribute describes the class value-->
<div id="vertical-align-middle" class="vam"> ... </div>

Rich Containers

Introduction

A rich container supports one of the most common layout patterns on Viadeo, in which there is an image (usually aligned left) and a block of text. This allows us to avoid using fixed widths on floated elements when implementing this pattern.

Class Alignment
.img-left The image will be left aligned. Note that you can still use the old .img class but it will be deprecated in the future.
.img-right The image will be right aligned. The previous .imgRight class name is still supported but will be deprecated in the future. 
<div class="rc">
  <a href="#" class="img-left">
  <img src="..." />
  </a>
  <div class="bd">
  ...
  </div>
</div>

Spacing & Alignment

The spacing between the image and text in rich containers can be specified by adding a class name to the .rc element, and the alignment by adding a class to the .img element.

Class Spacing
.rcsxs Value defined as @spacingXs
.rcss Value defined as @spacingS
.rcsm Value defined as @spacingM
.rcsl Value defined as @spacingL
.rcsxl Value defined as @spacingXl

Examples

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

show code hide code 
<!-- The media image is aligned to the left (img-left) with an extra-large (rcsxl) spacing-->
<div class="rc rcsxl">
  <a class="img-left avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
  <div class="bd">
  <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
  </div>
</div>
<!-- The media image is aligned to the right (img-right) with an extra-small (rcsxs) spacing-->
<div class="rc rcsxs">
  <a class="img-right avatar" href="#"><img src="img/avatars/avatar-m-60x60.png"></a>
  <div class="bd">
  <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
  </div>
</div>