Online documentation: Carbon HTML template

Table of Contents

Spread the word, like and share – top

If you like this template please don’t forget to spread the word, like it, share it so other people can try it too. Thanks in advance!

Layout – top

This template is based on a very powerful and still very flexible grid system.
The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns; columns create the actual structure. For layouts to work properly, always put your page content inside a row and a column.

Grid – desktop, mobile, block

Two grid systems are available – one for large screens, one for mobile devices. The desktop grid is 24 columns to give maximum flexibility – allows division by 2, 3, 4, 6, 8, etc. The mobile grid is based on 6 columns – allows division by 2, 3.

The grid. Here is an example of 3 columns:

<div class=”otw-row”>
<div class="otw-eight otw-columns"><p>Column 1/3</p></div>
<div class="otw-eight otw-columns"><p>Column 1/3</p></div>
<div class="otw-eight otw-columns"><p>Column 1/3</p></div>
</div>

The mobile grid has a similar classes structure:

.mobile-one

.mobile-two
.mobile-three
.mobile-four
.mobile-five
.mobile-six

Block grids
These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly. Block grids are made from a ul.block-grid with #-up styles chained to it.
By default, these blocks will stay in their N-up configuration on mobile devices, but you can add a class of “mobile” to have them reshuffle on smart phones into one element per line, just like the grid. If you want to use a different layout for mobile, say .five-up for large screens and .three-up for small devices, you can simply use classes like, .mobile-three-up.

Example Six-up / Two-up Mobile. This will display in 6 columns and in mobiles it will be in two columns:

<ul class="block-grid six-up mobile-two-up">
<li>Six-up element</li>
<li>Six-up element</li>
<li>Six-up element</li>
<li>Six-up element</li>
<li>Six-up element</li>
<li>Six-up element</li>
</ul>

Responsive

  • Large screens – above 960 px – the width of the site is fixed
  • Medium – 768 – 960px – the site scales down. No content is rearranged.
  • Mobile bellow 768 px – by default it all goes in one column. You can use the mobile grid if you’d like it different.

Header width
The header is by default full width. It can be made fixed width (site width – 960px) by adding class fixed-width in the <header> tag.
Example: <header id=”top” class=”fixed-width”>

Static header
By default the header will scroll with the page. You can make it always stay on top of your site and scroll the rest of the site by adding class fixed-position-menu to the page-content div wrapper
Example: <div id=”page-content” class=”fixed-position-menu”>

Page title width
The page title will come by default with fixed width. You can make it full width by removing the class fixed-width from the page title div wrapper.
Example: <div class=”page-title-wrapper”>

Footer width
The footer by default comes full width. You can make it fixed width by adding a class fixed-width to the footer wrapper.
Example: <footer id=”page-footer” class=”fixed-width”>

Site width
By default the theme is 960px. You can change that easily by using some custom CSS. All you need to do is set both of the following to whatever width you like:
.otw-row { width: 960px }
.fixed-width { width: 960px; }
All content is pretty flexible and should shrink or stretch normally. Just have in mind not to use too small or too big values.

Boxed layout

Put the whole content of the body tag in <div id="boxed-layout"> a wrapper to enable the boxed layout.
Add some padding-top and padding-bottom in #boxed-layout if you want you site to have some space on top and bottom.
Background color or image is also applied on this same #boxed-layout id.
If you want to add some space on the left and the right of your content before the box, you need to change the value of max-width: on #boxed-layout #page-content. The width set here minus the width set for the site width will give some space (equally divided) on the left and the right between the box and the content.

HTML Structure – top

Pages – top

Lots of ready to use pages and examples:

  • Home Business
  • Home Portfolio
  • Home Services
  • Home Thumbnail slider
  • Home Boxed
  • Typography
  • Widgets
  • Grid example
  • Page with sidebar
  • Error page
  • Portfolio 4 col + clients
  • Portfolio 3 col + clients
  • Portfolio 2 col
  • Portfolio 1 col
  • Portfolio single
  • Blog 1 col + sidebar
  • Blog 2 col + sidebar
  • Blog 3 col
  • Post archive
  • Blog post single
  • Contacts
  • About
  • Boxed layout and sidebars examples
  • Flex slider examples

Widgets – top

Lots of widgets and customization options. Check the Widgets page under Features on the demo site.

  • Info boxes
  • Buttons
  • Icon links
  • Drop caps
  • Quotes
  • Highlight text
  • Abbreviation text
  • Tab layout
  • Content toggle
  • Accordion
  • FAQ
  • Services
  • Lists
  • Message boxes
  • Content boxes
  • Tables
  • Price tables
  • Price boxes
  • Twitter
  • Calendar
  • About the author
  • Flickr
  • Tag cloud
  • Horizontal Rules
  • Social icons
  • Latest posts/portfolio

Slider – top

The template comes with Flex Slider – light and fast, easy to set up. It can be fixed or full width. It is responsible.

6 sliders examples are included in the download package. Save time and start working on one of them.

The files for the slider are located in folder named sliders. You will find there two folders for each slider. One with the original name containing the original code for the slider and another one custom which includes all custom styles. If you want to modify the styles for a slider we recommend you use this second folder so you can keep the original clean of custom code.

Icons – top

Two types of icons

  • Font icons – easy to set size, color, always the same quality
  • Image icons – standard image icons

Includes classes for both types and a big set of Font Icons.

Font icons are located in a folder named Icons. In there you will find two sets of fonts icons – foundation social set and foundation general set.

CSS, Javascript – top

CSS files are located in a folder named stylesheets. All css files are documented.

Most of the javascripts that we have used in this template are located in a folder named javascript.