Introduction
The Connect UI Framework is a premium Web Application Admin Dashboard built on top of MaterializeCSS Framework. It was created to be the most functional, clean and well designed theme for any types of backend applications. We have carefully designed all common elements.
We love when all updates are free. Once you’ve purchased Connect, you’ll be able to download all future updates. If you like our theme don’t forget to rate us five stars. Good rating provides more and better updates in future!
If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!
Folder Structure
theme/
├─ assets/
│ ├─ css/
│ ├─ images/
│ ├─ js/
│ │ └─ pages/
│ └─ plugins/
└─ templates/
├─ admin1/
└─ admin2/
HTML Structure
Head
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Responsive Admin Dashboard Template">
<meta name="keywords" content="admin,dashboard">
<meta name="author" content="stacks">
<!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Title -->
<title>Connect - Responsive Admin Dashboard Template</title>
<!-- Styles -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
<link href="../../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../../assets/plugins/font-awesome/css/all.min.css" rel="stylesheet">
<!-- Theme Styles -->
<link href="../../assets/css/connect.min.css" rel="stylesheet">
<link href="../../assets/css/dark_theme.css" rel="stylesheet">
<link href="../../assets/css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Body
<body>
<div class='loader'>
<div class='spinner-grow text-primary' role='status'>
<span class='sr-only'>Loading...</span>
</div>
</div>
<div class="connect-container align-content-stretch d-flex flex-wrap">
<div class="page-sidebar">
<div class="logo-box"><a href="#" class="logo-text">Connect</a><a href="#" id="sidebar-close"><i class="material-icons">close</i></a> <a href="#" id="sidebar-state"><i class="material-icons">adjust</i><i class="material-icons compact-sidebar-icon">panorama_fish_eye</i></a></div>
<div class="page-sidebar-inner slimscroll">
<ul class="accordion-menu">
<li class="sidebar-title">
Apps
</li>
<li class="active-page">
<a href="index.html" class="active"><i class="material-icons-outlined">dashboard</i>Dashboard</a>
</li>
<li>
<a href="mailbox.html"><i class="material-icons-outlined">inbox</i>Mailbox</a>
</li>
<li>
<a href="profile.html"><i class="material-icons-outlined">account_circle</i>Profile</a>
</li>
<li>
<a href="file-manager.html"><i class="material-icons">cloud_queue</i>File Manager</a>
</li>
<li>
<a href="calendar.html"><i class="material-icons-outlined">calendar_today</i>Calendar</a>
</li>
<li>
<a href="todo.html"><i class="material-icons">done</i>Todo</a>
</li>
<li class="sidebar-title">
UI Elements
</li>
<li>
<a href="#"><i class="material-icons">text_format</i>Styles<i class="material-icons has-sub-menu">add</i></a>
<ul class="sub-menu">
<li>
<a href="styles-typography.html">Typography</a>
</li>
<li>
<a href="styles-code.html">Code</a>
</li>
<li>
<a href="styles-tables.html">Tables</a>
</li>
<li>
<a href="styles-icons.html">Icons</a>
</li>
</ul>
</li>
<li>
<a href=""><i class="material-icons">apps</i>Components<i class="material-icons has-sub-menu">add</i></a>
<ul class="sub-menu">
<li>
<a href="ui-alerts.html">Alerts</a>
</li>
<li>
<a href="ui-badge.html">Badge</a>
</li>
<li>
<a href="ui-breadcrumb.html">Breadcrumb</a>
</li>
<li>
<a href="ui-buttons.html">Buttons</a>
</li>
<li>
<a href="ui-card.html">Card</a>
</li>
<li>
<a href="ui-collapse.html">Collapse</a>
</li>
<li>
<a href="ui-dropdowns.html">Dropdowns</a>
</li>
<li>
<a href="ui-list-group.html">List Group</a>
</li>
<li>
<a href="ui-modal.html">Modal</a>
</li>
<li>
<a href="ui-pagination.html">Pagination</a>
</li>
<li>
<a href="ui-popovers.html">Popovers</a>
</li>
<li>
<a href="ui-progress.html">Progress</a>
</li>
<li>
<a href="ui-spinners.html">Spinners</a>
</li>
<li>
<a href="ui-toast.html">Toast</a>
</li>
<li>
<a href="ui-tooltips.html">Tooltips</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="material-icons">card_giftcard</i>Extended<i class="material-icons has-sub-menu">add</i></a>
<ul class="sub-menu">
<li>
<a href="extended-select2.html">Select2</a>
</li>
<li>
<a href="extended-datatables.html">Data Tables</a>
</li>
<li>
<a href="extended-blockui.html">Block UI</a>
</li>
<li>
<a href="extended-session.html">Session Timeout</a>
</li>
<li>
<a href="extended-tree.html">Tree View</a>
</li>
</ul>
</li>
<li>
<a href="charts.html"><i class="material-icons">bar_chart</i>Charts</a>
</li>
<li>
<a href="forms.html"><i class="material-icons">input</i>Forms</a>
</li>
<li class="sidebar-title">
Other
</li>
<li>
<a href=""><i class="material-icons">star_border</i>Pages<i class="material-icons has-sub-menu">add</i></a>
<ul class="sub-menu">
<li>
<a href="404.html">404</a>
</li>
<li>
<a href="500.html">500</a>
</li>
<li>
<a href="sign-in.html">Sign In</a>
</li>
<li>
<a href="sign-up.html">Sign Up</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="material-icons">bookmark_border</i>Documentation</a>
</li>
<li>
<a href="#"><i class="material-icons">access_time</i>Change Log</a>
</li>
</ul>
</div>
</div>
<div class="page-container">
<div class="page-header">
<nav class="navbar navbar-expand">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav">
<li class="nav-item small-screens-sidebar-link">
<a href="#" class="nav-link"><i class="material-icons-outlined">menu</i></a>
</li>
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="../../assets/images/avatars/profile-image-1.png" alt="profile image">
<span>Nancy Moore</span><i class="material-icons dropdown-icon">keyboard_arrow_down</i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Calendar<span class="badge badge-pill badge-info float-right">2</span></a>
<a class="dropdown-item" href="#">Settings & Privacy</a>
<a class="dropdown-item" href="#">Switch Account</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Log out</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><i class="material-icons-outlined">mail</i></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><i class="material-icons-outlined">notifications</i></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" id="dark-theme-toggle"><i class="material-icons-outlined">brightness_2</i><i class="material-icons">brightness_2</i></a>
</li>
</ul>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Projects</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Tasks</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Reports</a>
</li>
</ul>
</div>
<div class="navbar-search">
<form>
<div class="form-group">
<input type="text" name="search" id="nav-search" placeholder="Search...">
</div>
</form>
</div>
</nav>
</div>
<div class="page-content">
<div class="page-info">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Apps</a></li>
<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
</ol>
</nav>
<div class="page-options">
<a href="#" class="btn btn-secondary">Settings</a>
<a href="#" class="btn btn-primary">Upgrade</a>
</div>
</div>
<div class="main-wrapper">
</div>
</div>
<div class="page-footer">
<div class="row">
<div class="col-md-12">
<span class="footer-text">2019 © stacks</span>
</div>
</div>
</div>
</div>
</div>
<!-- Javascripts -->
<script src="../../assets/plugins/jquery/jquery-3.4.1.min.js"></script>
<script src="../../assets/plugins/bootstrap/popper.min.js"></script>
<script src="../../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../../assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="../../assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="../../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
<script src="../../assets/plugins/blockui/jquery.blockUI.js"></script>
<script src="../../assets/plugins/flot/jquery.flot.min.js"></script>
<script src="../../assets/plugins/flot/jquery.flot.time.min.js"></script>
<script src="../../assets/plugins/flot/jquery.flot.symbol.min.js"></script>
<script src="../../assets/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../../assets/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="../../assets/js/connect.min.js"></script>
<script src="../../assets/js/pages/dashboard.js"></script>
</body>
Code
All theme CSS files are located in theme/assets/css folder. For your CSS customization you can use theme/assets/css/custom.css. Keep your custom CSS separate it makes more easier when updating the theme in future.
All Javascript files are located in source/assets/js/ folder. Also Page-level Javascript files are located in theme/assets/js/pages/ folder and each page has its own Javascript file. For your Javascripts you can use theme/assets/js/custom.js. Keep your custom Javascript separate it makes more easier when updating the theme in future.
Fonts
Connect uses Lato font as primary font for texts and Montserrat font for some components. It must be loaded in HTML Head before other CSS files.
Font code example:
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap" rel="stylesheet">
Connect also uses Material and Fontawesome icons.
CSS Utilities
All available Helper Classes in Connect:
| Prefix | Second Prefix (side) | third Prefix | Suffix (value) | |
|---|---|---|---|---|
| Margin | m | t,r,b,l | n (only for negative values) | xxs, xs, sm, md, lg, xxl |
| Padding | p | v,h (top & bottom, left & right) | xxs, xs, sm, md, lg, xxl |
.no-s Removes margins & paddings
.no-m Removes margins
.no-p Removes paddings
.no-p-h Removes paddings from left & right
.no-p-v Removes Paddings from top & bottom
.no-b Removes borders
.b Adds border from all sides
.b-t, .b-r, .b-b, .b-l Adds border from top, right, bottom, left
.b-default, .b-primary, .b-success, .b-info, .b-warning, .b-danger Adds border by contextual colors, see colors doc.
.b-2, .b-3, .b-4 Border size
.b-n-t, .b-n-r, .b-n-b, .b-n-l Removes border from top, right, bottom, left
.no-r Removes border radius
.r Adds border radius
.r-t-l, .r-t-r, .r-b-l, .r-b-r Adds border radius From top-left, top-right, bottom-left, bottom-right sides.
.no-r-t-l, .no-r-t-r, .no-r-b-l, .no-r-b-r Removes border radius From top-left, top-right, bottom-left, bottom-right sides.
Themes
Connect comes with four unique themes.
HTML files for all themes are located in themes/ in different folders.
Dark theme can be used on all theme versions. Simply click on the brightness_2 icon to switch between dark and light themes.
In order to manually change to dark theme from HTML, you will need to add .dark-theme class to body tag.
New Page
It's very easy to create a new page with Connect.
You can use all components that are shown in the live preview. Note, all content should be placed in .main-wrapper to fit the page correctly.
If you will use component that needs some JS codes which are included in component demo page at the end of the HTML body tag, you can just include the same JS file. If you will use component that needs an extra plugin to work, you have to include files of this plugins as they are included in the preview page.
References
| Plugin | Official Website |
|---|---|
| Apex Charts | https://apexcharts.com/ |
| Bootstrap | http://getbootstrap.com/ |
| BlockUI | http://malsup.com/jquery/block/ |
| Chartjs | http://www.chartjs.org/ |
| DataTables | https://datatables.net/ |
| FontAwesome | http://fontawesome.io/ |
| FullCalendar | https://fullcalendar.io/docs |
| Idle Timer | https://github.com/thorst/jquery-idletimer/ |
| Jquery | https://jquery.com/ |
| TreeJS | http://jstree.com/ |
| Flotcharts | http://nvd3.org/ |
| D3 | hhttps://d3js.org/ |
| NVD3 | https://omnipotent.net/jquery.sparkline/ |
| Slimscroll | http://rocha.la/jQuery-slimScroll/ |
| Select2 | https://select2.org/ |
| Sparkline | https://omnipotent.net/jquery.sparkline/ |
Support
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.