Helprace Custom App Style Guide

This guide contains a reference of styles that you can use when creating Custom Apps in Helprace. Learn more about building Custom Apps.

Supported Tags

Supported tags:

, <div>, , , , , , <s>, , , , <ul>, <ol>, <li>, <hr>, <a>, <time>

Supported tag attributes:

color, src, border, width, height, style, href, alt, title, align, class, colspan, rowspan, rel, target, type, name, scheme, datetime, target, data-user-email

Any other tags or attributes will be removed before they appear on the app sidebar in Helprace.

Typography

Inline text elements

Bold

Use  or  for emphasizing a snippet of text with a heavier font-weight.

Here goes a bold text snippet.

Here goes <strong>a bold text snippet</strong>.

Italic

Use  or  for emphasizing a snippet of text with italics.

Here goes an italicized text snippet.

Here goes <em>an italicized text snippet</em>.

Strikethrough text

For indicating text that is no longer relevant use the <s> tag.

~~This line of text is meant to be treated as no longer accurate.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Underlined text

To underline text use the  tag.

This line of text will be shown as underlined.

<u>This line of text will be shown as underlined.</u>

Small text

For de-emphasizing a block text, use the  tag

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

Marked text

To highlight a run of text use the  tag.

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

Alignment classes

Easily realign text to components with text alignment classes.

Text aligned to the left.

Centered text.

Text aligned to the right.

Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<p class="text-left">Text aligned to the left.</p>
<p class="text-center">Centered text.</p>
<p class="text-right">Text aligned to the right.</p>
<p class="text-justify">Justified text. Lorem ipsum dolor sit amet...</p>

Transformation classes

Transform text in components with text capitalization classes.

lowercased text

uppercased text

capitalized text

<p class="text-lowercase">lowercased text</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>

Helper classes

Labels

Styled labels for various occasions.

default primary success info warning danger

<span class="label label-default">default</span>
<span class="label label-primary">primary</span>
<span class="label label-success">success</span>
<span class="label label-info">info</span>
<span class="label label-warning">warning</span>
<span class="label label-danger">danger</span>

Contextual colors

Pre-set nice colors for all sorts of messages and icons.

Muted text.

Primary information.

Successful order.

Informative announcement.

Warning message.

Danger ahead!

<p class="text-muted">Muted text.</p>
<p class="text-primary">Primary information.</p>
<p class="text-success">Successful order.</p>
<p class="text-info">Informative announcement.</p>
<p class="text-warning">Warning message.</p>
<p class="text-danger">Danger ahead!</p>

Contextual backgrounds

Pre-set colors for setting background to all sorts of elements. Text color is set automatically to black or white for proper contrast.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Sed do eiusmod tempor incididunt

Ut labore et dolore magna aliqua

Ut enim ad minim veniam

Quis nostrud exercitation ullamco laboris

<p class="bg-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="bg-success">Sed do eiusmod tempor incididunt</p>
<p class="bg-info">Ut labore et dolore magna aliqua</p>
<p class="bg-warning">Ut enim ad minim veniam</p>
<p class="bg-danger">Quis nostrud exercitation ullamco laboris</p>

Badges

A rounded badge commonly used to display counters.

<span class="badge">12</span>

Icons

Use .fa class with an icon class from FontAwesome.

cancel
messages: 12
settings

<ul>
	<li><i class="fa fa-ban text-danger"></i> cancel</li>
	<li>messages: <span class="badge"><i class="fa fa-envelope"></i> 12</span></li>
	<li><span class="label label-primary"><i class="fa fa-gear"></i> settings</span></li>
</ul>

HR

A horizontal line.

Text before the line.

Text under the line.

<hr>

Links

A hyperlink.

link

<a target="_blank">link</a>

Quick floats

Easily float an element to the left or right.

pull-left

pull-right

<div class="pull-left">text</div>
<div class="pull-right">text</div>

Center content blocks

Set an element to display: block and center via margin, e.g. to center an image.

centered block

<div class="center-block">centered block</div>

Clearfix

Easily clear floats by adding .clearfix to the parent element.

Parent clearfix div pull-right

<div class="clearfix">Parent clearfix div <span class="pull-right">pull-right</span></div>

Truncating text

Use .text-overflow class to truncate text.

warning

Text overflow enabled. Lorem ipsum dolor sit amet, consectetur

<div>
	<span class="pull-right">
		<span class="label label-warning"><i class="fa fa-ban"></i> warning</span></li>
	</span>
	<div class="text-overflow">
		Text overflow enabled. Lorem ipsum dolor sit amet, consectetur
	</div>
</div>

Overflow ellipsis

Use .overflow-ellipsis with .text-overflow class to truncate text nicely with an ellipsis at the end.

warning

Text overflow with ellipsis. Lorem ipsum dolor sit amet, consectetur

<div>
	<span class="pull-right">
		<span class="label label-warning"><i class="fa fa-ban"></i> warning</span></li>
	</span>
	<div class="text-overflow overflow-ellipsis">
		Text overflow with ellipsis. Lorem ipsum dolor sit amet, consectetur
	</div>
</div>

Time ago

Show time in a human-readable format, like you often see it in Helprace: "a week ago", "2 days ago", "13 minutes ago".

updated 11 days ago

updated <time datetime="2017-07-07T13:33:50+00:00"></time>

Collapsible blocks

Collapsed by default

Specify a title within the first <div> inside a collapsible block. Clicking it toggles visibility of the second <div>. It is collapsed by default.

Clickable Title

Text and code inside a collapsible block.

<div class="collapse">
    <div>Clickable Title</div>
    <div>Text and code inside a collapsible block.</div>
</div>

Expanded by default

Add .in class to make a block expanded by default.

Clickable Title

Text and code inside a collapsible block.

<div class="collapse in">
    <div>Clickable Title</div>
    <div>Text and code inside a collapsible block.</div>
</div>

No left margin

Content inside a collapsible block is shown without left margin.

Clickable Title

Text and code inside a collapsible block without left margin.

<div class="collapse in no-margin">
    <div>Clickable Title</div>
    <div>Text and code inside a collapsible block without left margin.</div>
</div>

Marker on the right

Display the collapsed/expanded marker on the right.

Clickable Title

Text and code inside a collapsible block.

<div class="collapse in mode-right">
    <div>Clickable Title</div>
    <div>Text and code inside a collapsible block.</div>
</div>

Lists

Unordered list

A list of items in which the order does not matter.

item
item
item
- item
- item
item

<ul>
    <li>...</li>
</ul>

Ordered list

A list of items in a certain order.

item
item
item
1. item
2. item
item

<ol>
    <li>...</li>
</ol>

Unstyled list

Remove the default list-style and left margin on list items . This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well, if needed.

item
item
item
- item
- item
item

<ul class="list-unstyled">
    <li>...</li>
</ul>

Inline list

Place all list items on a single line with display: inline-block; and some light padding.

item #1
item #2
item #3
item #4

<ul class="list-inline">
    <li>...</li>
</ul>

Collapsible nested list

Collapsible lists can be nested items of a list.

Clickable Title
- item
item

<ul class="list-unstyled">
    <li class="collapse in">
        <div>Clickable Title</div>
        <ul class="list-unstyled">
            <li>item</li>
            <ul class="list-unstyled">
                <li class="collapse">
                    <div>Clickable Title</div>
                    <ul class="list-unstyled">
                        <li>item</li>
                        <li>item</li>
                    </ul>
                </li>
                <li>item</li>
                <li>item</li>
            </ul>
        </ul>
    </li>
    <li>item</li>
</ul>

Layout examples

Use the following examples of formatted HTML layout to design your first app.

Example Shopping Cart

<ul class="list-unstyled">
	<li class="text-muted">Customer since 17 Aug 2016</li>
	<li>Lifetime Value <span class="pull-right">$2,938.00</span></li>
	<li>Past 12 Months <span class="pull-right">$1,240.00</span></li>
	<li>Average Order <span class="pull-right">$489.34</span></li>
</ul>
<div class="collapse in">
	<div>Recent Orders <span class="badge">3</span></div>
	<ul class="list-unstyled">
		<li class="clearfix">
			<div><a href="#">#94571</a><span class="pull-right">$140.00</span></div>
			<div>15 June 2017
                <span class="pull-right text-warning">Awaiting Shipment</span>
            </div>
			<hr>
		</li>
		<li class="clearfix">
			<div><a href="#">#83453</a><span class="pull-right">$176.00</span></div>
			<div>15 June 2017
                <span class="pull-right text-info">Shipped</span>
            </div>
			<hr>
		</li>
		<li class="clearfix">
			<div><a href="#">#82454</a><span class="pull-right">$310.00</span></div>
			<div>15 June 2017
                <span class="pull-right text-success">Completed</span>
            </div>
			<hr>
		</li>
	</ul>
</div>

Example CRM

ACME R-23-90 OK

Company ACME, Inc.
Point of Contact
- Name John Smith
- Email john.smith@example.com
- Phone +1 (234) 567-89-01
Stats 10K 3K 128
- Users 10,256
- Emails 2,678
- Pages 128
- Language English
- Registered 10 hours ago

<div class="collapse in mode-right no-margin">
	<div class="clearfix">
		ACME
		<span class="pull-right">
			<span class="label label-info">R-23-90</span>
			<span class="label label-success">OK</span>
			<i class="fa fa-ban text-danger" title="Hover message"></i>
		</span>
	</div>
	<ul class="list-unstyled">
		<li class="clearfix">
			Company
			<span class="pull-right"><a href="#">ACME, Inc.</a></span>
		</li>
		<li class="collapse">
			<div>
				Point of Contact
			</div>
			<ul class="list-unstyled">
				<li class="clearfix">
					Name
					<span class="pull-right text-muted">
                        <a href="#">John Smith</a>
                    </span>
				</li>
				<li class="clearfix">
					Email
					<span class="pull-right text-muted">
                        <a href="#">john.smith@example.com</a>
                    </span>
				</li>
				<li class="clearfix">
					Phone
					<span class="pull-right text-muted">
                        <a href="tel:+12345678901">+1 (234) 567-89-01</a>
                    </span>
				</li>
			</ul>
		</li>
		<li class="collapse in">
			<div>
				Stats
				<span class="pull-right">
					<i class="fa fa-user text-muted"></i>
                    <span class="text-muted">10K</span>
					<i class="fa fa-envelope text-muted"></i>
                    <span class="text-muted">3K</span>
					<i class="fa fa-file-alt text-muted"></i>
                    <span class="text-muted">128</span>
				</span>
			</div>
			<ul class="list-unstyled">
				<li class="clearfix">
					Users
					<span class="pull-right">
						10,256
					</span>
				</li>
				<li class="clearfix">
					Emails
					<span class="pull-right">
						2,678
					</span>
				</li>
				<li class="clearfix">
					Lists
					<span class="pull-right">
						128
					</span>
				</li>
				<li class="clearfix">
					Language
					<span class="pull-right">
						English
					</span>
				</li>
				<li class="clearfix">
					Registered
					<span class="pull-right">
						<time datetime="2017-07-07T13:33:50+00:00"></time>
					</span>
				</li>
			</ul>
		</li>
	</ul>
</div>