layout

Check a the elements that you can use while importing heartthrob to your project.

shadows

Some elements, like .card, will already add a shadow to it, buf if you want you can use one of this in any element you want.

.no-shadow

Recommended to use inside cards.

.shadow-middle

Recommended for general purpose.

.shadow

Recommended for tooltips, hover cards, menus.

.shadow-max

Recommended for panels or pop up dialgos.

materials

solid

No class neeeded.

.acrylic

Add transparency and blur effect in some browsers.

cards

Use cards to put any content inside, use it for dashboards, for forms and for tables.

example

Your content here


Bacon ipsum dolor amet pork chop burgdoggen boudin, spare ribs tenderloin tongue porchetta ribeye brisket doner jowl picanha andouille. Pork loin jowl kielbasa boudin sausage, cupim drumstick landjaeger t-bone corned beef short ribs pork chop prosciutto. Ham tail bacon jerky shank alcatra, fatback turkey shankle beef corned beef. Venison pancetta short ribs t-bone pig andouille, flank jerky beef ribs sirloin drumstick.

Another content with actions

how to use it


<div class="row">
	<div class="col-md-7">
		<div class="card">
			<h4>Your content here</h4>
			<hr />
			<p> Your text here </p>
		</div>
	</div>
	<div class="col-md-5">
		<div class="card">
			<h4>Another content with actions</h4>
			<div class="taskbar right">
				<a href="#" class="btn"><i class="fa fa-arrow-left"></i> Cancel</a>
				<a href="#" class="btn btn-primary"><i class="fa fa-save"></i> Save</a>
			</div>
		</div>
	</div>
</div>

example: with acrylic

Your content here


Bacon ipsum dolor amet pork chop burgdoggen boudin, spare ribs tenderloin tongue porchetta ribeye brisket doner jowl picanha andouille. Pork loin jowl kielbasa boudin sausage, cupim drumstick landjaeger t-bone corned beef short ribs pork chop prosciutto. Ham tail bacon jerky shank alcatra, fatback turkey shankle beef corned beef. Venison pancetta short ribs t-bone pig andouille, flank jerky beef ribs sirloin drumstick.

Another content with actions

how to use it


<div class="row">
	<div class="col-md-8">
		<div class="card acrylic">
			<h4>Your content here</h4>
			<hr />
			<p> Your text here </p>
		</div>
	</div>
	<div class="col-md-4">
		<div class="card acrylic">
			<h4>Another content with actions</h4>
			<div class="taskbar right">
				<a href="#" class="btn btn-primary"><i class="fa fa-save"></i> Save</a>
			</div>
		</div>
	</div>
</div>

taskbar

Use taskbars to put every action of a form or that can be done with the data showed in the card context. To create a taskbar put every element inside a .taskbar, this should be used as the last element of a card to make it looks great.

Once inside a taskbar, you can use the classes .left and .right to position your elements as you want to. Don't forget to create a .clear element after.

Note: If every element of you taskbar is right positioned you can use the .right in the same element as you .taskbar, so you will not need to create another element for .right and .clear.

example

A card with a taskbar


how to use it


<div class="card acrylic">
	<h4>A card with a taskbar</h4>
	<hr />
	<label for="example-taskbar">Example label</label>
	<input name="example-taskbar" type="text" placeholder="Vitor Norton" />
	<div class="taskbar">
		<div class="left">
			<a href="#" class="btn btn-link"><i class="fa fa-angle-left"></i> Back</a>
		</div>
		<div class="right">
			<a href="#" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</a>
			<a href="#" class="btn btn-primary"><i class="fa fa-save"></i> Save</a>
		</div>
		<div class="clear"></div>
	</div>
</div>

steps

Use steps to make complex forms more frindly and more intuitive. To create a step, you will need to put every card inside a .cards-steps. You can use the .opened to make a card open since every other will be closed.

Every step will need a id, we recommend to put it like #part1, #part2, #part*.

example

Your content here


Ground round capicola sausage ribeye doner. Strip steak pig ball tip meatloaf ground round salami, chicken drumstick. Venison swine prosciutto andouille burgdoggen.

Your content here


Ground round capicola sausage ribeye doner. Strip steak pig ball tip meatloaf ground round salami, chicken drumstick. Venison swine prosciutto andouille burgdoggen.

Your content here


Ground round capicola sausage ribeye doner. Strip steak pig ball tip meatloaf ground round salami, chicken drumstick. Venison swine prosciutto andouille burgdoggen.

This is every event related to steps:

function effect example
goToStep(to, from) It will close the step passed and open the a one. goToStep('#part1', '#part2')
setWarning(item) It will put a yellow border to show that this step is not completed or still needs atention. setWarning('#part1')
setDone(item) It will put a green border to show that this step is completed. setDone('#part1')

how to use it


<div class="cards-steps">
	<div class="card opened acrylic" id="part1">
		<h4>Your content here</h4>
		<hr />
		<p>Some text here</p>
		<div class="taskbar right">
			<a onclick="setDone('part1'); goToStep('part2', 'part1'); " class="btn btn-primary">Next step</a>
		</div>
	</div>

	<div class="card acrylic" id="part2">
		<h4>Your content here</h4>
		<hr />
		<p>Some text here</p>
		<div class="taskbar right">
			<a onclick="setWarning('part2'); goToStep('part1', 'part2')" class="btn btn">Back</a>
			<a onclick="goToStep('part3', 'part2')" class="btn btn-primary">Next step</a>
		</div>
	</div>

	<div class="card acrylic" id="part3">
		<h4>Your content here</h4>
		<hr />
		<p>Some text here</p>
		<div class="taskbar right">
			<a onclick="goToStep('part2', 'part3')" class="btn btn">Back</a>
		</div>
	</div>
</div>

cards with actions

Use cards with action to hide some content and still make it available to every user. To use it, you will need to create a parent element with .cards-actions. You can use the class .opened to make a card opened.

Developer note: This function of heartthrob isn't great for accessibility, we truly want to improve it.

example

Your content here


Ground round capicola sausage ribeye doner. Strip steak pig ball tip meatloaf ground round salami, chicken drumstick. Venison swine prosciutto andouille burgdoggen.

Your content here


Ground round capicola sausage ribeye doner. Strip steak pig ball tip meatloaf ground round salami, chicken drumstick. Venison swine prosciutto andouille burgdoggen.

Your content here


Ground round capicola sausage ribeye doner. Strip steak pig ball tip meatloaf ground round salami, chicken drumstick. Venison swine prosciutto andouille burgdoggen.

how to use it


<div class="cards-actions">
	<div class="card acrylic">
		<h4>Your content here</h4>
		<hr />
		<p>Some text here</p>
	</div>

	<div class="card acrylic opened">
		<h4>Your content here</h4>
		<hr />
		<p>Some text here</p>
	</div>

	<div class="card acrylic">
		<h4>Your content here</h4>
		<hr />
		<p>Some text here</p>
	</div>
</div>


[UPDATE 05/15/2019] After version 1.1.21 you will not need the class .link in every card inside .cards-actions. It should works just fine if you mantain this, but we recommend to remove those classes.

menus

Use menus to create new functions for you button. To do so, you will need to insert a onclick event for the function openMenu(event, menu). This will show what menu you want to display. Check the examples below. Once you click outside the menu it will close itself.

To make a menu open on the right, just add the .right class to your ul.

You can use <li class="line"></li> to create a line in your menu.

You will need to add a .more in any a that has sub-menus inside. This will add a arrow to the menu.

If you don't want to use icons in one item of the menu, you can add .no-icon to your a, this will maintain the margin for your menu item.

example

how to use it


<a class="btn btn-primary" onclick="openMenu(event, this);">Open menu</a>
<ul class="menu" id="demo-1" style="margin-left:20px;">
	<li><a href="#"><i class="fa fa-share"></i>Share</a></li>
	<li><a href="#"><i class="fa fa-user"></i>Edit profile</a></li>
	<li>
		<a href="#" class="more"><i class="fa fa-gear"></i>More options...</a>
		<ul>
			<li><a href="#"><i class="fa fa-share"></i>Share</a></li>
			<li>
				<a href="#" class="more"><i class="fa fa-user"></i>Edit profile</a>
				<ul>
					<li><a href="#" class="no-icon">Change password</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="line"></li>
	<li><a href="#" class="no-icon">Sign out</a></li>
</ul>

header

The header is, maybe, the must powerful feature of heartthrob. Here are some of it's functions:

  • Project logo: Add your logo to the header by using it inside a .logo class in a div element.
  • Separator: To create a separator inside your header you can use the class .line inside a div element.
  • Navigation components: Just use a ul li a scructure to create a navigation inside header. To make one item active just use the .active class.
  • Search box: The search box should always be positioned on the right side of the header, all you need to do is to create it as a li element with a class .search. See the example below and how to use it to create this incredible search box.
  • Notification box: The header has a notification icon to open any notification box that is available in your solution. It can show how many notifications there is, try it with the buttons below.
  • Menus: Header has a few menus for configurations, feedbacks and account management. It is in the position that we are all used to.
  • User icon + name: If the user has an image, here we will show his avatar, but if it don't, we will show his first letter of his name and the first letter of his last name. Automatically.

Developer note: Header still isn't ready for responsive design or mobile. This feature will be added soon, stay tuned.

example

Add notification Add 5 notification Clear notification

This is every function used in header:

function effect example
clearNotification() It will clear any notification, and put the counter to zero. clearNotification()
addNotificationNum(number); It will add as many notification to the icon as the number passed to the method. addNotificationNum(5);
addNotification(); It will add one notification to the counter for notifications. addNotification();

how to use it


<header class="acrylic">
	<div class="logo">
		<img alt="Logo" src="/img/blue100.png">
	</div>
	<div class="line"></div>
	<ul>
		<li><a href="#" class="active"><i class="fa fa-home"></i>Dashboard</a></li>
		<li><a href="#"><i class="fa fa-line-chart"></i>Page</a></li>
		<li><a href="#">Another page</a></li>
	</ul>

	<div class="right">
		<ul>
			<li class="search">
				<a><i class="fa fa-search"></i></a>
				<input type="text" name="search" placeholder="Type here to search">
			</li>
			<li>
				<a id="notifications"><i class="fa fa-inbox"></i></a>
			</li>
			<li>
				<a onclick="openMenu(event, this);"><i class="fa fa-cogs"></i></a>
				<ul class="menu dark right">
					<li><a href="#"><i class="fa fa-share"></i>Share</a></li>
					<li><a href="#"><i class="fa fa-user"></i>Edit profile</a></li>
					<li>
						<a href="#" class="more"><i class="fa fa-cogs"></i>More options...</a>
						<ul>
							<li><a href="#"><i class="fa fa-share"></i>Share</a></li>
							<li><a href="#"><i class="fa fa-user"></i>Edit profile</a></li>
						</ul>
					</li>
					<li class="line"></li>
					<li><a href="#" class="no-icon">Sign out</a></li>
				</ul>
			</li>
			<li>
				<a onclick="openMenu(event, this);">
					<div class="user-img"></div> Vítor Norton
				</a>
				<ul class="menu dark right">
					<li><a href="#"><i class="fa fa-share"></i>Share</a></li>
					<li><a href="#"><i class="fa fa-user"></i>Edit profile</a></li>
					<li>
						<a href="#" class="more"><i class="fa fa-cogs"></i>More options...</a>
						<ul>
							<li><a href="#"><i class="fa fa-share"></i>Share</a></li>
							<li><a href="#"><i class="fa fa-user"></i>Edit profile</a></li>
						</ul>
					</li>
					<li class="line"></li>
					<li><a href="#" class="no-icon">Sign out</a></li>
				</ul>
			</li>
		</ul>
	</div>
	<div class="clean"></div>
</header>

dialogs

Dialog controls are modal UI overlays that provide contextual app information. They block interactions with the app window until being explicitly dismissed. They often request some kind of action from the user.

Click in the "Call dialog" button below to see how it works.

A default text will replace the cancel action. If no text is set for the confirm it will show only the cancel button and no action will be trigged.

example

Delete file permanently?

If you delete this file, you won’t be able to recover it. Do you want to delete it?

Cancel Yes

how to use it


	<script>
		var dialogToShow = {
			title: "Delete file permanently?",
			description: "If you delete this file, you won’t be able to recover it. Do you want to delete it?",
			cancel: "No",
			confirm: "Yes",
			action: "alert('you clicked yes');"
		};
	</script>
	<button class="btn" onclick="dialog(dialogToShow);">Call dialog</button>

navigation

You can create a great navigation experience by using the class .nav and a simple ul li a itens. If you want to improve you should know that:

  • By adding a div with the class .nav-action on top of your list, you will have a nice experience of collapsing or expanding your navigation. It will remember the position as it is saved with a cookie.
  • You can separate itens to show on top or on bottom of you navigation by adding the class .nav-top-menus or .nav-bottom-menus to your ul.
  • By default your navigation will be dark, if you want the light version you can add .light next to the .nav.
  • You can also have a small size navigation, by adding .middle next to the .nav.
  • Add a class .child to the a element to make the child list inside this item to work or close. The best practice is to not put a link to the a that has the .child.
  • It will automatically active and expand to the item that is currenly opened (it looks the URLs).

examples: dark, white, middle

how to use it


<nav class="nav">
	<div class="nav-action">
		<a><i class="fa fa-bars"></i></a>
	</div>
	<ul class="nav-top-menus">
		<li><a><i class="fas fa-chart-line"></i> Dashboard</a></li>
		<li>
			<a class="child"><i class="far fa-address-book"></i> First Menu </a>
			<ul>
				<li><a href="#"><i class="fa fa-list-ul"></i> Option 1</a></li>
			</ul>
		</li>
		<li>
			<a class="child"><i class="fas fa-file-invoice-dollar"></i> First Menu </a>
			<ul>
				<li><a href="#"><i class="fa fa-list-ul"></i> Option 1</a></li>
				<li><a class="active" href="#"><i class="fa fa-list-ul"></i> Option 2</a></li>
				<li><a href="#"><i class="fa fa-list-ul"></i> Option 3</a></li>
			</ul>
		</li>
	</ul>
	<ul class="nav-bottom-menus">
		<li>
			<a class="child"><i class="fas fa-cogs"></i> Administrativo </a>
			<ul>
				<li><a href="#"><i class="fa fa-users"></i> Gerência de usuários</a></li>
			</ul>
		</li>
	</ul>
</nav>

project status

heartthrob

npm version

heartthrob-vision

npm version

heartthrob-docs

repos + links

buy me a beer

made by vítor norton | privacy policy