Overview

SLABS Framework is a super extension of Bootstrap, so you can use any default component inside the blocks, so you can customize it to your needs. Here are some extra features we add to Slabs for generate our components.

Typography

Headings

All headings have an extra enchanting. We support the use of Roboto font, because it looks amazing and its a mashup of Helvetica, DIN and Myriad.

Exmaple

h1. Slabs heading

h2. Slabs heading

h3. Slabs heading

h4. Slabs heading

h5. Slabs heading

h6. Slabs heading

Text colors

Because 5 colors are not enought. We add extra text colors classes based on the Flaut UI colors swatch.

Exmaple

text-turquoise. Eget risus varius blandit sit amet non magna

text-green-sea. Eget risus varius blandit sit amet non magna

text-emerald. Eget risus varius blandit sit amet non magna

text-nephritis. Eget risus varius blandit sit amet non magna

text-peter-river. Eget risus varius blandit sit amet non magna

text-belize-hole. Eget risus varius blandit sit amet non magna

text-amethyst. Eget risus varius blandit sit amet non magna

text-wisteria. Eget risus varius blandit sit amet non magna

text-wet-asphalt. Eget risus varius blandit sit amet non magna

text-midnight-blue. Eget risus varius blandit sit amet non magna

text-sun-flower. Eget risus varius blandit sit amet non magna

text-orange. Eget risus varius blandit sit amet non magna

text-carrot. Eget risus varius blandit sit amet non magna

text-pumpkin. Eget risus varius blandit sit amet non magna

text-alizarin. Eget risus varius blandit sit amet non magna

text-pomegranate. Eget risus varius blandit sit amet non magna

text-clouds. Eget risus varius blandit sit amet non magna

text-silver. Eget risus varius blandit sit amet non magna

text-concrete. Eget risus varius blandit sit amet non magna

text-asbesto. Eget risus varius blandit sit amet non magna

<p class="text-turquoise"> text-turquoise. Eget risus varius blandit sit amet non magna </p>
...
<p class="text-asbestos"> text-asbesto. Eget risus varius blandit sit amet non magna </p>

Buttons

Colors

Apply any of the next colors to your buttons!

Exmaple

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- User any of the colors swatch -->
<button type="button" class="btn btn-asbestos">Asbestos</button>

Shapes

We got extra shapes for the the buttons.

Exmaple

<!-- Button outline -->
<button type="button" class="btn btn-pumpkin btn-outline">Button Outline</button>
<!-- Button rounded -->
<button type="button" class="btn btn-orange btn-rounded">Button Rounded</button>

Sizes

All the types of buttons you could need.

Exmaple

<p>
  <button type="button" class="btn btn-primary btn-xxlg">XXLarge button</button>
  <button type="button" class="btn btn-default btn-xxlg">XXLarge button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xlg">XLarge button</button>
  <button type="button" class="btn btn-default btn-xlg">XLarge button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Color Swatches

We use the beautiful color swatches of Flaut UI.

You can use it as background colors for any block of headers, contents, or footers.

Exmaple

#1ABC9C
Turquoise

#1ABC9C
Green Sea

#1ABC9C
Emerald

#1ABC9C
Nephritis

#1ABC9C
Peter-river

#1ABC9C
Belize-hole

#1ABC9C
Amethyst

#1ABC9C
Wisteria

#1ABC9C
Wet Asphalt

#1ABC9C
Midnight Blue

#1ABC9C
Sun Flower

#1ABC9C
Orange

#1ABC9C
Carrot

#1ABC9C
Pumpkin

#1ABC9C
Alizarin

#1ABC9C
Pomegranate

#1ABC9C
Clouds

#1ABC9C
Silver

#1ABC9C
Concrete

#1ABC9C
Asbesto

<!-- Change the background of a content -->
<section class="content-1 bkg-turquoise">
  ...
</section>