Shared.css Framework

Shared.css is our CSS framework to control CSS on all clients websites. It is focused to control Typography and formatting of content on sites.

Shared CSS is located on http://foliovision.com/shared.css and it is included in main CSS file of website (in most cases at start of style.css in active WordPress theme directory) with single code line: @import url("http://www.foliovision.com/shared.css");

Classes

Here are classes you can use to manage formatting of your page.

Text formatting

text-right – Align text to right
text-left – Align text to left
center – Align text to center
bold – Changes font weight to bold
uppercase – Makes text with All Caps
small – Makes text smaller
hide-link – link will be formatted as plain text

Example:

<p class="center">Lorem ipsum</p>
Paragraph will be centered.

Colors:

You can change text color with these classes:

red	Simple text
green-jk	Simple text
blue-lsm	Simple text
darkblue	Simple text
maroon	Simple text
black	Simple text
gray	Simple text
silver	Simple text
white	Simple text
green	Simple text
blue	Simple text
darkcyan	Simple text
darkpink	Simple text
darkgreen	Simple text
orange	Simple text

Example:

<p class="red">This text is red</p>

Block formatting classes

left – other content will float block from right side
right – other content will float block from left side
clear – block will not float other blocks above
clearright – block will not float other blocks above with class right
clearleft – block will not float other blocks above  with class left
center-block – block will be centered but not his content (only if blocks width is smaller than pages content width)
noborder – use for image which you want without border
credits – block will be formatted as a nice silver box
credits-blue – block will be formatted as a nice blue box
credits-red – block will be formatted as a nice red box
credits-green – block will be formatted as a nice green box

Example:

If you want your image to be floated, use class left or right for h5 in which image is.

<h5 class="left"><img height="266" width="320" alt="My Image" src="//cdn.foliovision.com/my-image.jpg" /></h5>

This is example of class credits, used code: <p class="credits">Some text here.</p>

This is example of class credits-blue, used code: <p class="credits-blue">Some text here.</p>

This is example of class credits-red, used code: <p class="credits-red">Some text here.</p>

This is example of class credits-green, used code: <p class="credits-green">Some text here.</p>

Lists

nonumbers – it will show ol list without numbers
nolist – it will show ul list without bullets
roman – your ol list will be with Roman numbers instead numbers
alpha – your ol list will be with alphabetical charaters instead numbers

Note: List needs to be wraped with div with these classes to use (as it is howed in next example)

Example

If you want your ol list without numbers, wrap it into div with class nonumbers.

<div class="nonumbers">
<ol>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
</ol>
</div>

Blocks width

If you want to change width of block, use class widthVALUE with width you want instead word VALUE. Suported values are: 200, 250, 300, 350, 400, 450, 500, 550, 600, 650.

Example:

<p class="width250">This block has 250px width.</p>

Tables

There are also some clases for table formatting. Header of table (thead tag) is automaticly highlighted. Other cells of table can be highlighted with class="trhead". You can use also other classes for formatting in tables.

Table types (their colour by class):

table-silver – silver table
table-red – red table
teble-blue – blue table
table-green – green table

Example:

<table class="table-silver">...</table>

Silver table

Heading 1	Heading 2	Heading 3
table cell	table cell	table cell
table cell	table cell	table cell
table cell	table cell	table cell
table cell	table cell	table cell
table cell	table cell	table cell

Red table

Heading 1	Heading 2	Heading 3
table cell	table cell	table cell
table cell	table cell	table cell
table cell	table cell	table cell
table cell	table cell	table cell
table cell	table cell	table cell

Blue table

Heading 1	Heading 2	Heading 3
table cell	table cell	table cell
table cell	table cell	table cell
table cell	table cell	table cell
table cell	table cell	table cell
table cell	table cell	table cell

Green table

Heading 1	Heading 2	Heading 3
table cell	table cell	table cell
table cell	table cell	table cell
table cell	table cell	table cell
table cell	table cell	table cell
table cell	table cell	table cell

Multiple classes

You can use more classes for one object if you want. For example, if you want your paragraph to be red and centered, just use class="red center". Name of classes should be separated only with one space. 

<p class="red center">Red text with align to center</p>