css: the basics + getting started

Here you will find how to use basic stuff from heartthrob, like typography, buttons and inputs.

typography

titles and texts

You can use classes like .link, .text-left, .text-right, .text-center, .text-justify, .text-lowercase, .text-uppercase, .text-capitalize to recreate those functions.

There is also a control for the weight of the font that you are using, with the claases .text-light, .text-bold, .text-extra-bold. You can control the color by using .text-black, .text-mid-black, .text-white.

You can use the class .link to create a pointer cursor in your element.

Use titles to help your users navige across you web portal. The tags .b, .strong will have the same style as the .h4 title.

example

how to use it

<h1>This is a h1 title</h1>
<h2>This is a h2 title</h2>
<h3>This is a h3 title</h3>
<h4>This is a h4 title</h4>
<h5>This is a h5 title</h5>
<h6>This is a h6 title</h6>

The tag .small will make your text looks a little bit small.

The paragraph will always be a more clear than the usual black. You can use the .hr to create a line.

Note: Creating lines inside .cardwill ignore card paddings to make a even beautiful page.

example

how to use it

<hr />

Blockquote

For quoting blocks of content from another source within your document. If you use the footer on your blockquote you will have personalized style with the text-aling to the right and a dash before it.

example

how to use it

<blockquote>
	Here you can view a simple text.
	<footer>
		If you use <code>footer</code> inside the blockquote you have a nice text like this
	</footer>
</blockquote>

Blockquote will vary when you use it inside a .card, see the example below.

example

how to use it

<div class="card">
	<h4>This is a card title</h4>
	<hr />
	<p>This is a card content.</p>
	<blockquote>
		Here you can view a simple text inside a blockquote inside a card.
	</blockquote>
</div>

You can use invoke special border to your blockqoute, even inside .card, by just using the class .border and, a red version using .border .danger.

example

how to use it

<div class="card">
	<h4>This is a card title</h4>
	<hr />
	<p>This is a card content.</p>
	<blockquote class="border">
		Here you can view a simple text inside a blockquote inside a card.
	</blockquote>
	<blockquote class="border danger">
		Here you can view a simple text inside a blockquote inside a card.
	</blockquote>
</div>

classes

white spaces

You can use classes in a div like .space-long, .space-medium and .space-low to add a white space with the height of 48px, 30px and 15px, respectively.

example

how to use it

<div class="card">
	<p>Bellow this line there is a <code>.space-long</code></p>
	<div class="space-long"></div>
	<p>Bellow this line there is a <code>.space-medium</code></p>
	<div class="space-medium"></div>
	<p>Bellow this line there is a <code>.space-low</code></p>
	<div class="space-low"></div>
	<p>End of the example.</p>
</div>

tag class

You can as well use the class .tag to create a more relevant content like this one.

example

how to use it

<p>Text with a inside a <span class="tag">class .tag</span>.</p>

accent color

You can use the class .accent to make your text with the same color as you accent color.

example

how to use it

<p>Text with <span class="accent">with your accent color</span></p>

util classes

In this framework, you can use the classes .left, .right, .center to help you positionate you content, after using those, you will need to use the .clear the clear both. You can use the .show and the .hide class to make your element visible or hidden.

inputs

simple text box

Simple text boxes should be used for 1-line entries—if additional space is needed, use the rich text box. These fields may be used for password entry, see the example below. When the text box is inactive, the border is black at 20% opacity and the fill is white at 40% opacity. When active, the border is the accent/brand color at 100% opacity, and the fill is white at 100% opacity.

Labels may be placed either above or to the left side of the input field. When placed on the left side, ensure all the input fields line up along the left edge.

example

how to use it

<div class="card">
	<input type="text" placeholder="Simple text box">
	<br />
	<input type="text" disabled="" placeholder="Disabled text box">
</div>

auto-suggest box

Use an AutoSuggestBox to provide a list of suggestions for a user to select from as they type. You can use jQuery-ui Autocomplete to do so.

example

how to use it

<script>
	$(function () {
		var availableTags = ["ActionScript", "AppleScript", "Asp",
				"BASIC", "C", "C++", "Clojure",
				"COBOL", "ColdFusion", "Erlang",
				"Fortran", "Groovy", "Haskell", "Java",
				"JavaScript", "Lisp", "Perl", "PHP",
				"Python", "Ruby", "Scala", "Scheme"];
		$("#tags").autocomplete({
			source: availableTags
		});
	});
</script>
<input id="tags" class="ui-autocomplete-input" autocomplete="off">

checkbox

A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The control has three selection states: unselected, selected and disabled.

example

how to use it

<div class="card">
	<input type="checkbox" id="1"><label for="1">Checkbox unselected</label><br>
	<input type="checkbox" id="2" checked=""><label for="2">Checkbox selected</label><br>
	<input type="checkbox" id="3" disabled=""><label for="3">Checkbox disabled</label><br>
</div>

radio button

A radio button is used for two or more mutually exclusive options.

example

how to use it

<div class="card">
	<input type="radio" id="10"><label for="10">Checkbox unselected</label><br>
	<input type="radio" id="20" checked=""><label for="20">Checkbox selected</label><br>
</div>

buttons & links

Use primary buttons, set to either the user’s accent color or the app brand color, to indicate the default action when the user presses “Enter” when a dialog or window is open. Use secondary buttons for all other main actions. Use tertiary buttons for lesser actions.

Buttons may have 16x16 icons next to the text—remember that the group containing the icon and text should be centered.

You can use the class .btn for button or a.

example

how to use it

<div class="card">
	<a class="btn btn-primary">Button text</a>
	<a class="btn">Button text</a>
	<a class="btn btn-lesser">Button text</a>
	<a class="btn btn-danger">Button text</a>
</div>

example with icons

how to use it

<div class="card">
	<a class="btn btn-primary"><i class="fa fa-phone"></i> Button text</a>
	<a class="btn"><i class="fa fa-archive"></i> Button text</a>
	<a class="btn btn-lesser"><i class="fa fa-file"></i> Button text</a>
	<a class="btn btn-danger"><i class="fa fa-trash"></i> Button text</a>
</div>

example with action buttons

how to use it

<div class="btn-action">
	<a class="btn"><i class="fa fa-phone"></i> Button text</a>
	<a class="btn"><i class="fa fa-archive"></i> Button text</a>
	<a class="btn btn-primary"><i class="fa fa-file"></i> Button text</a>
</div>

action links

An action link may be used in place of a button where the action the user is performing takes place in another app or experience. Action links typically have a right pointing arrow on the left, followed by text—though that arrow icon may be replaced where appropriate. Action links are set to the user’s accent color or the app brand color.

example

Link that continues in another app

how to use it

<a href="#" class="btn btn-link">
	<i class="fa fa-angle-right"></i> Link that continues in another app
</a>

hyperlink

Hyperlinks can be used in the traditional sense—i.e. to link to a web experience, or to link to another page in an app. Hyperlinks may or may not be underlined, but must always be set to the user’s accent color or the app brand color.

This is a hyperlink.

how to use it

<a href="#">This is a hyperlink.</a>

project status

heartthrob

heartthrob-vision

heartthrob-docs

repos + links

• GitHub project (heartthrob)
• GitHub project (heartthrob-vision)
• GitHub project (heartthrob-docs)

buy me a beer

made by vítor norton | privacy policy