Ut dignissim aliquet nibh tristique hendrerit. Donec ullamcorper nulla quis metus vulputate id placerat augue eleifend. Aenean venenatis consectetur orci, sit amet ultricies magna sagittis vel. Nulla non diam nisi, ut ultrices massa. Pellentesque sed nisl metus. Praesent a mi vel ante molestie venenatis.

Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Mauris justo metus, ultrices id lobortis et, euismod sit amet metus. Maecenas sed nisl a arcu ultricies consectetur. Integer ut mollis elit. Nulla ultrices scelerisque mauris id commodo. Integer congue lectus et justo pellentesque sed semper lacus facilisis. Nunc tristique placerat odio eget rutrum.

Joomla! offers three different types of messages. Creatings standard information about Joomla! system is presented depending on a message type as follows:

Error

• This is a sample message

Error

• This is a sample of notice message

Error

• This is a sample of error message

On this page you can see basic suffixes used in this template.

The useful feature is built-in in the module titles: if you want to create bolded text in the module title please wrap the text with "__" i.e. This is a __strong__ example. Additionally if you want to create a second, smaller line in the title please use the "**" chars i.e. This is a first line**and it is a second line**.

For the modules used on the bottom1-4 module positions we recommened too suffixes: bigspaces, mediumspaces and smallspaces which will create an additional spaces in the modules.

The clear suffix is very useful to create banners or images without additional borders, margins and paddings. The clear suffix is also very useful inside the mainbody, mainbody_top and mainbody_bottom module positions.

The News Show Pro module has additional suffix: nspanimated - this suffix creates a NSP module with initial animation.

There are also two additional suffixes, which are used automatically by the template: nomargin - removes the top margin from the module box and nooverflow - it removes the overflow:hidden from the module box elements.

It is possible with templates which have a typography page to show you how you can use e.g. headline tags in order to structure your content in a better way. Below, we present rebuilt and refreshed typographical aspects of Gavern Framework. In order to use it, you have to use a plug in which is delivered in a package with a template or use HTML code.

Tooltips

Here are some examples of a ClassicThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! , CriticalCriticalThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! , HelpHelpThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! , InformationInformationThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! and WarningWarningThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! CSS powered tooltip.
This is just an example of what you can do so feel free to get creative and produce your own!

#wrapper {
  position: relative;
  float: left;
  display: block;
}

Special template typography elements

Social icons

<a class="gkFb" href="#">Facebook</a> 
<a class="gkTwitter" href="#">Twitter</a> 
<a class="gkGplus" href="#">Google+</a> 
<a class="gkPinterest" href="#">Pinterest</a>

Headers

The template contains few additional header elements:

• .gkBigHeader - it creates a big header used on the demo frontpage:

  Everything you need to create a website

  <h2 class="gkBigHeader">Everything you need to create a website</h2>

• .gkSmallHeader - it is combined with the .gkTimeIcon element on the demo frontpage:

  Create a website quickly & easily

  Quisque justo lorem, condimentum condimentum ornare vel, consectetur id justo? Phasellus leo lacus, rhoncus dictum auctor.

  <h3 class="gkSmallHeader">Create a website quickly & easily</h3>
  
  <p class="gkTimeIcon">Quisque justo lorem, condimentum condimentum ornare vel, consectetur id justo? Phasellus leo lacus, rhoncus dictum auctor.</p>	
  

Columns layout

If you need to create a few columns of text as in the contact section of this demo at frontpage, please use the following structure:

<div class="vertical-column-WIDTH">
<h3>HEADER</h3>
<p>CONTENT</p>
</div>

Where WIDTH is a value: 10, 20, 30, 40, 50 or 60 and means a column of 10%, 20%, 30%... etc. width.

Other important elements

The below elements are defined in the css/gk.stuff.css file.

Features section

To create the features section, please use the following structure:

<div class="gkFeatures gkPerspective">
<a href="#" class="gkRocket"><span>Rocket</span>Innovative Design</a>
<a href="#" class="gkBadge"><span>Badge</span>Award-winning Agency</a>
<a href="#" class="gkMouse"><span>Mouse</span>Your ideas, imagination</a>
<a href="#" class="gkPiggy"><span>Piggy</span>Save Your Time & Money</a>
</div>

The gkPerspective CSS class is useful if you need to create a 3D transformation effect.

Team section

You can create a section with the list of your team members using the following structure:

<div class="gkTeam" data-count="7">

<figure>

<a href="#"><img src="/templates/2012_10/images/demo/team1.png" alt=""></a>

<figcaption><a href="#">Mark</a></figcaption>

</figure>

...


<figure>

<a href="#"><img src="/templates/2012_10/images/demo/team7.png" alt=""></a>

<figcaption><a href="#">Remzi</a></figcaption>

</figure>


<a href="#">More About Us</a>

</div>

The most important parameter in the above code is the data-count attribute, which specifies the amount of columns with the team members. It can be a number in range 1-10

Animations

The Startup template supports a simple animation engine activated on scrolling - you can specify one of the four animation types:

• flip - it is a 3D rotation with origin in the top edge of the element
• horizontal - simple horizontal animation
• scale - it is a CSS transform scaling animation
• vertical - simple vertical animation

When the user scrolls page to the proper place of the website then the loaded CSS class is added to the element and animation is activated. The animation for the specific element is defined by the two data-* attributes:

• data-animation - specifies the animation type (one of the four mentioned types or your own ones - if you define it in the CSS code)
• data-delay - specifies the animation start delay in miliseconds

So if you want to animate two containers with the flip and the horizontal animation type and the second container animation should be delayed by 500ms you should create the following code:

<div class="gkPerspective"><!-- gkPerspective class added for the better flip animation effect -->
<div data-animation="flip" data-delay="0">Content</div>
<div data-animation="horizontal" data-delay="500">Content</div>
</div>