Fabrx - Documentation

Welcome to Fabrx UI Kit Pro documentation V.1.1.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>
<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/loading-bar.min.css" rel="stylesheet" type="text/css" media="all">
<link href="assets/css/swiper-bundle.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/bootstrap-slider.min.css" rel="stylesheet" type="text/css" media="all">
<link href="assets/css/dropzone.min.css" rel="stylesheet" type="text/css" media="all">
<link href="assets/css/simplebar.min.css" rel="stylesheet" type="text/css" media="all">
<link href="assets/css/prism.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/bootstrap.bundle.min.js"></script>
<script src="assets/js/lodash.min.js"></script>
<script src="assets/js/html5.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/flatpickr.min.js"></script>
<script src="assets/js/swiper-bundle.min.js"></script>
<script src="assets/js/loading-bar.min.js"></script>
<script src="assets/js/dropzone.min.js"></script>
<script src="assets/js/simplebar.min.js"></script>
<script src="assets/js/countUp.umd.js"></script>
<script src="assets/js/masonry.min.js"></script>
<script src="assets/js/bootstrap-slider.min.js"></script>
<script src="assets/js/prism.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
3px
6px
12px
24px
40px
Circle
Bottom Rounded
Top Rounded
Left Rounded
Right Rounded

Elevation

20%
40%
60%
80%
100%

Elevation Types

Light Top
Light Bottom
Dark Top
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