Features | Simiot, Bootstrap theme

Bootstrap ...for real!

This theme is based upon Twitter Bootstrap. We made sure we've exploited all of its potential, making it easy for you to get whatever you need, with minimal effort and modifications. We also kept all of its conventions; we knew it would've been more fun for you to do things, rather than learning a new logic.

HTML5 + CSS3 power to the W3C

We wrote this theme using clear and simple HTML5 and CSS3 syntaxes. Resulting code is valid, properly indented and well commented.

HAML + LESS do more with less

We wrote the HTML code for this theme using HAML, a template language which simplifies and speeds markup creation.

%section.section-content
    .container
        .row
            .span3
                %p Text text text
            .span9
                %p More text text more text

Don't worry, though; you don't need to know anything about it. HTML files are ready to use.

The CSS of this theme is written using LESS, a preprocessor which allows to exploit all of Bootstrap potential.

.section-content {
    position: relative;
    padding: 5em 0;
    border-bottom: 1px solid @grayLighter;

    .section-title {
        line-height: 1.25em;
        margin-bottom: 1em;
        font-weight: normal;
    }
}

Of course, it's not mandatory that you also use LESS - although we strongly recommended it; you can achieve whatever you need by simply editing our clear CSS code.

Responsive #RWD

When you change window's width, Bootstrap automatically adapts columns' width and placement, possibly by means of serialization. This template does this and more for you.

When you vary the width and height of the window, we also modify the font-size, so that all spaces are filled with text snippets and images, always achieving visually appealing layouts.

@media (min-width: 1200px) and (min-height: 800px)
{
    html { font-size: 18px; }
}

View example

Font Awesome really awesome

Why using rastered images when we can exploit powerful font icons? Font Awesome is the best solution to combine with Twitter Bootstrap.

<!-- simple icon -->
<p>
    <i class="icon-envelope"></i>
    text text text
</p>

<!-- button with icon -->
<a class="btn" href="#">
    <i class="icon-envelope"></i>
</a>

<!-- button with text and icon -->
<a class="btn" href="#">
    <i class="icon-envelope"></i>
    text text
</a>

It's easy to integrate and use, and you don't need to know anything more than what you already know!

FitVids fluid width video embeds

A theme can not be considered responsive if all of its content does not resize properly, depending on the device on which it is displayed. That's why we have chosen FitVids, a simple, lightweight jQuery plugin which allows for fluid videos to be displayed.

<div class="fitvids">
    <iframe src="..."></iframe>
</div>

Nothing could be simpler...

FlexSlider only the best

FlexSlider is the best responsive slider. Period.

<div class="flexslider">
  <ul class="slides">
    <li><img src="image.jpg"></li>
    <li><img src="image.jpg"></li>
    <li><img src="image.jpg"></li>
    <li><img src="image.jpg"></li>
  </ul>
</div>

It's easy to use and ready for responsive design, the best solution for sites requiring the maximum degree of compatibility with desktop and mobile devices.

Masonry align everything

Masonry is a dynamic layout plugin for jQuery. The flip-side of CSS floats. When you need to align a series of boxes there is no better solution than this. It's easy to use and offers an high degree of compatibility with older browsers.

<div class="masonry" id="container-masonry">
    <div class="span3 masonry-item">
        <!-- content goes here -->
    </div>
    <div class="span3 masonry-item">
        <!-- content goes here -->
    </div>
    ...
</div>

If you're wondering what would happen if the same content had been displayed without this plugin ...take a look here!

Isotope filter everything

If you need to filter content via Javascript Isotope is the perfect solution.

<div class="isotope" id="container-isotope">
    <div class="span3 isotope-item filter-x">
        <!-- content goes here -->
    </div>
    <div class="span3 isotope-item filter-y">
        <!-- content goes here -->
    </div>
    ...
</div>

As you can see in this example, the plugin has been optimized to run well at any resolution without sacrificing aesthetics and performance.

Hoverdir direction-aware hover effect

Direction-Aware Hover Effect

<div class="hoverdir">
    <div class="hoverdir-item">
        <img src="image.jpg">
        <div class="hoverdir-bg">
            <div class="hoverdir-content">
                <!-- buttons goes here -->
            </div>
        </div>
    </div>
</div>

A nice effect to use in a gallery. Fully customizable and easy to integrate into any page.

Fancybox zooming everything

FancyBox offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built on the top of the popular JavaScript framework jQuery and it is both easy to implement and customize.

<a class="fancybox" href="big-image.jpg">
    <img src="image.jpg">
</a>

Simply add the class "fancybox" to a link and magic happens!

Features No more "Lorem ipsum"