“Facebook Design” Documentation by “Sean Ngu” v6.0.0
Updated on: 25/August/2026
By: Sean Ngu
If you have any inquiries or require further assistance beyond what is covered in this help file,
please do not hesitate to send us a message
through Wrapbootstrap. We are more than happy to help.
Thank you very much!
This template can be used as an fluid layout with a max of 12 columns next to each other. The general template structure is the same throughout the template. Here is the general structure.
<!-- BEGIN #loader -->
<div id="loader" class="app-loader">
<span class="spinner"></span>
</div>
<!-- END #loader -->
<!-- BEGIN #app -->
<div id="app" class="app app-header-fixed app-sidebar-fixed">
<!-- BEGIN #appHeader -->
<div id="appHeader" class="app-header" data-bs-theme="dark"></div>
<!-- END #appHeader -->
<!-- BEGIN #sidebar -->
<div id="sidebar" class="app-sidebar">
<!-- BEGIN scrollbar -->
<div class="app-sidebar-content" data-scrollbar="true" data-height="100%"></div>
<!-- END scrollbar -->
</div>
<div class="app-sidebar-bg"></div>
<div class="app-sidebar-mobile-backdrop">
<a href="#" data-dismiss="app-sidebar-mobile" class="stretched-link"></a>
</div>
<!-- END #sidebar -->
<!-- BEGIN #content -->
<div id="content" class="app-content"></div>
<!-- END #content -->
<!-- BEGIN theme-panel -->
<div class="theme-panel"></div>
<!-- END theme-panel -->
<!-- BEGIN scroll-top-btn -->
<a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top"
data-toggle="scroll-to-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- END scroll-top-btn -->
</div>
<!-- END #app -->
Page head contains metadata, javascript and css files:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Color Admin | Facebook Design</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <meta content="" name="description" /> <meta content="" name="author" /> <!-- ================== BEGIN core-css ================== --> <link href="../assets/css/vendor.min.css" rel="stylesheet" /> <link href="../assets/css/facebook/app.min.css" rel="stylesheet" /> <!-- ================== END core-css ================== --> <!-- OR without vendor.min.css --> <!-- ================== BEGIN core-css ================== --> <link href="../assets/plugins/animate.css/animate.min.css" rel="stylesheet" /> <link href="../assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" /> <link href="../assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" /> <link href="../assets/plugins/pace-js/themes/black/pace-theme-flash.css" rel="stylesheet" /> <link href="../assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" /> <link href="../assets/css/facebook/app.min.css" rel="stylesheet" /> <!-- ================== END core-css ================== --> </head> <body>
<!-- BEGIN #appHeader -->
<div id="appHeader" class="app-header" data-bs-theme="dark">
<!-- BEGIN brand -->
<div class="brand">
<a href="index.html" class="brand-logo">
<i class="fab fa-facebook-square fa-lg"></i>
<b>Color</b> Admin
<small>social</small>
</a>
<button type="button" class="menu-toggler" data-toggle-class="app-sidebar-mobile-toggled" data-toggle-target=".app">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- END brand -->
<!-- BEGIN header-nav -->
<div class="menu">
<div class="menu-item menu-item-form">
<form action="" method="POST" name="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter keyword" />
<button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
...
<div class="menu-item menu-profile dropdown">
<a href="#" class="menu-link dropdown-toggle d-flex align-items-center"
data-bs-toggle="dropdown">
<img src="../assets/img/user/user-13.jpg" alt="" />
<span class="d-none d-md-inline">Adam Schwartz</span> <b class="caret ms-6px"></b>
</a>
<div class="dropdown-menu dropdown-menu-end me-1">
...
</div>
</div>
</div>
<!-- END header-nav -->
</div>
<!-- END #appHeader -->
<!-- BEGIN #sidebar -->
<div id="sidebar" class="app-sidebar">
<!-- BEGIN scrollbar -->
<div class="app-sidebar-content" data-scrollbar="true" data-height="100%">
<!-- BEGIN menu -->
<div class="menu">
<div class="menu-header">Navigation</div>
<div class="menu-item has-sub">
<a href="javascript:;" class="menu-link">
<div class="menu-icon">
<i class="fa fa-th-large"></i>
</div>
<div class="menu-text">Dashboard</div>
<div class="menu-caret"></div>
</a>
<div class="menu-submenu">
<div class="menu-item">
<a href="index.html" class="menu-link"><div class="menu-text">Dashboard v1</div></a>
</div>
</div>
</div>
<!-- BEGIN minify-button -->
<div class="menu-item d-flex">
<a href="javascript:;" class="app-sidebar-minify-btn ms-auto" data-toggle="app-sidebar-minify"><i class="fa fa-angle-double-left"></i></a>
</div>
<!-- END minify-button -->
</div>
<!-- END menu -->
</div>
<!-- END scrollbar -->
</div>
<div class="app-sidebar-bg"></div>
<div class="app-sidebar-mobile-backdrop">
<a href="#" data-dismiss="app-sidebar-mobile" class="stretched-link"></a>
</div>
<!-- END #sidebar -->
Page content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below:
<!-- BEGIN #content -->
<div id="content" class="app-content">
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:;">Page Options</a></li>
<li class="breadcrumb-item active">Blank Page</li>
</ol>
<!-- END breadcrumb -->
<!-- BEGIN page-header -->
<h1 class="page-header">Blank Page <small>header small text goes here...</small></h1>
<!-- END page-header -->
</div>
<!-- END #content -->
Javascript files loaded in the end of page. This will reduce page load time.
<!-- ================== BEGIN core-js ================== --> <script src="../assets/js/vendor.min.js"></script> <script src="../assets/js/app.min.js"></script> <!-- ================== END core-js ================== --> <!-- OR without vendor.min.js --> <!-- ================== BEGIN core-js ================== --> <script src="../assets/plugins/pace-js/pace.min.js"></script> <script src="../assets/plugins/jquery/dist/jquery.min.js"></script> <script src="../assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script> <script src="../assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="../assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script> <script src="../assets/plugins/js-cookie/dist/js.cookie.js"></script> <script src="../assets/js/app.min.js"></script> <!-- ================== END core-js ================== --> </body> </html>
Add the theme to the <body> tag in order to change the theme color.
<body class="theme-red">...</body> <body class="theme-pink">...</body> <body class="theme-orange">...</body> <body class="theme-yellow">...</body> <body class="theme-lime">...</body> <body class="theme-green">...</body> <body class="theme-teal">...</body> <body class="theme-cyan">...</body> <body class="theme-blue">...</body> <body class="theme-purple">...</body> <body class="theme-indigo">...</body> <body class="theme-black">...</body> <body class="theme-gray-100">...</body> <body class="theme-gray-200">...</body> <body class="theme-gray-300">...</body> <body class="theme-gray-400">...</body> <body class="theme-gray-500">...</body> <body class="theme-gray-600">...</body> <body class="theme-gray-700">...</body> <body class="theme-gray-800">...</body> <body class="theme-gray-900">...</body>
Add the data-bs-theme="dark" attribute to <html> in order to enable the dark mode.
<html data-bs-theme="dark">
Add the dir="rtl" attribute to <html> in order to enable Right-To-Left (RTL) layout direction.
<html dir="rtl">
This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.
Here is the general structure for the each case of page options.
<!-- BEGIN #app --> <div id="app" class="app app-without-sidebar"> <!-- BEGIN #sidebar --> <div id="sidebar" class="app-sidebar"> <!-- END #sidebar -->
<!-- BEGIN #app -->
<div id="app" class="app app-with-two-sidebar">
<!-- BEGIN #sidebar -->
<div id="sidebar" class="app-sidebar"></div>
<div class="app-sidebar-bg"></div>
<div class="app-sidebar-mobile-backdrop">
<a href="#" data-dismiss="app-sidebar-mobile" class="stretched-link"> </a>
</div>
<!-- END #sidebar -->
<!-- BEGIN #sidebar-right -->
<div id="sidebar-right" class="app-sidebar app-sidebar-end"></div>
<div class="app-sidebar-bg app-sidebar-end"></div>
<div class="app-sidebar-mobile-backdrop app-sidebar-end">
<a href="#" data-dismiss="app-sidebar-end-mobile" class="stretched-link"> </a>
</div>
<!-- END #sidebar-right -->
<!-- BEGIN #app --> <div id="app" class="app app-without-header"> ...
<!-- BEGIN #app --> <div id="app" class="app"> <!-- BEGIN #appHeader --> <div id="appHeader" class="app-header" data-bs-theme="dark">
<!-- BEGIN #app --> <div id="app" class="app app-header-fixed"> <!-- BEGIN #appHeader --> <div id="appHeader" class="app-header">
<!-- BEGIN #app --> <div id="app" class="app"> <!-- BEGIN #appHeader --> <div id="appHeader" class="app-header">
<!-- BEGIN #app -->
<div id="app" class="app">
<!-- BEGIN #sidebar -->
<div id="sidebar" class="app-sidebar">
...
</div>
<div class="app-sidebar-bg"></div>
<!-- END #sidebar -->
<!-- BEGIN #app --> <div id="app" class="app aopp-sidebar-fixed"> <!-- BEGIN #sidebar --> <div id="sidebar" class="app-sidebar">
<!-- BEGIN #app --> <div id="app" class="app app-sidebar-minified"> <!-- BEGIN #sidebar --> <div id="sidebar" class="app-sidebar">
<!-- BEGIN #app --> <div id="app" class="app app-with-end-sidebar"> <!-- BEGIN #sidebar --> <div id="sidebar" class="app-sidebar">
<!-- BEGIN #app --> <div id="app" class="app app-gradient-enabled">
<!-- BEGIN #app -->
<div id="app" class="app app-content-full-height">
<!-- BEGIN #content -->
<div id="content" class="app-content p-0">
<div class="overflow-hidden h-100">
<div data-scrollbar="true" data-height="100%" data-skip-mobile="true"
class="app-content-padding">
...
</div>
</div>
</div>
<!-- END #content -->
</div>
<!-- END #app -->
If you wish to remove the page loading animation, you just need to remove the #loader from #app
from
<!-- BEGIN #loader --> <div id="loader" class="app-loader"> <span class="spinner"></span> </div> <!-- END #loader -->
Run the following commands from the Gulp source directory to install dependencies and compile the SCSS. If you are new to the gulpjs, you may refer to their official website for installation guide.
<!-- run the following command --> cd /your-path-url/admin/src/ npm install npx gulp facebook <!-- available command --> npx gulp plugins // generate plugins <!-- available theme command --> npx gulp // default theme npx gulp material // material theme npx gulp apple // apple theme npx gulp transparent // transparent theme npx gulp facebook // facebook theme npx gulp google // google theme
Verify that you are running at least node 22.x.x or later and npm 11.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
Gulp combines the required JavaScript and CSS assets into generated vendor files, which simplifies deployment and reduces the number of requests.
If you wish to edit the included plugins files, you may refer to the /admin/src/gulpfile.js.
Below is the list of plugins that compile into vendor.min.css.
return gulp.src([
'node_modules/animate.css/animate.min.css',
'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
'node_modules/jquery-ui-dist/jquery-ui.min.css',
'node_modules/pace-js/themes/black/pace-theme-flash.css',
'node_modules/perfect-scrollbar/css/perfect-scrollbar.css'
])
.pipe(sass())
.pipe(concat('vendor.min.css'))
.pipe(minifyCSS())
.pipe(gulp.dest(distPath + '/assets/css/'))
.pipe(livereload());
Below is the code that compile Color Admin scss with Bootstrap scss into app.min.css.
return gulp.src([
'scss/facebook/styles.scss'
])
.pipe(sass())
.pipe(concat('app.min.css'))
.pipe(minifyCSS())
.pipe(gulp.dest(distPath + '/assets/css/facebook/'))
.pipe(livereload());
Below is the list of plugins that compile into vendor.min.js.
return gulp.src([
'node_modules/pace-js/pace.min.js',
'node_modules/jquery/dist/jquery.min.js',
'node_modules/jquery-ui-dist/jquery-ui.min.js',
'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
'node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js',
'node_modules/js-cookie/dist/js.cookie.js'
])
.pipe(sourcemaps.init())
.pipe(concat('vendor.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(distPath + '/assets/js/'))
.pipe(livereload());
Below is the code that compile Color Admin js file into app.min.js.
return gulp.src([
'js/app.js',
])
.pipe(uglify())
.pipe(rename('app.min.js'))
.pipe(gulp.dest(distPath + '/assets/js/'))
.pipe(livereload());
To change the color theme or primary color, edit the relevant _variables.scss file. Use npm to update dependencies when needed.
admin/src/
├── gulpfile.js
├── package.json
├── js/
└── scss/
├── facebook/
│ ├── _app.scss
│ ├── _functions.scss
│ ├── _helper.scss
│ ├── _layout.scss
│ ├── _mixins.scss
│ ├── _pages.scss
│ ├── _plugins.scss
│ ├── _root.scss
│ ├── _reboot.scss
│ ├── _ui.scss
│ ├── _utilities.scss
│ ├── _variables-dark.scss
│ ├── _variables.scss
│ ├── styles.scss
│ ├── app/
│ ├── images/
│ ├── layout/
│ ├── mixins/
│ ├── pages/
│ ├── plugins/
│ └── ui/
├── apple/
├── default/
├── material/
├── transparent/
└── google/