Piksell HTML5 Template

Theme info

Features

Elements

Theme Typography

Typography includes many elements like:

Paragraph
Heading
Blockquotes
Header Options
Higlights
Tooltips
Margins
Content Icons
Dropcap
Text Styles
Dividers

Paragraph

Paragraph has 5 different options

.lead see example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus.

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus.</p>

em see example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus.

<p>
 <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus.</em>
</p>

strong see example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus.

<p>
 <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus.</strong>
</p>

default paragraph see example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus.</p>

small see example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus.

<p>
 <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus.</small>
</p>

Blockquotes

Piksell has many different blockquotes

Default:

Blockquote default

"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition."
John Doe

<blockquote>
  <h5>Blockquote default</h5>
  <p>"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition."</p>
  <cite>John Doe</cite>
</blockquote>

Blockquote Left with hover Example:

Blockquote example 1

"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking."
John Doe

<blockquote class="border-left-hover">
  <h5>Blockquote example 1</h5>
  <p>"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking."</p>
  <cite>John Doe</cite>
</blockquote>

Blockquote Right with hover Example:

Blockquote example 2

"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking."
John Doe

<blockquote class="border-right-hover">
  <h5>Blockquote example 1</h5>
  <p>"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking."</p>
  <cite>John Doe</cite>
</blockquote>

Blockquote border left color:

"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition."
John Doe

<blockquote class="border-left">
  <p class="lead">"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition."</p>
  <cite>John Doe</cite>
</blockquote>

Blockquote border right color:

"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition."
John Doe

<blockquote class="border-right text-right">
  <p class="lead">"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition."</p>
  <cite>John Doe</cite>
</blockquote>

Blockquote background grey:

"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition."
John Doe

<blockquote class="quote-bg-grey border-left">
  <p>"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition."</p>
  <cite>John Doe</cite>
</blockquote>

Blockquote background dark:

"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition."
John Doe

<blockquote class="quote-bg-dark no-border text-center">
  <p>"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition."</p>
  <cite>John Doe</cite>
</blockquote>

Blockquote background color:

"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition."
John Doe

<blockquote class="quote-bg-color no-border text-right">
  <p>"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition."</p>
  <cite>John Doe</cite>
</blockquote>

Header Options

Piksell has three different header options

.heading-v1 see example:

Heading Version 1

<h5 class="heading heading-v1"><span>Heading Version 1</span></h5>

.heading-v2 see example:

Heading Version 2

<h5 class="heading heading-v2"><span>Heading Version 2</span></h5>

.heading-v3 see example:

Heading Version 3

<h5 class="heading heading-v3"><span>Heading Version 3</span></h5>

Higlights

Piksell has different color highlights. To use them add class .text-higlights

You can choose any of the colors

.text-higlights-pink for pink highlights
.text-higlights-red for red highlights
.text-higlights-purple for purple highlights
.text-higlights-orange for orange highlights
.text-higlights-blue for blue highlights
.text-higlights-grey for grey highlights
.text-higlights-dark for dark highlights
.text-higlights-light-grey for light grey highlights

Example:

Passages of Lorem Ipsum on the other hand we denounce with righteous but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.

<p>Passages of Lorem Ipsum <span class="text-higlights text-higlights-red">on the other hand</span></p>

Higlights rounded

Piksell has 3 class for highlights rounded

.rounded
.rounded-x2
.rounded-x3

Example:

Passages of Lorem Ipsum on the other hand we denounce with righteous but the majority

<p>Passages of Lorem Ipsum <span class="text-higlights rounded">on the other hand</span> we denounce with <span class="text-higlights text-higlights-pink rounded-x2">righteous</span> but the <span class="text-higlights text-higlights-red rounded-x3">majority</span></p>

Content Icons

Content icons classes:

.default
.pink
.red
.purple
.orange
.blue
.dark
.grey

Neque porro, qui dolorem ipsum dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

<p>Neque porro,  <i class="fa fa-thumbs-up blue"></i> qui dolorem  ipsum dolor</p>

For Content icons with background you must add class .icons for color see class below:

.icons-default
.icons-pink
.icons-red
.icons-purple
.icons-orange
.icons-blue
.icons-dark
.icons-grey

Neque porro, and qui dolorem and ipsum dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem modi tempora and incidunt ut labore and et dolore magnam aliquam quaerat voluptatem.

<p>Neque <i class="fa fa-thumbs-up icons icons-default circle"></i> porro, and  qui <i class="fa fa-thumbs-up icons icons-red rounded-x2"></i> dolorem and  ipsum dolor sit amet, consectetur, adipisci velit, <i class="fa fa-thumbs-up icons icons-pink rounded"></i> sed quia non <i class="fa fa-thumbs-up icons icons-purple rounded-x3"></i> numquam eius modi <i class="fa fa-thumbs-up icons icons-orange rounded-x4"></i> tempora incidunt ut labore et <i class="fa fa-thumbs-up icons icons-blue circle"></i> dolore magnam aliquam quaerat <i class="fa fa-thumbs-up icons icons-dark rounded"></i> voluptatem modi tempora <i class="fa fa-thumbs-up icons icons-grey rounded-x2"></i>  and  incidunt ut labore  and  <i class="fa fa-thumbs-up icons icons-light-grey rounded-x3"></i> et dolore magnam aliquam quaerat voluptatem.</p>

Dropcap

Piksell has two variant of dropcap with color and background color.

Example with color:

.dropcap .piksell-color

D lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

<p><span class="dropcap piksell-color">D</span></p>

Example with background color:

.dropcap-bg

<p><span class="dropcap-bg">D</span></p>

You can use rounded and circle classes

.rounded
.rounded-x2
.rounded-x3
.rounded-x4
.circle

Example with circle

.dropcap-bg circle

<p><span class="dropcap-bg circle">D</span></p>