Bakers.

Responsive HTML5 Template with Bootstrap

Files Structure

- assets/css                    (Template CSS)
- assets/images                    (All Images)
- assets/jquery                 (Bootstrap jquery)
- assets/js                     (Bootstrap JS)
- assets/js                     (Wow carousel)

 

HTML Structure

The template is based on Bootstrap Framework - http://getbootstrap.com/
The default Bootstrap grid system utilizes 12 columns, making for a 1170px wide depending on your viewport.
Below 480px viewports, the columns become fluid and stack vertically.
 
Create a .row and add the appropriate number of .col-* columns.
  
<div class="row">

       { Level 1 column }

        <div class="row">
            <div class="col-6"> { Level 2 } </div>
            <div class="col-6"> { Level 2 } </div>
        </div>

</div>

If you need more information, please visit this site: http://getbootstrap.com/css/#grid

CSS Structure

The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:
  
- assets/
  - css/
    - style.css                 - (Main Custom Css file)
    - animate.css               - (CSS Animation file)

    - bootstrap/bootstrap.min.css - (Bootstrap Minified CSS file)

JavaScript

jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/
 
All the JavaScript libraries and files are included at the bottom of every HTML page like this: 
<!-- Main Jquery JS -->
<script src="./assets/jquery/jquery-3.5.1.min.js" type="text/javascript"></script>
<!-- Bootstrap JS -->
<script src="./assets/js/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<!-- Wow JS -->
<script src="./assets/js/wow.min.js" type="text/javascript"></script>
<!-- Custom JS -->

 

Fonts

To change the embedded font, please take a look in the head part of assets/css/theme.css:
  
            <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet">
            <href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap" rel="stylesheet">
            <link href="https://fonts.googleapis.com/css2?family=Clicker+Script&display=swap" rel="stylesheet">

 

To change the font, first go to http://www.google.com/webfonts choose a font and add the generated code to the top of global.css.
 
Then edit --header-font or --text-font in
  
:root {
  --header-font: Clicker Script;
  --text-font: Airbnb Cereal App;
  --nav-font: 'Varela Round', sans-serif;
  --primary-color: #4070ff;
  --secondary-color: #EFEFEF
  --grey-color: #e0e0e0;
  --dark-color: #333;
  --white-color: #fff;
}

Icons

All font are located in the images directory
 
 

We are using svg fonts which you can get more and add to assets/images/icons

Sliders

 
 
 
 
 

 
 
 
jQuery - http://www.jquery.com/
Bootstrap Framework - http://getbootstrap.com/
Popper Js - https://popper.js.org/
animate.css - http://daneden.me/animate
wow.js - http://mynameismatthieu.com/WOW/