Introduction

Welcome to the Blueberry UI Library. You can easily create a responsive web site using Blueberry. Use copy to clipboard feature and build responsive Websites. The index.html file in the example folder that you received with the download package is considered the root path for all components and resources. You can change the route according to your needs.

Download package

Download package contains two main assets/, html/ folders. Once downloaded, unzip the compressed folder and you'll see something like this:

Blueberry/
- assets/
  - css/
  - img/
  - js/
  - svg/
  - vendor/
  - video/
- html/
  - blog/
  - course/
  - Example/
  - help-desk/
- favicon.ico

HTML

html/ is the source for HTML pages and contains HTML templates, which you see in the Templates. These HTML files can be opened easily in any browser, imported to any project or modified to suit your needs.

Assets

assets/.. includes all the assets that are referenced in the HTML pages. Below given folders are used in the template:

css - CSS files
img - Images
js - JavaSscript files
svg - SVG files
vendor - Third-party libraries
video - Video sources

Starter template

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 -->
                  <title>Hello, world!</title>

                  <!-- Required Meta Tags Always Come First -->
                  <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">

                  <!-- Font -->
                  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" rel="stylesheet">

                  <!-- CSS Blueberry Template -->
                  <link rel="stylesheet" href="../../assets/css/theme.css">
                </head>
                <body>
                  <h1>Hello, world!</h1>

                  <!-- JS Global Compulsory -->
                  <script src="../../assets/vendor/jquery/dist/jquery.min.js"></script>
                  <script src="../../assets/vendor/jquery-migrate/dist/jquery-migrate.min.js"></script>
                  <script src="../../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

                  <!-- JS Blueberry -->
                  <script src="../../assets/js/hs.core.js"></script>
                </body>
                </html>

Advantages

There is no need to use a separate bootstrap when using the Blueberry UI.
You can use Blueberry UI's premium quality unique library which is given at the beginning of the documentation for free.
The components of the example section are ready for live website developments.
There are many premium components that are provided to you for free.
Many third party JavaScript plugins have been added to BlueBerry and you can get them all in one place.
In 10 to 20 minutes you will be able to develop an advanced level web site according to your needs using the prepared blueberry components.
In addition, Blueberry UI will save a lot of time for developers and help newcomers to become advanced frontend designers in just a few days.