Supported devices

This template supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. You can find all the code in "css/media-queries.css"

Here's what's included by default :

Label Layout width Characteristics
Default 980px and up Standard display.
Portrait tablets 768px and above Logo and main menu centered.
Phones and little tablets 767px and below User modules inline

In Template manager, you can change easily others settings (section "General --> Responsive").



/* Portrait tablet to landscape and desktop */
@media(min-width:768px)and(max-width:979px){...}
/* Phone and little tablet */
@media(max-width:767px){...}

Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).

Class Phones 767px and below Tablets 979px to 768px Desktops Default
visible-phone Visible
visible-tablet Visible
visible-desktop Visible
hidden-phone Visible Visible
hidden-tablet Visible Visible
hidden-desktop Visible Visible

When to use

Use for each Joomla module and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

How to use

You must add the class in Module class suffix of your module.

Responsive utilities test case

Resize your browser or load on different devices to test the above classes.

Visible on...

Green checkmarks indicate that class is visible in your current viewport.

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Hidden on...

Here, green checkmarks indicate that class is hidden in your current viewport.

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Headings

All HTML headings, <h1> through <h5> are available.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

Lead paragraph

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

Bold

For emphasizing a snippet of text with important

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with stress

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Drop Cap

To enlarge the first letter of a paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<span class="dropcap" >L</span>orem ipsum dolor sit amet, ...

Inset left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. your text on the left sideUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

... aliquam erat volutpat. <span class="inset-left" >your text on the left side</span> Ut wisi enim ad minim veniam, ...

Inset right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. your text on the right sideUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

... aliquam erat volutpat. <span class="inset-right" >your text on the right side</span> Ut wisi enim ad minim veniam, ...

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard blockquote.

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alternate displays

Use .pull-right for a floated, right-aligned blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>

Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.</a>
</address>

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to the inside links with a darken color.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.



<p class="text-muted">...</p>
<p class="text-black">...</p>
<p class="text-white">...</p>
<p class="text-blue">...</p>
<p class="text-green">...</p>
<p class="text-turquoise">...</p>
<p class="text-orange">...</p>
<p class="text-red">...</p>
<p class="text-violet">...</p>

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.



<p class="color-black">...</p>
<p class="color-lightgrey">...</p>
<p class="color-grey">...</p>
<p class="color-brown">...</p>
<p class="color-blue">...</p>
<p class="color-green">...</p>
<p class="color-turquoise">...</p>
<p class="color-orange">...</p>
<p class="color-red">...</p>
<p class="color-violet">...</p>


148 background colors available :

maroon
brown
rosybrown
sienna
saddlebrown
chocolate
sandybrown
peru
bisque
burlywood
tan
navajowhite
blanchedalmond
wheat
darkgoldenrod
goldenrod
cornsilk
whitesmoke
white
snow
mistyrose
seashell
linen
antiquewhite
oldlace
floralwhite
beige
ivory
honeydew
mintcream
azure
aliceblue
ghostwhite
lavenderblush
lightgray
slategrey
lightslategrey
grey
dimgrey
darkslategrey
darkgrey
black
silver
lightgrey
gainsboro
tomato
orangered
coral
lightsalmon
darkorange
orange
mediumvioletred
deeppink
hotpink
palevioletred
pink
lightpink
rebeccapurple
magenta
lavender
darkslateblue
slateblue
mediumslateblue
mediumpurple
blueviolet
indigo
darkorchid
darkviolet
mediumorchid
purple
darkmagenta
fuchsia
violet
plum
thistle
orchid
deepskyblue
blue
cyan
aquamarine
turquoise
mediumturquoise
aqua
paleturquoise
lightcyan
darkturquoise
cadetblue
powderblue
lightblue
skyblue
lightskyblue
steelblue
dodgerblue
lightsteelblue
cornflowerblue
royalblue
midnightblue
navy
darkblue
mediumblue
mediumslateblue
darkred
firebrick
red
indianred
lightcoral
salmon
darksalmon
lightsalmon
crimson
darkcyan
olive
olivedrab
yellowgreen
darkolivegreen
greenyellow
chartreuse
lawngreen
darkgreen
green
forestgreen
lime
limegreen
lightgreen
palegreen
darkseagreen
seagreen
mediumseagreen
springgreen
mediumspringgreen
mediumaquamarine
lightseagreen
teal
darkcyan
cyan
lightcyan
peachpuff
papayawhip
moccasin
goldenrod
gold
khaki
lemonchiffon
palegoldenrod
darkkhaki
yellow
lightgoldenrodyellow
lightyellow

Alternate displays

Use .bg-shadow-light or .bg-shadow-dark to enlight the paragraph or a DIV.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.



<p class="color-bisque bg-shadow-light">...</p>

<p class="color-bisque bg-shadow-dark">...</p>

Use .radius4, .radius6, .radius8 or .radius10 to add a border radius.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.



<p class="color-orange">...</p>

<p class="color-orange radius-4">...</p>

<p class="color-orange radius-8">...</p>

<p class="color-orange radius-8 bg-shadow-dark">...</p>


Image

By default, a border is added around all your images in your articles. You can disable this option in the section "General" of Template manager.

If you want add this border only on specific images, disable this option and add the class .js-border in the HTML code of your image.

If you want remove this border only on specific images, enable this option and add the class .no-style in the HTML code of your image.

<img class="js-border" src="/jv3/..." />

<img class="no-style" src="/jv3/..." />

Display easily your social icons in the template manager :

Choose among the 14 social icons ones you want to view.
Just write their absolute url (with "http://") in the template manager ... no modules to install.


If you want display another social icon, it's very easy. Upload the icon in the folder "images/social-icons" of the template. Then, select your image in the custom field of Template manager.

The package include the template, a video and a google map module (compatible with Joomla 2.5 and Joomla 3.X).
On my website, you can download and use for free a responsive slideshow and themes for Hikashop, Kunena and JComments.

All features

  • Width fixed or fluid
  • HTML5 & CSS3
  • Clean pure CSS Design
  • Fully compatible Firefox 3+, IE9+, Chrome and mobile devices
  • Lightweight and fast-loading
  • Responsive design (change the size of your browser to see the difference). You can disable this option.
  • Build with Bootstrap 3
  • Include Font Awesome 4
  • CSS3 animations
  • 1, 2 or 3 columns layout
  • Dropdown menu
  • 23 module positions
  • Set the color of text, main menu, active link, article title H1 and H2, module titles
  • 600+ Google fonts available for all these items
  • Display or not your social links
  • Put the tracking code of Google analytics in Template manager.
  • Display or not the Scroll to top button
  • Typography (list, header module, quotation, …)
  • Include a manual to explain the module positions and typography.

For the demo of Hikashop and Kunena, I use some photos with the licence Creative commons zero from Akairom (Flickr).

The background images come from Unsplash

Thank you !