Introduction
Get started with Docs UI Kit, Responsive Website Template for building responsive, mobile-first sites, with Bootstrap and a template starter page.
About
Docs UI Kit is beautiful Open Source Bootstrap 4 UI Kit under MIT license. The UI Kit comes with a lot of beautiful complete pages and includes reusable and customizable UI Blocks.
Docs UI Kit is maintained by Htmlstream team. Do not miss any updates and announcements, stay tuned on our social pages:
What’s Included
The download package includes .zip folder, please unzip the compressed folder and you’ll find the following directories and files including all raw source files:
docs-ui-kit/
├── assets/
│ ├── css/
│ │ ├── styles.css
│ │ ├── styles.min.css
│ ├── img/
│ │ ├── ...
│ ├── img-temp/
│ │ ├── ...
│ ├── include/
│ │ ├── scss/
│ │ │ ├── ...
│ ├── js/
│ │ ├── main.js
│ │ ├── ...
│ ├── vendor/
│ │ ├── bootstrap/
│ │ ├── ...
├── README.md
├── package.json
├── gulpfile.js
├── index.html
Note!
Please open pages via localhost for better experiance. Some libraries might not work properly with pages viewed via the file:// protocol like when opening a local HTML file. You may check out MAMP Webserver . It's free and available for both MacOS and Windows.
Getting Started
After unziping the download package into your folder, please open a command line and follow below detailed step by step examples.
A brief overview of the steps to your first task:
- Install Node.js and Gulp
- Install NPM modules
package.json. - Run Gulp
Install Node.js and Gulp
Installing Node.js
If you do not have Node installed already, you can get it by downloading the package installer from Node's website. Please download the stable version of Node.js (LTS) NOT the latest.
Installing Gulp
You need to have Node.js (Node) installed onto your computer before you can install Gulp. When you're done with installing Node, you can install Gulp by using the following command in the command line:
Please note, first Gulp should be installed globally and for that reason -g command is used.
npm install gulp-cli -g
Important!
Note: If you are using MacOS please use sudo keyword in the command because they need administrator rights to install Gulp globally.
Install NPM modules package.json
Installing NPM modules
First, change the command line path into your project folder. if you have not done this before, you may check the following article to quick start http://www.digitalcitizen.life/command-prompt-how-use-basic-commands
Once the path of your workflow is changed to Docs UI Kit folder, you may run package.json file by using the following command:
npm install
This time, we're installing Gulp with its all dependency plugins like gulp-sass and others. It might take a few minutes, depends on your internet connection.
Run Gulp
Now we have an integrated workflow, try it out run:
gulp
Now you can try making some changes to assets/include/scss/styles.scss and save it.
Important!
if you are updating any variables, please make sure to save _custom.bootstrap.variables.scss file. It must be refreshed when any varialbes is udated as we updated core Bootstrap codes through SASS to avoid code duplications. The file is located in the following path: assets/include/scss/vendors/bootstrap/..
OR simply re-run Gulp and all changes will be automatically up to date.
Starter Template
Start with this basic HTML starter template, or modify any included layout pages. Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
<!doctype html>
<html lang="en">
<head>
<title>Hello World!</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Web Fonts -->
<link href="//fonts.googleapis.com/css?family=Playfair+Display:400,700%7COpen+Sans:300,400,600,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="assets/vendors/bootstrap/css/bootstrap.css">
<!-- Theme Styles -->
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
</head>
<body>
<h1>Hello World!!</h1>
<!-- JAVASCRIPTS (Load javascripts at bottom, this will reduce page load time) -->
<!-- Global Vendor -->
<script src="assets/vendors/jquery.min.js"></script>
<script src="assets/vendors/jquery.migrate.min.js"></script>
<script src="assets/vendors/popper.min.js"></script>
<script src="assets/vendors/bootstrap/js/bootstrap.min.js"></script>
<!-- Theme Settings and Calls -->
<script src="assets/js/main.js"></script>
<!-- END JAVASCRIPTS -->
</body>
</html>
That's all you need for overall page requirements. Visit the Bootstrap's Layout docs our official examples to start laying out your site's content and components.
<div class="card">
<div class="card-body">
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
</div>
Important globals
Docs UI Kit employs a handful of important global styles and settings that you'll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let's dive in.
HTML5 doctype
Docs UI Kit requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups.
<!doctype html>
<html lang="en">
...
</html>
Responsive meta tag
Docs UI Kit is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">