Documentation

Welcome to the bulb documentation and shortcode elements, here you will find all you need to customize your bulb website!

If you bought this theme and you don't find what you want here, feel free to contact me via email. If you don't buy it yet, buy it ;-) or contact me via ThemeForest

LESS

bulb is fully built with less. It allow to use variables, functions, mixins, and many other things with CSS. That's why bulb is easily customizable!

If you don't know LESS, checkout the documentation on the official website.

If you are a Mac user

You can use the Unofficial LESS app or CodeKit by Bryan D K Jones to compile LESS files.

If you are a PC user

Checkout Crunch app by Matthew Dean & Matt Kump or SimpLESS by KISS.

Color customization

All you have to edit is the variables.less file!

Here is a sample of the variables.less file

// Headings
// -------------------------
@headingStyledTextColor: #fff;

@headingStyledBgColor: @mainColor;
@headingStyledShadowColor: darken(@mainColor, 10%);

@headingStyledBgColorDark: #646464;
@headingStyledShadowColorDark: #333;

@headingStyledBgColorWhite: #fff;
@headingStyledShadowColorWhite: darken(#fff, 12%);

Make change, compile, and that's it!

To custom colors as you want, you just have to change variables values, and then compile the style.less file to the /css/ folder

Textures customization

To custom textures/images background, this is the same thing than color. Change the path and compile style.less, that's it!

You can add retina version too

// Body
// -------------------------
@bodyTextureBg: '../img/textures/gray_jean/gray_jean.png';
@bodyTextureBgRetina: '../img/textures/gray_jean/gray_jean_@2X.png';

// Header
// -------------------------
@headerBorderBottomColor: #222;
@headerTextureBg: '../img/textures/debut_dark/debut_dark.png';
@headerTextureBgRetina: '../img/textures/debut_dark/debut_dark_@2X.png';
// Image (homepage1)
@homeHeaderBg: '../images/homepage1/header.jpg';
@homeHeaderBgRetina: '../images/homepage1/header.jpg';
// Texture over image (stripped)
@homeHeaderTextureOver: '../images/homepage1/white-stripped.png';
@homeHeaderTextureOverRetina: '../images/homepage1/white-stripped.png';

The grid system

The grid system in bulb theme is the Twitter Boostrap grid system.

This a 12 columns grid, pixels based, using float and margins. It is a good grid system, very often used, cross-browser compatible and stable.

Here is a short demo on how to use it, but you should checkout the Twitter Bootstrap doc to better understanding how to use it.

Create a simple 2 columns layout with sidebar

<div class="container">    
    <div class="row">
        <div class="span3">Here is my sidebar</div>
        <div class="span9">Here is my main content</div>
    </div>
</div>

Create a 3 colmuns layout with the same width

<div class="container">
    <div class="row">
        <div class="span4">Column 1</div>
        <div class="span4">Column 2</div>
        <div class="span4">Column 3</div>
    </div>
</div>

Headings & text

Default headings style

This title is a h1 tag

This title is a h2 tag

This title is a h3 tag

This title is a h4 tag

This title is a h5 tag
This title is a h6 tag
<h1>This title is a h1 tag</h1>
<h2>This title is a h2 tag</h2>
<h3>This title is a h3 tag</h3>
<h4>This title is a h4 tag</h4>
<h5>This title is a h5 tag</h5>
<h6>This title is a h6 tag</h6>

Variant headings class

This title is a standard heading

This is a tight heading (less margin on top)

This is a light heading

This is a colored heading

This is a tight, white and colored heading

<h3>This is a standard heading</h3>
<h3 class="tight">This is a tight heading</h3>
<h3 class="light">This is a light heading</h3>
<h3 class="colored">This is a colored heading</h3>
<h3 class="tight light colored">This is a tight, white and colored heading</h3>

Styled headings

This title is a styled heading

<h3 class="styled">This title is a styled heading</h3>

This title is a white styled heading

<h3 class="styled white">This title is a white styled heading</h3>

This title is a dark styled heading

<h3 class="styled dark">This title is a dark styled heading</h3>

Ordered & unordered list

Ordered list

  1. Ullamco nostrud magna veniam pariatur.
  2. Commodo elit fugiat dolor ullamco.
  3. Cupidatat est eu laborum.
  4. Lupidatat tempor in cupidatat in deserunt.
<ol>
    <li>Ullamco nostrud magna veniam pariatur.</li>
    <li>Commodo elit fugiat dolor ullamco.</li>
    <li>Cupidatat est eu laborum.</li>
    <li>Lupidatat tempor in cupidatat in deserunt.</li>
</ol>

Checked list

  • Ullamco nostrud magna veniam pariatur.
  • Commodo elit fugiat dolor ullamco.
  • Cupidatat est eu laborum.
  • Lupidatat tempor in cupidatat in deserunt.
<ul class="checked">
    <li>Ullamco nostrud magna veniam pariatur.</li>
    <li>Commodo elit fugiat dolor ullamco.</li>
    <li>Cupidatat est eu laborum.</li>
    <li>Lupidatat tempor in cupidatat in deserunt.</li>
</ul>

Styled list

  • Ullamco nostrud magna veniam pariatur.
  • Commodo elit fugiat dolor ullamco.
  • Cupidatat est eu laborum.
  • Lupidatat tempor in cupidatat in deserunt.
<ul class="styled">
    <li>Ullamco nostrud magna veniam pariatur.</li>
    <li>Commodo elit fugiat dolor ullamco.</li>
    <li>Cupidatat est eu laborum.</li>
    <li>Lupidatat tempor in cupidatat in deserunt.</li>
</ul>

Images

Bordered image

Bordered 
<img src="http://www.celavi.fr/themeforest/bulb/www/images/features/code.jpg" class="bordered" alt="Bordered">

Rounded image

Rounded 
<img src="http://www.celavi.fr/themeforest/bulb/www/images/features/code.jpg" class="rounded" alt="Rounded">

Glossy image

Glossy 
<figure class="glossy">
    <img src="http://www.celavi.fr/themeforest/bulb/www/images/features/credit-card.jpg" alt="Glossy">
</figure>

Glossy, rounded and bordered image

Glossy rounded & bordered 
<figure class="glossy">
    <img src="http://www.celavi.fr/themeforest/bulb/www/images/features/credit-card.jpg" class="rounded bordered" alt="Glossy rounded & bordered">
</figure>

Buttons

Link & form button

This is a button link 
<a href="#" class="btn">This is a button link</a>
<input type="button" value="This is a type input button" class="btn">

Button sizes

Button small Button default Button large

Shaded button

Button shaded

Icons - Easycons

I created some icons for this theme, in Photoshop, and I decided to move forward and create another vector font icon set, and call it Easycons

It's pretty easy to use them, and you can use them anywhere else, for free, even in commercial-use.

<h1><i class="easycons-audio"></i>
<i class="easycons-headphones"></i>
<i class="easycons-comments"></i>
<i class="easycons-pen"></i>
<i class="easycons-feather"></i>
<i class="easycons-lifebuoy"></i>
<i class="easycons-home"></i>
<i class="easycons-tea"></i>
<i class="easycons-palette"></i>
<i class="easycons-heart-broken"></i></h1>

Icons rounded

<span class="icon-rounded small"><i class="easycons-lifebuoy"></i></span>
<span class="icon-rounded medium"><i class="easycons-lifebuoy"></i></span>
<span class="icon-rounded large"><i class="easycons-lifebuoy"></i></span>

Pricing tables

Simple pricing table

Standard

$16/mo Or bill $180/year and get 10% discount
  • 8 pages, gallery and blogs
  • 500 GB Bandwidth
  • 1 GB storage
  • Custom domain
  • 24/7 support
<div class="pricing-table">
    <header class="pricing-header">
        <h2>Standard</h2>
    </header>
    <div class="pricing-rate">
        <span class="price">$16<small>/mo</small></span>
        <small>Or bill $180/year and get 10% discount</small>
    </div>
    <ul class="pricing-features">
        <li><strong>8 pages, gallery and blogs</strong></li>
        <li><strong>500 GB Bandwidth</strong></li>
        <li><strong>1 GB storage</strong></li>
        <li>Custom domain</li>
        <li>24/7 support</li>
    </ul>
    <footer class="pricing-footer">
        <a href="#" class="btn shaded">Get started</a>
    </footer>
</div>

Popular pricing table

Most Popular

$8/mo Or bill $180/year and get 10% discount
  • 8 pages, gallery and blogs
  • 500 GB Bandwidth
  • 1 GB storage
  • Custom domain
  • 24/7 support
<div class="pricing-wrapper">
    <div class="pricing-table pricing3 popular dark">
        <header class="pricing-header">
            <h2>Most Popular</h2>
        </header>
        <div class="pricing-rate">
            <span class="price">$8<small>/mo</small></span>
            <small>Or bill $180/year and get 10% discount</small>
        </div>
        <ul class="pricing-features">
            <li><strong>8 pages, gallery and blogs</strong></li>
            <li><strong>500 GB Bandwidth</strong></li>
            <li><strong>1 GB storage</strong></li>
            <li>Custom domain</li>
            <li>24/7 support</li>
        </ul>
        <footer class="pricing-footer">
            <a href="#" class="btn shaded">Get started</a>
        </footer>
    </div>
</div>

Pricing table grid

You can have 2 to 5 pricing tables side to side.

2 columns pricing tables

<div class="pricing-wrapper">
    <div class="pricing-table pricing2">
        ...
    </div>
    <div class="pricing-table pricing2">
        ...
    </div>
</div>

3 columns pricing tables

<div class="pricing-wrapper">
    <div class="pricing-table pricing3">
        ...
    </div>
    <div class="pricing-table pricing3">
        ...
    </div>
</div>

4 columns pricing tables

<div class="pricing-wrapper">
    <div class="pricing-table pricing4">
        ...
    </div>
    <div class="pricing-table pricing4">
        ...
    </div>
</div>

5 columns pricing tables

<div class="pricing-wrapper">
    <div class="pricing-table pricing5">
        ...
    </div>
    <div class="pricing-table pricing5">
        ...
    </div>
</div>

6 columns pricing tables

<div class="pricing-wrapper">
    <div class="pricing-table pricing6">
        ...
    </div>
    <div class="pricing-table pricing6">
        ...
    </div>
</div>

Contact & support

If you bought this theme and you don't find what you want here, feel free to contact me via email. If you don't buy it yet, please contact me via ThemeForest.

Vincent Bianciotto

Vincent Bianciotto

vincent@celavi.fr
www.celavi.fr
@vinzcelavi

Credits

Top menu