website template image website template image website template image website template image website template image

An introducing line here or just delete this column! You can use class 'grey' or 'green'.

Styles

This is the style-playground! It shows how different elements of this template are formatted and can be used as a reference when using the template to style your own website.

Grid

The grid system is easy to use. You´ve got 16 colums, so if you want to divide your content into halfs, use grid-8 plus grid-8, for example. Don´t forget to always wrap them into a container with class "grids".

CSS

There are many useful classes in inuit.css and additional ones in eve-styles.css. Have a look into the code to find the ones that suit your needs.

Style playground

The following are examples of header formats:

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Text

This paragraph shows how all text encapsulated only within <p></p> tags will appear.

More text examples are as follows:

This is emphasised text
This is strong text
This is deleted text
This is a link

This is a block of code
This is a block of code
This is a block of code

This is a button

"This is a styled quote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tempor. Nullam tortor. Nulla vel dui. Curabitur et metus. This is a quote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tempor. Nullam tortor. Nulla vel dui. Curabitur et metus." John Doe (1900 - 2000)

Can I haz messages?

Yes of course you can!

This is an info message.

Note: Eve doesn´t claim to be perfect (me to)!

It is prohibited to turn this design into a fixed layout!


Images

The following are examples of image formats:

website template image A left aligned image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tortor non dolor. Donec nulla libero, ullamcorper sed, consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

website template image A right aligned image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tortor non dolor. Donec nulla libero, ullamcorper sed, consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

website template image A left aligned, linked image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tortor non dolor. Donec nulla libero, ullamcorper sed, consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Lists

Unordered list

  • List item example
  • List item example
    • Sub list item example
    • Sub list item example
  • List item example

Unordered list with class "check"

  • List item example
  • List item example
    • Sub list item example
    • Sub list item example
  • List item example

Ordered list

  1. List item example
  2. List item example
    1. Sub list item example
    2. Sub list item example
  3. List item example

Definition list

Definition title
Definition description
Definition title
Definition description

And how about tabs?

These are some very basic tabs. There are some downsides with tabs in responsive layouts - in small screens they will stack over each other. Make sure to test how it looks like when you want to use them. Don´t use too long titles.

These are some very basic tabs. There are some downsides with tabs in responsive layouts - in small screens they will stack over each other. Make sure to test how it looks like when you want to use them. Don´t use too long titles.

These are some very basic tabs. There are some downsides with tabs in responsive layouts - in small screens they will stack over each other. Make sure to test how it looks like when you want to use them. Don´t use too long titles.


Tables

Data tables and forms don´t always play nice in responsive layouts. They can be flexible in width but to display cell content in a way that is readable and makes sense, they have to have a certain width. There are approaches in the web to deal with that, but that´s an own topic. Search for it if you are in need of larger tables or forms.

Table header Table header Table header Table header
 
Cell data Cell data Cell data Cell data
Cell data Cell data Cell data Cell data
Cell data Cell data Cell data Cell data
  Table header Table header Table header
 
Cell data Cell data Cell data Cell data
Cell data Cell data Cell data Cell data
Cell data Cell data Cell data Cell data

To see a form, go here!


website template image

Inuit framework

This template is responsive! It is based on the Inuit-framework. You can extend the framework with igloos - have a look at the website!

website template image

Inbuilt grid

The grid used here has a max-width of 1120 px for larger screens and 16 columns with no end or last in use to stop the flow - self-clearing!

website template image

FlexSlider

The slider is the fantastic responsive Flexslider, which offers many features. Visit the website to find out more about the functions and features!

website template image

Nice social icons

The social icons were made by Alex Peattie, you can download the set on his website and even use them as a webfont with @font-face!