ResponseEve, a responsive template by SiGa
An introducing line here or just delete this column! You can use class 'grey' or 'green'.
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.
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".
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.
The following are examples of header formats:
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 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)
The following are examples of image formats:
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.
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.
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.
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.
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!
This template is responsive! It is based on the Inuit-framework. You can extend the framework with igloos - have a look at the website!
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!
The slider is the fantastic responsive Flexslider, which offers many features. Visit the website to find out more about the functions and features!
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!