Welcome to Fabrx UI Kit Pro documentation V.1.0.0 👋
We'll walk you through all the terminology and design elements you'll need to get the most out of this design system.

Copy & Paste

Building a page is super easy! Use the copy button with wireframes or components and paste right into your </body> tag.

Starter Page Template
<!doctype html>
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="description" content="Fabrx">
<meta name="keywords" content="Fabrx">
<meta name="author" content="Fabrx">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Fabrx - My Site</title>
<link href="assets/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<!-- Fabrx External CSS -->
<link href="assets/css/addSlider.min.css" rel="stylesheet" type="text/css" media="all">
<link href="assets/css/owl.carousel.min.css" rel="stylesheet" type="text/css" media="all">
<link href="assets/css/font-fileuploader.min.css" rel="stylesheet" type="text/css" media="all">
<link href="assets/css/jquery.fileuploader.min.css" rel="stylesheet" type="text/css" media="all">
<link href="assets/css/jquery.mCustomScrollbar.min.css" rel="stylesheet" type="text/css" media="all">
<link href="assets/css/flatpickr.min.css" rel="stylesheet" type="text/css" media="all">
<link href="assets/css/fabrx-styles.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>

  <h3>⚡️ Your Awesome Site</h3>

<!-- Fabrx Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/html5.min.js"></script>
<script src="assets/js/circle-progress.min.js"></script>
<script src="assets/js/flatpickr.min.js"></script>
<script src="assets/js/highcharts.min.js"></script>
<script src="assets/js/highcharts-more.min.js"></script>
<script src="assets/js/solid-gauge.min.js"></script>
<script src="assets/js/jquery.mCustomScrollbar.min.js"></script>
<script src="assets/js/bootstrap-4-autocomplete.min.js"></script>
<script src="assets/js/jquery.fileuploader.min.js"></script>
<script src="assets/js/Obj.min.js"></script>
<script src="assets/js/addSlider.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/jquery.waypoints.min.js"></script>
<script src="assets/js/jquery.countup.min.js"></script>
<script src="assets/js/masonry.min.js"></script>
<script src="assets/js/jquery.sticky.js"></script>
<script src="assets/js/jquery.malihu.PageScroll2id.min.js"></script>
<script src="assets/js/charts-light.js"></script>
<script src="assets/js/fabrx-scripts.js"></script>
</body>
</html>

Folder / File Structure

Once downloaded, unzip the compressed folder and you’ll see something like this:

					
Fabrx Bootstrap UI Kit Pro/
|--- assets/
|    |--- css
|    |--- fonts
|    |--- images
|    |--- js
|    |--- scss
|    |--- preview-light-layouts.html
|--- charts & tables
|    |--- charts-dark.html
|    |--- charts-light.html
|    |--- tables-dark.html
|    |--- tables-light.html
|--- components
|    |--- dark-components.html
|    |--- light-components.html
|    |--- tables-dark.html
|    |--- tables-light.html
|--- Docs
|--- fullpreview.html
|--- License Agreement
|--- my-site.html
|--- templates
|--- wireframes
|    |--- dark-layouts.html
|    |--- light-layouts.html

Style Guide

A quick overview of the typography, colors, and design language used throughout the design system.


Typography

Aa

Roboto Font Family

Fabrx UI Kit Pro uses the Roboto Font Family. To start using design source files for Sketch, Figma, or Adobe XD the font must be installed on your computer. Click here to download the Roboto Font Family.


Weights
  • Bold
  • Medium
  • Regular
  • Thin

Sizes
  • 80px
    H1
  • 60px
    H2
  • 40px
    H3
  • 30px
    H4
  • 24px
    H5
  • 20px
    H6
  • 16px
    Body
  • 14px
    Caption
  • 12px
    Small
  • 10px
    Tiny

Shapes
  • Sharp Sharp
  • 3px 3px
  • 6px 6px
  • 12px 12px
  • 24px 24px
  • 40px 40px
  • Circle Circle
  • Bottom Rounded Bottom Rounded
  • Top Rounded Top Rounded
  • Left Rounded Left Rounded
  • Right Rounded Right Rounded

Elevation
  • 20% 20%
  • 40% 40%
  • 60% 60%
  • 80% 80%
  • 100% 100%

Elevation Types
  • Light Top Light Top
  • Light Bottom Light Bottom
  • Dark Top Dark Top
  • Dark Bottom Dark Bottom

Colors

All colors come in different variations (Fill, Outline and Transparency).

  • Primary #006EFF
  • Danger #F46363
  • Success #2ED477
  • Warning #FF9138
  • Black #3F3B3B

Outline
  • 100
  • 200
  • 300
  • 400
  • 500 (Base)
  • 600
  • 700

Shades
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700


Transparency levels
  • 8%
  • 16%
  • 24%
  • 32%
  • 48%
  • 64%
  • 80%
  • 90%