Building a page is super easy! Use the copy button with wireframes or components and paste right into your </body>
tag.
<!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/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/fabrx-styles.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
⚡️ Start Pasting Snippets Here!
<!-- 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/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/purecounter.min.js"></script>
<script src="assets/js/masonry.min.js"></script>
<script src="assets/js/sticky.min.js"></script>
<script src="assets/js/bootstrap-slider.min.js"></script>
<script src="assets/js/smooth-scroll.polyfills.min.js"></script>
<script src="assets/js/fabrx-scripts.js"></script>
</body>
</html>
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
A quick overview of the typography, colors, and design language used throughout the design system.
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.
All colors come in different variations (Fill, Outline and Transparency).