Basic guide for styling pages under the design standards for Assembla.

Basic text markup

Samples of titles, subtitles, paragraphs and lists:

H1 title sample <h1>

For small text, use ".small-text" tag on a paragraph, sample: last updated by paco at Dec 17 17:27

Sample of default paragraph text <p></p>: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus a mi. Sed euismod, velit sit amet ornare euismod, nulla ipsum scelerisque leo, a volutpat leo diam vel enim.

H2 subtitle sample <h2>

Sample of default paragraph text <p></p>: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus a mi. Sed euismod, velit sit amet ornare euismod, nulla ipsum scelerisque leo, a volutpat leo diam vel enim.

H3 subtitle sample <h3>

Following the samples of default style for unordered and ordered lists:

• Lorem ipsum dolor sit amet
• volutpat leo diam vel enim
• Phasellus a mi

1. Lorem ipsum dolor sit amet
2. volutpat leo diam vel enim
3. Phasellus a mi

Use ".tip" on paragraphs to add tips formatting.

<p class="tip">Use ".tip" on paragraphs to add tips formatting.</p>

Tables

This is a sample of how a basic table is rendered:

Boxes

You can use 3 different type of boxes:

<div class="box">
<h2>Using this page</h2>
<p>This one ".box" can be used for instructions on tools. When you use "h2" on the title, it adds a grey separator.</p>
<h3>Subtitle</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus a mi.</p>
</div>

Configuration

<div class="outlined-box">
<p>This is ".outlined-box", like the one used on the top of the SVN Code Browser.</p>
</div>

<div class="highlight-box">
<p>This is ".highlight-box", that can be used on the main content or sidebar to emphasize content or features.</p>
</div>

<div class="lightblue-box">
<p>".lightblue-box" can be used to enphasize paragraphs.</p>
</div>

<div class="green-box">
<p>".green-box" is used on the Team page and is very useful to enphasize paragraphs on content and sidebar.</p>
</div>

Combining tags

You can add and combine generic tags to add specific attributes to elements like boxes:

• ".rounded" tag gives rounded corners on Firefox and Safari browsers.
• You can add floating to elements by adding ".float-left" and ".float-right"
• Give extra spacing to elements by adding the tags: ".space-top", ".space-right", ".space-bottom" or ".space-left"

<div class="outlined-box rounded float-left space-right" style="width: 50%;">
<p>This is an ".outlined-box" that combines generic tags as follows: <br /> 
class="outlined-box rounded float-left space-right"</p>
</div>
<div class="highlight-box rounded float-left space-left" style="width: 35%;">
<p>This is a ".highlight-box", that combines this tags:<br /> 
class="highlight-box rounded float-left space-left"</p>
</div>