Blocks, Blocks everywhere!

Grab any block you want an create an amazing responsive website.

HTML:

Simply copy and paste the following lines of code into yout HTML file

 <section class="content-1">
  <div class="container">
    <div class="row">
      <div class="col-sm-8 col-sm-offset-2">
        <h1>
          Blocks, Blocks everywhere
        </h1>
        <p>
          Grab any block you want an create an amazing responsive website.
        </p>
      </div>
    </div>
  </div>
</section>

Customize this block:

You can customize the background color and text color.

<section class="content-1 bkg-turquoise text-white">
...
</section>

Why Slabs is amazing?

Simple and Fast

Take what you need and nothing more

Open Source

Code licensed under MIT License

Responsive

Design for desktop, tablets and phones

HTML:

Simply copy and paste the following lines of code into yout HTML file

 <section class="content-2">
  <div class="container">
    <h1 class="text-center">
      Why Slabs is amazing?
    </h1>
    <div class="row info-wrapper">
      <div class="col-sm-4  text-center">
        <img src="your_image.jpg">
        <h3>Simple and Fast</h3>
        <p class="lead">
          Take what you need and nothing more
        </p>
      </div>
      <div class="col-sm-4  text-center">
        <img src="your_image.jpg">
        <h3>Open Source</h3>
        <p class="lead">
          Code licensed under MIT License
        </p>
      </div>
      <div class="col-sm-4  text-center">
        <img src="your_image.jpg">
        <h3>Responsive</h3>
        <p class="lead">
          Design for desktop, tablets and phones
        </p>
      </div>
    </div>
  </div>
</section>

Customize this block:

You can customize the background color and text color.

<section class="content-2 bkg-turquoise text-white">
...
</section>

Slabs includes many useful components DOWNLOAD NOW

HTML:

Simply copy and paste the following lines of code into yout HTML file

 <section class="content-3">
  <div class="container">
      <span>Some text here .... </span>
      <a class="btn btn-lg btn-danger" href="#">CLICK ME</a>
  </div>
</section>

Customize this block:

You can customize the background color and text color.

<section class="content-3 bkg-turquoise text-white">
...
</section>

Multi useful components

Show the world your slabs combination

Responsive Layout

All the components will work in any device. Try it now! Resize your screen.

Endless Variations

Just mix any slab you want to start building your next website. The limit is your imagination.

HTML:

Simply copy and paste the following lines of code into yout HTML file

 <section class='content-4'>
  <section class='container'>
    <h1>
      Multi useful components
    </h1>
    <h2>
      Show the world your slabs combination
    </h2>
    <div class='row'>
      <div class='col-sm-3 content'>
        <h3>Responsive Layout</h3>
        <p>All the components will work in any device. Try it now! Resize your screen.</p>
      </div>
      <div class='col-sm-6 media'>
        <img src="your_image.jpg">
      </div>
      <div class='col-sm-3 content'>
        <h3>Endless Variations</h3>
        <p>Just mix any slab you want to start building your next website. The limit is your imagination.</p>
      </div>
    </div>
  </section>
</section>

More than blocks

Slabs Framework helps you to build visual consistency around your pages. Bring balance and visual consistency in a snap to you UI.

Don't start from scratch. Using Slabs Framework will help you get a perfect look that designers and developers will agree on.

Getting started

HTML:

Simply copy and paste the following lines of code into yout HTML file

 <section class="content-5 bkg-clouds">
  <div class='container'>
    <div class='row content-wrapper'>
      <div class='col-md-6 content'>
        <h3>More than blocks</h3>
        <p class='text-asbestos'>
          Slabs Framework helps you to build visual consistency around your pages. Bring balance and visual consistency in a snap to you UI.
        </p>
        <p class='text-asbestos'>
          Don't start from scratch. Using Slabs Framework will help you get a perfect look that designers and developers will agree on.
        </p>
      </div>
      <div class='col-md-6 media'>
        <img src="your-image.jpg" class='img-responsive'>
      </div>
    </div>
  </div>
</section>

Build amazing websites with Slabs

HTML:

Simply copy and paste the following lines of code into yout HTML file

 <section class="content-6 bkg-turquoise vertical-center">
  <div class="container">
    <div class="jumbotron framed">
      <h1>Build amazing websites with Slabs</h1>
    </div>
  </div>
</section>

Customize this block:

You can customize the background color and text color.

<section class="content-6 bkg-asbestos text-clouds">
...
</section>

You can add your custom image to the background like this:

<section class="content-6 vertical-center" style='background-image: url("/slabs/img/bg_1.jpg");'>
...
</section>

Steps to getting started

Download
Install
Customize
Enjoy!

HTML:

Simply copy and paste the following lines of code into yout HTML file

 <section class="content-7">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>
          Steps to getting started
        </h1>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <ul class="progress-steps step-4">
          <li class="on" >
            Download
          </li>
          <li>
            Install
          </li>
          <li>
            Customize
          </li>
          <li>
            Enjoy!
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

Customize this block:

It support from 3 to 5 steps. To change the grid of the steps just add the class step-#{number-steps} and should match with the amount of steps.

<ul class="progress-steps step-3">
  <li>
    Step 1
  </li>
  <li class="on">
    Step 2
  </li>
  <li>
    Step 3
  </li>
</ul>

Add the class "on" to the step that should be mark as active.

Slabs Framework comes with several componentes easy and complex which can be easily mix into almost any design. All component are build in the same style so it can be easy integreted in any kind of projects.

HTML:

Simply copy and paste the following lines of code into yout HTML file

 <section class="content-8 bkg-clouds">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <p class='lead'>
          Slabs Framework comes with several componentes easy and complex which can be easily mix into almost any design. All component are build in the same style so it can be easy integreted in any kind of projects.
        </p>
      </div>
    </div>
  </div>
</section>

PLAY YOUTUBE OR VIMEO

Click on the button to watch the video

HTML:

Simply copy and paste the following lines of code into yout HTML file

 <section class="content-9 bkg-black vertical-center" id="content-9">
  <div class="container">
    <div class="jumbotron">
      <h1>PLAY YOUTUBE OR VIMEO</h1>
      <p>
        Click on the button to watch the video
      </p>
      <p>
        <a data-toggle="lightbox" data-width="800" id="play-video" href="https://www.youtube.com/watch?v=yNENVZFHutQ"><img src="/slabs/dist/img/btn-play.png" alt="Play youtube or vimeo video">
        </a>
      </p>
    </div>
  </div>
</section>

Customize this block:

You can add your youtube or vimeo video like this

<a data-toggle="lightbox" data-width="800" id="play-video" href="ADD_HERE_YOUR_VIMEO_OR_YOUTUBE_URL">
  ...
</a>

You can edit the video width in data-width

<a data-toggle="lightbox" data-width="400" id="play-video" href="https://vimeo.com/8747975">
  ...
</a>

Don't fight to build it

Just pick your slabs that will help you create the perfect look for your webpage and whip it good!

HTML:

Simply copy and paste the following lines of code into yout HTML file

 <section class="content-10">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 vcenter">
        <div class="media">
          <img class="" src="/slabs/assets/img/easy-code.jpg">
        </div>
      </div>
      <div class="col-sm-6 vcenter text-center">
        <h1>
          Easy coding
        </h1>
        <p class="lead">
          Install Bolt-BS, grab your blocks and see the results.
        </p>
      </div>
    </div>
  </div>
</section>

Customize this block:

Remember to mantain the same HTML Structure so the design don't break.

Adding an image or video it's super simple, just insert it between this class:

<div class="media">
  ...
</div>

You can customize the background color and text color.

<section class="content-10 bkg-black text-white">
  ...
</section>

What a Bombshell

SLABS Frameworks its free and licensed under MIT.

Invite us a Beer

HTML:

Simply copy and paste the following lines of code into yout HTML file

 <section class="content-11">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 vcenter text-center">
        <h1>
          Easy coding
        </h1>
        <p class="lead">
          LOL
        </p>
      </div>
      <div class="col-sm-6 vcenter">
        <div class="media">
          <img class="" src="/slabs/assets/img/easy-code.jpg">
        </div>
      </div>
    </div>
  </div>
</section>

Customize this block:

Remember to mantain the same HTML Structure so the design don't break.

Adding an image or video it's super simple, just insert it between this class:

<div class="media">
  ...
</div>

You can customize the background color and text color.

<section class="content-11 bkg-black text-white">
  ...
</section>

Design and Code

Slabs is made on basis of Twitter Boostrap so you can use all its power to customize your website.

Mobile ready

All our blocks of header, contents and footers are ready for mobile divises. Resize the window to discover!

Rock your website

Share your support and let us know what you have done with Slabs.

HTML:

Simply copy and paste the following lines of code into yout HTML file

 <section class="content-12">
  <div  class="container">
    <div class="row">
      <div class="col-sm-4 sidebar ">
        <div class="background">
        </div>
        <div class="row">
          <div class="col-xs-12">
            <!-- You can insert content here -->
          </div>
        </div>
      </div>
      <div class="col-sm-8">
        <!-- You can insert content here -->
      </div>
    </div>
  </div>
</section>

Customize this block:

This block have a special place to add a background image. We recommend to add it by CSS rules for this particular element.

<div class='background' style='background-image: url("/slabs/img/bg_1.jpg");'></div>

Show me some logos

HTML:

Simply copy and paste the following lines of code into yout HTML file

 <section class="content-13 bkg-clouds">
  <div class="container">
      <h2 class="text-center">Show me some logos</h2>
      <ul class="showcase-logos">
        <li><img class="img-responsive img-center" src="http://placehold.it/250/333333/ffffff?text=Logo 1"></li>
        <li><img class="img-responsive img-center" src="http://placehold.it/250/e74c3c/ffffff?text=Logo 2"></li>
        <li><img class="img-responsive img-center" src="http://placehold.it/250/333333/ffffff?text=Logo 3"></li>
        <li><img class="img-responsive img-center" src="http://placehold.it/250/8e44ad/ffffff?text=Logo 4"></li>
        <li><img class="img-responsive img-center" src="http://placehold.it/250/f39c12/ffffff?text=Logo 5"></li>
        <li><img class="img-responsive img-center" src="http://placehold.it/250/333333/ffffff?text=Logo 6"></li>
        <li><img class="img-responsive img-center" src="http://placehold.it/250/2ecc71/ffffff?text=Logo 7"></li>
        <li><img class="img-responsive img-center" src="http://placehold.it/250/333333/ffffff?text=Logo 8"></li>
      </ul>
  </div>
</section>

Customize this block:

You can customize the background color and text color.

<section class="content-13 bkg-turquoise text-white">
...
</section>