Introduction
About #
Stream UI Kit is beautiful Open Source Bootstrap 4 UI Kit under MIT license. The UI Kit comes with 5 beautiful complete pages and includes over 20 reusable and customizable UI Blocks.
Stream 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:
stream-ui-kit-v1.0/
├── assets/
│ ├── css/
│ │ ├── styles.css
│ │ ├── min.styles.css
│ ├── img/
│ │ ├── ...
│ ├── img-temp/
│ │ ├── ...
│ ├── include/
│ │ ├── scss/
│ │ │ ├── ...
│ ├── js/
│ │ ├── global.js
│ │ ├── ...
│ ├── vendor/
│ │ ├── bootstrap/
│ │ ├── chartist-js/
│ │ ├── ...
├── README.md
├── package.json
├── gulpfile.js
├── index.html
├── home-page.html
├── services.html
├── about-us.html
├── about-me.html
├── contacts.html
├── starter-template.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 Unify 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/global.js"></script>
<!-- END JAVASCRIPTS -->
</body>
</html>
That’s all you need for overall page requirements. We have included the Starter Template starter-template.html page where you can start your project from scratch.
Base UI
Colors #
We've updated Bootstrap’s default colors to brighter and trendy color variations in order to improve the contrast and design.
-
#59287a .bg-primary.text-primary
-
#00c9a7 .bg-secondary.text-secondary
-
#0dd157 .bg-success.text-success
-
#fb4143 .bg-danger.text-danger
-
#fab633 .bg-warning.text-warning
-
#2972fa .bg-info.text-info
-
#1b1e24 .bg-dark.text-dark
-
#f6f9fc .bg-light.text-light
-
#fff .bg-white.text-white
Typography #
Bootstrap sets basic global display, typography, and link styles. Learn more about options of Boostrap Typography here. When more control is needed, check out the textual utility classes.
Google Fonts
Open Sans Google web font is used as a primary font family in Stream - UI Kit. Additionally, Playfair Display font family is used as a secondary (accent) font family. Choose and use over 600 fonts from Google Fonts library.
Aa
Open Sans
Playfair Display
Light
AaBbCcDd
Regular
AaBbCcDd
Bold
AaBbCcDd
Numbers (Light)
0123456789
Aa
Open Sans
Playfair Display
Light
AaBbCcDd
Regular
AaBbCcDd
Bold
AaBbCcDd
Numbers (Light)
0123456789
Headings
All HTML headings, <h1> through <h6>, are available.
| Heading | Example |
|---|---|
|
|
h1. Bootstrap heading |
|
|
h2. Bootstrap heading |
|
|
h3. Bootstrap heading |
|
|
h4. Bootstrap heading |
|
|
h5. Bootstrap heading |
|
|
h6. Bootstrap heading |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
Display Headings
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
| Display Classes | Example |
|---|---|
|
|
Display 1 |
|
|
Display 2 |
|
|
Display 2 |
|
|
Display 4 |
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
Lead
Make a paragraph stand out by adding .lead.
This is Lead text and looks pretty awesome! Let's use this lead feature in other content blocks in future.
<p class="lead">This is Lead text and looks pretty awesome...</p>
Blockquotes
For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote-v1"> around any HTML as the quote.
Left Bordered Blockquotes
Use .blockquote--left class for left bordered blockquote
"This UI Kit is damn great! It is really beautiful nice UI Kit which offers quite a large set of options and the coding is done quickly and seamlessly. Thank you!"
<!-- Left Bordered -->
<blockquote class="blockquote-v1 blockquote-v1--left">
<p>"This UI Kit is damn great! It is really beautiful nice UI Kit which offers quite a large set of options and the coding is done quickly and seamlessly. Thank you!"</p>
<footer class="blockquote-footer">User feedback</footer>
</blockquote>
<!-- End Left Bordered -->
Centered Blockquotes
Use .text-center class for centered blockquote.
"This UI Kit is damn great! It is really beautiful nice UI Kit which offers quite a large set of options and the coding is done quickly and seamlessly. Thank you!"
<!-- Centered Blockquotes -->
<blockquote class="blockquote-v1 text-center">
<p>"This UI Kit is damn great! It is really beautiful nice UI Kit which offers quite a large set of options and the coding is done quickly and seamlessly. Thank you!"</p>
<footer class="blockquote-footer">User feedback</footer>
</blockquote>
<!-- End Centered Blockquotes -->
Right Bordered Blockquotes
Use .blockquote--right class for right bordered blockquote.
"This UI Kit is damn great! It is really beautiful nice UI Kit which offers quite a large set of options and the coding is done quickly and seamlessly. Thank you!"
<!-- Right Bordered -->
<blockquote class="blockquote-v1 blockquote-v1--right">
<p>"This UI Kit is damn great! It is really beautiful nice UI Kit which offers quite a large set of options and the coding is done quickly and seamlessly. Thank you!"</p>
<footer class="blockquote-footer">User feedback</footer>
</blockquote>
<!-- End Right Bordered -->
Images #
All images are used from Unsplash and we included 100% all image sources in our download pacakge. In addition, all images can be easliy accessed in our unsplash collection.
Icons #
We used Font Awesome icons, the web’s most popular icon set and toolkit. It includes over 950 free icons suitable for any needs.
Helper Classes #
Coming Soon..
Components
Accordions #
Coming Soon..
Others
Changelog #
Please do not forget to backup your files before the upgrade.
Version 1.0 – 18 June 2018
- Initial Release
If you would like to get notified about important updates, you may star and watch the repository on GitHub or join to our Email Newsletter and follow us on our social pages:
Credits #
First, let us take this opportunity to thank all the creative minds for their great products and hard work. All used third party libraries are located in assets/vendor/.. and image sources in assets/img-temp/..
Libraries
| Name | License | URL |
|---|---|---|
| Bootstrap | MIT | https://getbootstrap.com |
| jQuery | MIT | http://jquery.com |
| Font Awesome | CC BY 4.0 | https://fontawesome.com |
| Slick Carousel | MIT | http://kenwheeler.github.io/slick |
| jQuery Parallax | MIT & GPL | https://ianlunn.co.uk/plugins/jquery-parallax |
| Typed.js | MIT | https://mattboldt.com/demos/typed-js |
| Counter-Up | GNU-2.0 | https://github.com/bfintal/Counter-Up |
| Waypoints | MIT | https://github.com/bfintal/Counter-Up |
| Magnific Popup | MIT | http://dimsemenov.com/plugins/magnific-popup |
| Shuffle | MIT | https://vestride.github.io/Shuffle |
Fonts & Images
- Google Fonts: http://www.google.com/fonts
- Unsplash Beautiful free photos: http://unsplash.com
License #
Stream UI Kit is Open Source project and licensed under MIT for better Web.