Bakers.

Responsive HTML5 Template with Bootstrap

Files Structure

  1. - assets/css                    (Template CSS)
  2. - assets/images                    (All Images)
  3. - assets/jquery                 (Bootstrap jquery)
  4. - assets/js                     (Bootstrap JS)
  5. - 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.
  
  1. <div class="row">
  2.  
  3.        { Level 1 column }
  4.  
  5.         <div class="row">
  6.             <div class="col-6"> { Level 2 } </div>
  7.             <div class="col-6"> { Level 2 } </div>
  8.         </div>
  9.  
  10. </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:
  
  1. - assets/
  2.   - css/
  3.     - style.css                 - (Main Custom Css file)
  4.     - animate.css               - (CSS Animation file)
  5.  
  6.     - bootstrap/bootstrap.min.css - (Bootstrap Minified CSS file)
  7.  

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: 
  1. <!-- Main Jquery JS -->
  2. <script src="./assets/jquery/jquery-3.5.1.min.js" type="text/javascript"></script>
  3. <!-- Bootstrap JS -->
  4. <script src="./assets/js/bootstrap/bootstrap.min.js" type="text/javascript"></script>
  5. <!-- Wow JS -->
  6. <script src="./assets/js/wow.min.js" type="text/javascript"></script>
  7. <!-- Custom JS -->
  8.  

 

Fonts

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

 

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
  
  1. :root {
  2.   --header-font: Clicker Script;
  3.   --text-font: Airbnb Cereal App;
  4.   --nav-font: 'Varela Round', sans-serif;
  5.   --primary-color: #4070ff;
  6.   --secondary-color: #EFEFEF
  7.   --grey-color: #e0e0e0;
  8.   --dark-color: #333;
  9.   --white-color: #fff;
  10. }

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

 
 
 
 
 

 
  
  1.           
  2.
 
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/