Boilerplate HTML


<!doctype html>
<html class="casper" lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title>Page title</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<!-- Place favicon.ico in the root directory -->
		<link rel="stylesheet" type="text/css" href="../styles/rubik.css" />
		<link rel="stylesheet" type="text/css" href="../styles/generics/tools.css">
	</head>
	<body>
		<!-- content -->
		<script src="js/polyfills.js"></script>
		<script src="js/jquery-2.1.0.min.js"></script>
		<script src="js/plugins.js"></script
		<script src="js/main.js"></script>
		<script src="js/helper.js"></script>
	</body>
</html>

Layouts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra ante enim, cursus fringilla metus hendrerit non.

Grid System

We are using a mobile first 12 column fluid responsive grid system that helps you to build solid multi-device layouts.

Grid system is used for creating page layout through a series of rows and columns that house your content.

.col-1 (content)

.col-1

Use class .row to create a horizontal group of columns.
Then nest as many containers <div class="col-[number]"> as columns are necessary to build the layout
Include the container <div class="col-child"> as immediate children of .col-[number].

.col-4

.col-8

.col-8

.col-4

.col-4

.col-4

.col-4

.col-3

.col-3

.col-3

.col-3


<div class="row">
	<div class="col-4"><div class="col-child">...</div></div>
	<div class="col-8"><div class="col-child">...</div></div>
</div>
<div class="row">
	<div class="col-8"><div class="col-child">...</div></div>
	<div class="col-4"><div class="col-child">...</div></div>
</div>
<div class="row">
	<div class="col-4"><div class="col-child">...</div></div>
	<div class="col-4"><div class="col-child">...</div></div>
	<div class="col-4"><div class="col-child">...</div></div>
</div>
<div class="row">
	<div class="col-3"><div class="col-child">...</div></div>
	<div class="col-3"><div class="col-child">...</div></div>
	<div class="col-3"><div class="col-child">...</div></div>
	<div class="col-3"><div class="col-child">...</div></div>
</div>

Nested row

.col-6 with nested row

.col-6


<div class="row">
	<div class="col-6">
		<div class="col-child">
			<div class="row">
				<div class="col-6"><div class="col-child">...</div></div>
				<div class="col-6"><div class="col-child">...</div></div>
			</div>
		</div>
	</div>
	<div class="col-6"><div class="col-child">...</div></div>
</div>

Medium devices

Therefore, applying at any column the class .col-6-medium content will adjust to 50% width or .col-12-medium 100% width defined for medium devices.

.col-8 .col-6-medium

.col-4 .col-6-medium

.col-8 .col-12-medium

.col-4 .col-12-medium


<div class="row">
	<div class="col-8 col-6-medium"><div class="col-child">...</div></div>
	<div class="col-4 col-6-medium"><div class="col-child">...</div></div>
</div>
<div class="row">
	<div class="col-8 col-12-medium"><div class="col-child">...</div></div>
	<div class="col-4 col-12-medium"><div class="col-child">...</div></div>
</div>

Equal height columns

Add class .row and .row-faux to build an equal height columns structure.

.col-1 (more content)

.col-1


<div class="row row-faux">
	<div class="col-4"><div class="col-child">...</div></div>
	<div class="col-4"><div class="col-child">...</div></div>
	<div class="col-4"><div class="col-child">...</div></div>
</div>

Expand gutter columns

Add class .row,.row-faux and .row-faux-card to expand the gutter between the columns.

.col-8

.col-4


<div class="row row-faux row-faux-card">
      <div class="col-8">
          <div class="col-child">.col-8</div>
      </div>
      <div class="col-4">
          <div class="col-child">.col-4</div>
      </div>
</div>

Remove gutter columns

Add class .row,.row-faux to build an equal height columns structure and .row-panel to remove the gutter between the columns.

.col-8

.col-4


<div class="row row-faux row-panel">
      <div class="col-8">
          <div class="col-child">.col-8</div>
      </div>
      <div class="col-4">
          <div class="col-child">.col-4</div>
      </div>
</div>

Containers

To wrap all page content in a responsive container use class .wrapper. Use class .container to create blocks of content and add class .container-expanded to create a top gap between blocks of content.


<div class="wrapper">
    <div class="container container-expanded">
        <!-- Container is centered on page. The inner is
         fluid between small and middle viewports,
         and fixed width for larger dimensions:
            * 970px < 769px
            * 768px < 481px
            * > 480px -->
    </div>
</div>

Banners's containers

Add class .wrapper-slotbanner and half-page-ad to the wrapper container, to specify that the page contain banners positions.

Wrap the container with .slotbanner to include the banner top position. Include .slotbanner-top inside it and add .container-slotbanner class to the container, to position the page to the left.

Create .slotbanner-aside to include a banner right position. Include .slotbanner-fixed to specify the side banner position as fixed.

In case of Brand Bay campaign add .slotbanner-top-brandday to .slotbanner-top.

View demo


<div class="wrapper wrapper-slotbanner half-page-ad">
	<div class="slotbanner">
		<div class="slotbanner-top">
			<!-- banner code -->
		</div>
		<div class="container container-slotbanner">
			<!-- page content -->
		</div>
	</div>
	<div class="slotbanner-aside">
		<div class="slotbanner-fixed">
			<!-- banner code -->
		</div>
	</div>
</div>

Inner containers

Use class .inner to create 20px's inner space.
Add class .inner-expanded to create 40px's inner on the top and bottom.


<div class="inner">
    ...
    <div class="inner">
        ...
    </div>
</div>
<div class="inner inner-expanded">
    ...
</div>

Examples Layouts

View demo

Text elements

Use the semantic tags to the text elements, these tags identify the purpose of that content.

Headings

Definition of differents levels of titles:

<h1> for level 1,
<h2> for level 2,
<h3> for level 3.

<h1> defines the most important heading. Only one <h1> per page or <section>.

Heading level 1

Heading level 2

Heading level 3


<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

Heading with addons

Use class .heading-addons to reset margin defined for generic <h1>.

Header Level 1

Lorem ipsum


<div class="heading-addons">
	<h1>Header Level 1</h1>
	<p>Lorem ipsum</p>
</div>

Heading only child

Use class .heading-single when the container includes a heading as an only child.

Header Level 1


<div class="heading-single panel-default inner">
	<h1>Header Level 1</h1>
</div>

Heading mega

Use class .heading-mega for a big size heading.

Heading mega


<h1 class="heading-mega">Heading mega</h1>

Heading middle

Use class .heading-middle to adjust headings in vertical align content.

Header Level 1


<div class="heading-addons">
	<h1 class="heading-middle">Header Level 1</h1>
</div>

Paragraphs

Use tag <p> for a basic paragraph. Don't use <span> or <div> as a text tag, it's not semantic.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Blockquotes

Use tag <blockquote> instead of <p> to introduce a block of text that is quoted from another source.
Use tag <cite> to cite the reference.

Use class .quote to give format to a blockquote.
Use class .vip-quote to emphasise a blockquote.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum


<blockquote class="quote">
	<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
	<cite>Lorem ipsum</cite>
</blockquote>
<blockquote class="vip-quote">
	<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
	<cite>Lorem ipsum</cite>
</blockquote>

Lists

Use the following tags to create semantic lists:

<ul> for unordered lists
<ol> for ordered lists
<dl> for definition lists

List default

Use class .list-default for a basic list without decoration.

Salario no disponible
Experiencia minima: no requerida
Tipo de oferta: de duracion determinada, jornada completa

Salario:: No disponible
Tipo de oferta:: De duracion determinada, jornada completa


<!-- Example for unordered and ordered list. -->
<ul class="list-default">
    <li>Salario no disponible</li>
    <li>Experiencia minima: no requerida</li>
    <li>Tipo de oferta: de duracion determinada, jornada completa</li>
</ul>
<!-- Example for definition list. -->
<dl class="list-default">
    <dt>Salario:</dt>
    <dd>No disponible</dd>
    <dt>Tipo de oferta:</dt>
    <dd>De duracion determinada, jornada completa</dd>
</dl>

List inline

Use class .list-inline to generate a list inline without gutter between list items.

Lorem ipsum 1/
Lorem ipsum 2/
Lorem ipsum 3


<ul class="list-inline">
    <li>Lorem ipsum 1/</li>
    <li>Lorem ipsum 2/</li>
    <li>Lorem ipsum 3</li>
</ul>

Numbered list

Use class .list-ordered to generate a numbered list.

Lorem ipsum
Lorem ipsum
Lorem ipsum


<ul class="list-ordered">
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>

Lists with bullets

Use class .list-default and .list-bullet-default to add default bullets to the list.

Lorem ipsum
Lorem ipsum
Lorem ipsum


<ul class="list-default list-bullet-default">
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>

Lists with icons

Use class .list-default and .list-bullet-icon to show icons outside the content flow.
Use class .iconfont-[name] for icon type.
Visit the icons list.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor


<ul class="list-default list-bullet-icon">
    <li class="iconfont-CV">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
    <li class="iconfont-Check">Lorem ipsum dolor</li>
</ul>

Tag group

Use class .tag-group to display list items in the same line with gutter between this items.


<ul class="tag-group">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum dolor</li>
</ul>

Tag divider

Use class .tag-divider to divide tag group items, showing them in the same line with a divider in between.


<ul class="tag-group">
    <li class="tag-divider">Lorem ipsum dolor</li>
    <li class>Lorem ipsum</li>
</ul>

Tag group top

Use class .tag-group-top to add a gap between this tag and the following.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<ul class="tag-group tag-group-top">
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Tag group with ellipsis

Use class .ellipsis in <span> to generate ellipsis in the text of an item of the tag group. Add also the .tag-ellipsis-col2 or .tag-ellipsis-col3 in <li> when the tag group contains two or three items.


<ul class="tag-group">
    <li class="tag-divider tag-ellipsis-cols2">
        <span class="ellipsis">Consectetur Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
    </li>
    <li>Lorem ipsum</li>
</ul>
<ul class="tag-group">
    <li class="tag-divider tag-ellipsis-cols3">
        <span class="ellipsis">Consectetur Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
    </li>
    <li class="tag-divider">Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>

Text Style

These classes affect how text appears on a page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<h2 class="base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p class="medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="large">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="xlarge">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Text variants

Use class .bold to bold the content. Use only on the following tags: <p>, <li>, <span>, dt or dd. Use class .light to to change from bold to light content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<p class="bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2>Lorem ipsum dolor sit amet, <span class="light">consectetur adipiscing elit</span>.</h2>

Text colors

Use class .script to force text color as the default text color
Use class .darkest-shiro or .soft-script` for the neutral colors
Use class .alternative to mark text that contains details information
Use class .disabled to mark a text option as disabled
Use class .marked to focus attention in it
Use class .highlight to highlight words as a result of a search
Use class .highlight to highlight words as a result of a search
Use class .focus to mark a text as neutral informative change or action
Use class .alert to mark a text as potentially negative action

Lorem ipsum dolor sit amet.


<p class="script">Lorem ipsum dolor sit amet.</p>
<p class="darkest-shiro">Lorem ipsum dolor sit amet.</p>
<p class="soft-script">Lorem ipsum dolor sit amet.</p>
<p class="alternative">Lorem ipsum dolor sit amet.</p>
<p class="disabled">Lorem ipsum dolor sit amet.</p>
<p class="marked">Lorem ipsum dolor sit amet.</p>
<p class="highlight">Lorem ipsum dolor sit amet.</p>
<p class="focus">Lorem ipsum dolor sit amet.</p>
<p class="alert">Lorem ipsum dolor sit amet.</p>

Text colors

Use class .script to force text color as the default text color
Use class .darkest-shiro or .soft-script` for the neutral colors
Use class .alternative to mark text that contains details information
Use class .disabled to mark a text option as disabled
Use class .marked to focus attention in it
Use class .highlight to highlight words as a result of a search
Use class .highlight to highlight words as a result of a search
Use class .focus to mark a text as neutral informative change or action
Use class .alert to mark a text as potentially negative action

Lorem ipsum dolor sit amet.


<p class="script">Lorem ipsum dolor sit amet.</p>
<p class="darkest-shiro">Lorem ipsum dolor sit amet.</p>
<p class="soft-script">Lorem ipsum dolor sit amet.</p>
<p class="alternative">Lorem ipsum dolor sit amet.</p>
<p class="disabled">Lorem ipsum dolor sit amet.</p>
<p class="marked">Lorem ipsum dolor sit amet.</p>
<p class="highlight">Lorem ipsum dolor sit amet.</p>
<p class="focus">Lorem ipsum dolor sit amet.</p>
<p class="alert">Lorem ipsum dolor sit amet.</p>

Contrasted text color

Use class .contrast to define a text over dark background color

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Curabitur varius


<div class="inner panel-info">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<a href="#" class="contrast">Curabitur varius</a>
</div>

Contrasted text color

Use class .contrast to define a text over dark background color

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Curabitur varius


<div class="inner panel-info">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<a href="#" class="contrast">Curabitur varius</a>
</div>

Form elements

This section contains all the elements that we can use to build a form.

Select

The <select> element is used to create a drop-down list.
The <option> tags inside the <select> element define the available options in the list.
This element needs pulldown-chosen.css,chosen.jquery.js and the script as code example.


<div class="form-select">
  <select data-placeholder="Cualquier provincia" class="chosen-select" tabindex="-1">
    <option selected="selected" value="0">Option 1</option>
    <option value="1">Option 2</option>
  </select>
</div>
<script>
	$(document).ready(function() {
		$('.chosen-select').chosen({width:"100%",disable_search:true});
	});
</script>

Multiple select

Multiple pulldown


<label for="multiple-pulldown">Multiple pulldown</label>
<select id="multiple-pulldown" multiple="true" class="chosen-select" data-placeholder="(Seleccionar)">
	<option value="01">Option01</option>
	<option value="02">Option02</option>
	<option value="03">Option03</option>
	<option value="04">Option04</option>
	<option value="05">Option05</option>
</select>

Examples Forms

View demo

Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra ante enim, cursus fringilla metus hendrerit non.

Buttons type

Use class .btn to create a button using <a> (outside forms) or <button> (only inside forms).
Also add one of the following classes to give it format:

.btn-default for a default action style
.btn-primary for a primary action style

Link


<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<a href="#" class="btn btn-primary">Link</a>

Buttons size

Use class .btn-medium or .btn-large to change buttons size.

Default Button Medium Button Large Button


<a href="#" class="btn btn-default">Default Button</a>
<a href="#" class="btn btn-default btn-medium">Medium Button</a>
<a href="#" class="btn btn-default btn-large">Large Button</a>

Buttons with text and icon

Use class .iconfont-[name] to display an icon inside the button.

Link Button


<a href="#" class="btn btn-primary btn-medium iconfont-Facebook">Link Button</a>

Buttons status

Use class .btn-disabled to show button as disabled.

Disabled Button


<a href="#" class="btn btn-default btn-medium btn-disabled">Disabled Button</a>

Button annex

Use class .btn-annex to add an element adjacent to the button.

Link


<button class="btn btn-primary btn-medium btn-annex" type="button">Button</button>
<a href="#" class="link">Link</a>

Buttons display

Use class .btn-form-inline to display a full width button.


<button class="btn btn-primary btn-medium btn-form-inline" type="button">Button</button>

Icons

Icons are generated as fonts.
Use the following classes to apply an icon on a tag.
You can force the icon size when there isn't text with icon.

Icons list

iconfont-ArrowDown
iconfont-ArrowLeft
iconfont-ArrowUp
iconfont-Arrow
iconfont-BurguerMenu
iconfont-Calendar
iconfont-Candidaturas
iconfont-Category
iconfont-Check
iconfont-Clock
iconfont-Close
iconfont-Company
iconfont-Config
iconfont-CV
iconfont-Euro
iconfont-Facebook
iconfont-GooglePlus
iconfont-Location
iconfont-Mail
iconfont-Reload
iconfont-Search
iconfont-State
iconfont-Suitecase
iconfont-Twitter
iconfont-User
iconfont-LinkedIn
iconfont-Viewdetails
iconfont-EditCv
iconfont-Home
iconfont-QR
iconfont-Config-alt
iconfont-Edit
iconfont-Help
iconfont-Info
iconfont-Plus
iconfont-Smile
iconfont-Wifi
iconfont-Alert
iconfont-Connect
iconfont-AlertProfile
iconfont-Hide
iconfont-News
iconfont-Flag
iconfont-Offers
iconfont-Big-check
iconfont-BigArrowDown
iconfont-BigArrowLeft
iconfont-BigArrowUp
iconfont-BigArrowRight
iconfont-BigArrowObliqueLeftDown
iconfont-BigArrowObliqueRightDown
iconfont-BigArrowObliqueLeftUp
iconfont-BigArrowObliqueRightUp
iconfont-Star
iconfont-Lock
iconfont-Menumore
iconfont-Alert-circle
iconfont-Save
iconfont-SaveAs
iconfont-OneTime
iconfont-Applications
iconfont-Attach
iconfont-Phone
iconfont-Website

Icons size

Use the following classes to specify the icon size when it appears without text: .iconfont-16px, .iconfont-18px, .iconfont-22px, .iconfont-30px or .iconfont-36px.


	<a href="#" class="iconfont-Company iconfont-16px"><span class="hide">Icon name</span></a>
	<a href="#" class="iconfont-Company iconfont-18px"><span class="hide">Icon name</span></a>
	<a href="#" class="iconfont-Company iconfont-22px"><span class="hide">Icon name</span></a>
	<a href="#" class="iconfont-Company iconfont-30px"><span class="hide">Icon name</span></a>
	<a href="#" class="iconfont-Company iconfont-36px"><span class="hide">Icon name</span></a>