SMARTBOX

A responsive bootstrap theme

v.1.1


1. Getting Started

1.1 Theme color

1.2 Theme background

2. Page Layout

2.1 Header

2.2 Content

2.2.1 Normal section

2.2.2 Alternative  section

2.2.3 Padded section

2.2.4 Dark  section

2.2.4 Section with background image

2.3 Footer

3. Scaffolding and Bootstrap components

3.1 Scaffolding

4. Theme Components

4.1 Super-hero-unit

4.2 Section headers

4.3 Slideshow

4.3 Round images

4.4 Icon boxes

4.5 Pricing tables

5. Page Templates

5.1 Home page

5.2 About us page

5.3 Services page

5.4 FAQ page

5.5 Pricing page

5.5 Docs page

5.6 Testimonials page

5.7 404 page

5.8 Right sidebar, left sidebar and fullwidth page

5.11 Alt page

5.12 Normal blog

5.13 Timeline blog

5.14 Single post

5.15 Three columns Portfolio

5.16 Four columns Portfolio

The four columns portfolio page (portfolio-4col.html) uses exactly the same markup but uses .span3 classes on the list items instead of the .span4

5.17 Single portfolio item

5.18 Squared items portfolio

The squered  columns portfolio page (portfolio-4col.html) uses exactly the same markup but requires a no-rounded class to be added on the .round-box elements.

5.19 Contact page

6. Support

7. Credits

1. Getting Started

Once you have downloaded the theme unzip it using your standard zip software.  When it has finished you should have a folder with the following directories inside:

1.1 Theme color

To change the theme color (default color is dark blue) you can assign a class to the body

1.2 Theme background

To change the background pattern of the theme change the background-image CSS rule on the body (located in the theme.css file ). Patterns are located in the images/backgrounds folder.

! Tip: If you want to support retina displays for the background image make sure that you also change the reference to the background image to  the retina displays media query on the theme.css file.  For retina displays we provide a bigger resolution file (.._@2x) and restrain it to the dimensions of the normal fle.


2. Page Layout

Each page in the theme follows HTML5 semantic markup and its compatible with the latest version of twitter bootstrap.

The general page layout consists of the following parts:

The proper markup for the page requires the following markup

<body>

<div class=”wrapper”>

        <header id=”masthead”>

                Header 

                </header>

                <div id=”content” role=”main”>

                        Main content

                </div>

        </div>

        <footer>

<footer id="footer" role=”contentinfo”>

Footer        

<footer>

</body>

2.1 Header

The header area (<header id="masthead"> ..) of the page contains the page Logo and the navigation list. The navigation is designed following bootstrap's responsive rules so in smaller screens it will collapse to a responsive dropdown menu.

You can read more about the markup of the navigation in bootstrap’ s website

! Tip:To add an image logo use the following markup

 <a href="link" class="brand"><img src="image source"></a>. Paddings on the header and the navigation links might need adjustment depending on the logo image dimensions.  

2.2 Content

The content (<div id="content" role="main"> ..) area hosts the main content of the theme.

Its divided in sections  to visually and semantically  separate the content.

Sections are defined using the following HTML5 markup

<section class="section">

        <div class="container-fluid">

                Content goes here…

        </div>

        <section>

        

Additional classes can be applied to the section to visual style the content.

2.2.1 Normal section

Normal sections require only the .section class and they expand 100% in their container.

<section class="section">

..

2.2.2 Alternative  section

Alternative sections require the additional class .section-alt. Alternative sections have a light gray background color and inner shadows.

<section class="section section-alt">

..

2.2.3 Padded section

The default section, as mentioned above expands from one side to the other.  Most of the time (except in cases where a full width slideshow is needed) an padding will be required to push the content of the section away from the edges. This can be achieved by using the .section-padded class on a section.

<section class="section section-padded">

        ..

2.2.4 Dark  section

As the name implies a dark section is a section with a dark background color. It can be used to create page headers without background images (see template page altpage.html)

<section class="section section-dark">

        ..

2.2.4 Section with background image

To apply any background image to a section you can use a data-background  attribute to any section

<section class="section" data-background=”url( image url )”>

        ..

! Tip: Section classes can be combined . So for an alternative section with padding the markup should be <section class=”section section-alt section-padded”> following bootstrap’s philosophy.

! Attention: To create big title headers (as you see in the demo site) data-background should be avoided. Use instead the super-hero-unit as discussed later on.

2.3 Footer

The footer  area (<footer  id="footer"> ..) of the page contains the pages footer and requires the following markup

<footer id="footer" role=”contentinfo”>

        <div class=”wrapper wrapper-transparent”>

                <div class=”container-fluid”>

                        footer content here

                        </div>

                </div>

        <footer>

! Tip: If you decide on a dark colored background pattern assign the class “theme-dark” to the footer. That will make the text color to be light on the dark background.


3. Scaffolding and Bootstrap components

3.1 Scaffolding

Smartbox is builded using twitter’s bootstrap. It uses a 12 column responsive and fluid grid that makes sure that your website will look cool on every screen resolution.

Columns are handled by the .span# class and they need to be nested on an element with a class of .row-fluid

To create a layout with two columns one 8 spans and on 4 for example you will use the following markup

<div class=”row-fluid”>

        <div class=”span8”>

                Column one here        

                </div>

        <div class=”span4”>

                Column two here        

                </div>

        <footer>

You can read more about the scaffolding on bootstrap’s website

3.2 Bootstrap components

Smartbiz uses the latest bootstrap core and that ensures that all the components are there for you to use out of the box:

You can read more on bootstrap’s basic components on bootstrap’s website


4. Theme Components

Smartbiz comes with  a set of theme related components that you can use along with the bootstrap components.

4.1 Super-hero-unit

If you want to create super fancy and bold titles then s super-hero-unit is what you need. The markup needed to create a big title with a background image is the following

<div class="super-hero-unit">

<figure>

<img  src="image source">

<figcaption class="flex-caption">

<h1 class="super">

 Super  <span class="lighter"> &amp; </span>  Hero

</h1>

</figcaption>

</figure>

</div>

That will create the following result

! Tip: To add a fade in effect on the text apply the classes “animated fadeinup” on the <h1>. If you also want a small delay before the animation starts also add the class “delayed”.  So if you want both the markup should be like that <h1 class=”super animated fadeinup delayed”>.

! Tip: You can change the animation effect by changing the “fadeinup” class. Other animations available are provided by the classes fadeIn and  flash. Feel free to try them or add your own.

4.2 Section headers

Section Header can be used at the beginning of a section to create an impressive title.

The following markup should be used

<div class="section-header">

                      <h1>        

Some header

 </h1>

 </div>

! Tip: To use the super light fonts inside an element just create a span with the class “light”.

4.3 Slideshow

Smartbox uses flexslider to create impressive and responsive slideshows that respond even to touch events.

The general markup used to create a slideshow is the following

<div class="flexslider" id="someID">

                            <ul class="slides">

                        <li>

                                A slide (any content)

                        </li>

<li>

                                Another  slide (any content)

                        </li>

                </ul>

</div>

You can control the behaviour of the slideshow by passing data attributes to the .flexslider div.

The data attributes used are:

So, for example to create a slideshow with navigation arrows and navigation controls outside the slideshow aligned to the left,  that uses the effect “fade” and changes every 5 seconds you should use the following markup

<div class="flexslider" data-flex-directions=”show”  data-flex-directions-type=”simple” data-flex-controls=”show”  data-flex-controlsalign=”left”  data-flex-speed=5000  id="someID">

! Tip: Default values can be omitted

! Attention: Each slideshow should have an id

4.3 Round images

One of the key features of the theme is the use of rounded images.  To create a basic rounded image use the following markup

<div class="round-box">

<span class="box-inner">

<img class="img-circle"  src="image source">

</span>

</div>

By default rounded images are 120 pixel wide. To change  the size of the image additional classes can be assigned to the .round-box class:

To make the rounded image a link  the .box-inner span should be replaced with a <a>.

Icons can be added to the round images using the font-awesome icons markup . A total of 249 icons are available!

To create, for example a huge rounded image that acts as a link and has an icon heart on the center use the following markup:

<div class="round-box box-huge">

<a class="box-inner" href=”some link”>

<img class="img-circle"  src="image source">

<i class=”icon-heart”></i>

</span>

</div>

! Tip: Square icons are available too. For consistency reasons you can use exactly the previous markup. Just assign an extra class “no-rounded” to the .round-box div

! Tip: To support retina displays an easy way would be to use images 1.5 times larger than the box sizes so that they will render nicely on bigger resolution screens

4.4 Icon boxes

Icon boxes (as used at the bottom of the testimonials page) is a combination of bootstrap’s well’s and rounded boxes mentioned above. The proper markup is the following:

        <div class="well blockquote-well">

                content here

                <div class="round-box box-medium">

<span class="box-inner">

<img  class="img-circle"  src="image source">

</span>

</div>

</div>

4.5 Pricing tables

pricing table is another combination of bootstrap’s well’s and rounded boxes. The following markup should be used to create a pricing table:

        <div class="well well-package">

                <h3 class="well-package-heading">

                        Heading here

                </h3>

                <div class="well-package-price">

                        <small> $ </small>

                        some price

                  </div>

        <ul class="well-package-list">

                <li> some content</li>

                ….

        </ul>

        <a class="btn btn-primary btn-large" href="some link">

                Sign up

        </a>

</div>

! Tip:  To make a pricing box stand out add an icon tag inside the .well-package-heading using the markup <span class=”tag”><i class=”icon-star”></i></span>

Icon boxes (as used at the bottom of the testimonials page) is a combination of bootstrap’s well’s and rounded boxes mentioned above. The proper markup is the following:

        <div class="well blockquote-well">

                content here

                <div class="round-box box-medium">

<span class="box-inner">

<img  class="img-circle"  src="image source">

</span>

</div>

</div>

5. Page Templates

5.1 Home page

The home page (index.html) contains the  following sections

 

You can refer to the index.html page for more information

5.2 About us page

The layout of the about us page (about.html) is the following

5.3 Services page

The layout of the services page (services.html) is the following

5.4 FAQ page

The layout of the FAQ  page (faq.html)  is the following

Refer to the bootstrap’s website about the markup needed for the accordion

5.5 Pricing page

The layout of the pricing table page (pricing.html) is the following

5.5 Docs page

The layout of the Docs page (docs.html) is the following

Use the docs page uses the affix bootstrap component to keep a track of the page position.

! Tip: The body of that page needs to include the following data attributes: data-spy = “scroll” and data-target = “.docs-sidebar-menu”

5.6 Testimonials page

The layout of the testimonials page (testimonials.html) is the following

! Tip: Blockquotes are following the markup provided by bootstrap 

5.7 404 page

The layout of the 404 page (404.html) is the following

5.8 Right sidebar, left sidebar and fullwidth page

The layout of the right sidebar page (sidebar-right.html) is the following

The layout of the left sidebar page (sidebar-left.html) is the following

The  fullwidth  page (fullwidth.html) is not including a sidebar.

To create a page with a  sidebar use the following markup

<section class="section section-padded">

                <div class="container-fluid">

<div class="row-fluid">

                <div class="span9">

Main content

</div>

<aside class=”aside span3”>

        <div class=”sidebar-widget”>

                <h3 class=”sibebar-header”>

                widget content

        </div>

<div class=”sidebar-widget”>

                <h3 class=”sibebar-header”>

                widget content

        </div>

</aside>

</div>

</div>

</section>

Smartbox supports supports search, categories, tag cloud, recent posts, archive and twitter widgets (by using the classes widget_search, widget_categories, widget_tag_cloud, widget_recent_entries, widget_archive and widget_twitter classes) but you can use any type of content on your sidebar.

! Tip: To change to right sidebar just reverse the order of the .span9 div  and the aside elemnt in the above markup.

5.11 Alt page

The alt page (alt.html) is an example of how flexible the theme is. In that example page the header is not including any background image and a place in the page is used to create a more standard type of a footer.

The layout of the alt page is the following

To create a dark section just use the .section-dark class on a section.

! Tip: You can use a dark section with widgets to simulate the functionality of a normal  footer.

5.12 Normal blog

The layout of the blog  page (blog.html) is the following

To separate the page in the main part and a sidebar use the same markup as the right-sidebar page above.

The markup needed to create the post list is the following

<article class="post row-fluid">

                          <div class="span2 post-info">

                                    <div class="round-box">

                                              <a class="box-inner" href="link to post">

                        <img alt="some image" class="img-circle" src=”image”>

        </a>

</div>

                                    <h5 class="text-center">

                                Author name

                        </h5>

                         <h5 class="text-center light">

                                Post date

                        </h5>

                </div>

                <div class="span10 post-body">

                        <h3 class="small-screen-center">

                                 <a href="link to post">

                                        Post title

                                 </a>

                        </h3>

                        Post content

                        <a class="more-link" href="link to postl">read more..</a>

                </div>

        </article>

To create the pagination use the standart pagination component from bootstrap

! Tip: Instead of the authors image you can use the post feature image on the .post-info element

5.13 Timeline blog

The layout of the timeline  page (timeline.html) is the following

To create the timeline the following markup is required

<ol id="timeline">

                              <li class="timeline-item">

                                <div class="well post">

                                          <div class="post-info">

                                                    <h5 class="text-center light">

                                                             Post Date

                                        </h5>

                                        <div class="round-box box-small">

                                                <a class="box-inner" href="post link">

                                                        <img class="img-circle" src="image src">

                                                </a>

                                        </div>

                                        <h5 class="text-center">

                                                Authors name

                            </h5>

                                          </div>

                                          <div class="post-body">

                           <h4 class="post-title small-screen-center">

                                     <a href="post link">

                                   Post title

                                                      </a>

                                        </h4>

                                        post content

                         <a class="more-link" href="post link">read more..</a>

</div>

                                          <div class="post-arrow"></div>

                 </div>

                              </li>

                <li class="timeline-item">

                        another post

        </li>

                ….

</ol>

The timeline is fully responsive and uses CSS3 to change the orientation of the posts (with a jquery fallback for ie8)

5.14 Single post

The layout of the blog  page (blog.html) is the following

The comment section is using bootstrap’s media objects.

! Tip: Nested comments are supported

5.15 Three columns Portfolio

The three columns portfolio page (portfolio-3col.html) requires the following markup:

<div class="portfolio-filters">

                      <h5 class="text-center">

                        <a class="active" data-filter="filter-1" href="#">all</a>       /

                <a data-filter="filter-2" href="#">some filter</a>        /

<a data-filter="filter-3" href="#">some filter</a>        /

                      </h5>

            </div>

        <div class="row-fluid">

                      <ul class="thumbnails portfolio">

                                <li class="span4 filter-1">

                                          <figure class="round-box box-huge">

                                                    <a class="box-inner" href="link">

                                                              <img class="img-circle" src=”image source”>

                                                <i class="plus-icon""></i>

                                        </a>

                                        <figcaption>

                                                <h4>

                                                        <a href="item link">

                                                                Portfolio item title

                                                        </a>

                                                </h4>

                                                content

                                        </figcaption>

                                </figure>

                        </li>

                        <li class=”span4” filter-2>

                                another-tem

                        </li>

                        ..

                </ul>

        </div>

To link a filter with a to a portfolio item the item should have a corresponding class.  

For example if you have a filter with a data-filter=”videos” attribute

        <a data-filter="videos" href="#">some filter</a>

then the portfolio item should have a class “filter-videos”

<li class=”span4 filter-videos”>

! Tip: You can add a tag to a portfolio item (like “new!”) by adding the markup <span class=”tag”>New!</tag> just =before you close the figcaption element.

! Tip: You can add lightbox to the image by assigning a class of “fancybox” to the link surrounding the image and make sure that the href of th link element points to the big image.  Smartbox uses fancybox http://www.fancyapps.com/fancybox/

5.16 Four columns Portfolio

The four columns portfolio page (portfolio-4col.html) uses exactly the same markup but uses .span3 classes on the list items instead of the .span4

5.17 Single portfolio item

The layout of the single portfolio item  page (portfolio-item.html) is the following

5.18 Squared items portfolio

The squered  columns portfolio page (portfolio-4col.html) uses exactly the same markup but requires a no-rounded class to be added on the .round-box elements.

5.19 Contact page

The layout of the contact  page (contact.html) is the following

To change the map location on the contact page go to the bottom of the contact page and in the embedded javascript find the variables lat and lng and change them to your own coordinates.

        

lat = ...,

            lng = ...,

Setup your Contact form

To setup your contact form you will need to edit the contact_me.php file in the main theme folder.

The first 42 lines can be modified to customise your contact form.

Set the email address - to set the email address that the contact form will send to edit line 4 and change the email address from myemail@email.com to your address.

Set the company name - When a message arrives in your inbox it will have a subject with your company name inside.  To change this edit line 6 and change the oxygenna.com to your comany name.

Set which fields are required - to change which fields are required in your form you can edit the following

$field_rules = array(

    'name' => 'required',

    'email'   => 'required|valid_email',

    'subject' => 'required',

    'message' => 'required'

);

Remove the lines of the fields you do not want to be required.

Change error validation messages - to change the error messages that popup on the forms change the following section.

$error_messages = array(

    'required'    => 'This field is required',

    'valid_email' => 'Please enter a valid email address'

);

// select where each inputs error messages will be shown

$error_placements = array(

    'name'         => 'top',

    'email'        => 'top',

    'subject'      => 'right',

    'message'      => 'right',

    'submitButton' => 'right'

);

$error_messages - defines the messages shown in the popups

$error_placements - defines where the popups will appear on (top|bottom|left|right)

6. Support

Smartbox theme comes with 100% rock solid support from our forum page:

http://support.oxygenna.com/index.php?p=/categories/smartbox 


7. Credits

  1. Background textures by subtle patterns (http://subtlepatterns.com/)
  2. Asset images by stock images (http://www.sxc.hu/) and pixabay (http://pixabay.com/)
  3. Lato font by google fonts (http://www.google.com/webfonts/specimen/Lato)
  4. Twitter feed from seaofclouds (http://tweet.seaofclouds.com/)