Baker & Coffee HTML5/CSS3 Template

By: Crafted Pixels

HTML Files & Structure

Baker & Coffee is a fully responsive HTML5/CSS3 template based on Bootstrap 3, W3C Markup Validated, Retina-Ready and cross-browser compatible.

Please keep in mind that some of the features require certain conditions in order to work:

The template's main component parts are: header, content and footer. The html is heavily commented, for easy modifications, and the main structure looks like this:

<!-- header -->
<header>
    header content goes here (including main navigation)
</header>
<!-- end header -->

<!-- hero -->
<div id="hero" class="animated fadeInDown">
    hero content goes here
</section>
<!-- hero -->

<!-- content starts here -->
<div id="content">
    content sections go here
</div>
<!-- content ends here -->

<!-- footer -->
<footer>
    footer content goes here
</footer>
<!-- end footer -->


  1. Content structure:

    1. Home Page

    <!-- content starts here -->
<div id="content">
    content sections go here
</div>
<!-- content ends here -->


    2. Journal/Blog secondary pages

    <!-- content starts here -->
<div id="content">
    content sections go here
</div>
<!-- content ends here -->


CSS Files & Structure

Baker & Coffee uses five css files: bootstrap.min.css, font-awesome.min.css, animate.min.css, style.css, jquery-ui-datepicker.min.css.

With the exception of the custom css file (style.css), all the css files are minified, for performance reasons.

The css rules/styles in style.css are organized in grouped. These are the groups:

Grid

Baker & Coffee is based on Bootstrap 3 grid.

You can find more information on the Boostrap framework website getbootstrap.com, in the documentation grid section: getbootstrap.com/css/#grid.

Elements

You can find all the elements that can be used here: getbootstrap.com/components/.

Typography

Baker & Coffee uses 2 fonts (all fonts are included):

JavaScript

.js Files

To optimize performance, Baker & Coffee template includes all the scripts in the footer, before </body> tag.

The scripts included are the following (each script is explained below):

<!-- javascript -->
<script src="js/jquery-2.1.1.min.js"></script> - jQuery
<script src="js/bind-polyfill.min.js"></script> - polyfill for browsers that do not have the bind method
<script src="js/nprogress.min.js"></script> - nprogress preloader
<script src="js/bootstrap.min.js"></script> - Bootstrap .js file
<script src="js/smooth-scroll.min.js"></script> - for smooth scrolling
<script src="js/waypoints.min.js"></script> - for css3 animations
<script src="js/jquery.easing.1.3.min.js"></script> - for smooth scrolling
<script src="js/isotope.pkgd.min.js"></script> - Isotope masonry
<script src="js/jquery.magnific-popup.min.js"></script> - Magnific Popup lightbox
<script src="js/jquery.bxslider.min.js"></script> - BXSlider - used in journal/blog galleries
<script src="twitter/min/tweetie-min.js"></script> - Latest tweets app
<script src="js/tweenmax.min.js"></script> - Latest tweets animation
<script src="js/scrolltoplugin.min.js"></script> - for scrolling
<script src="js/custom.js"></script> - other custom scripts
<!-- end javascript -->

There are some additional scripts in index.html:

<script src="//maps.google.com/maps/api/js?sensor=false"></script> - for Google maps app
<script src="js/gmaps.js"></script> - for Google maps app
<script src="js/jquery-ui-datepicker.min.js"></script> - calendar for the reservation form
<script> - inline scripts for Google maps app and for the reservation form
GMaps.geocode({
    address: $('#address').html(),
    callback: function(results, status) {
        if (status == 'OK') {
            map = new GMaps({
                div: '#map',
                lat: -12.043333,
                lng: -77.028333
            });
            var latlng = results[0].geometry.location;
            map.setCenter(latlng.lat(), latlng.lng());
            map.addMarker({
                lat: latlng.lat(),
                lng: latlng.lng()
            });
        }
    }
});
$("#reservation-calendar").datepicker({
    inline: true,
    dateFormat: "dd MM yy",
    monthNames: [ "January", "February", "March", "April", "May", "June", "July", "August", 
    "September", "October", "November", "December" ]
});
</script>

Google Maps app

The Google map is automatically focusing on the address that you input in the html.

Just replace "Großer Tiergarten, Straße des 17. Juni 31 10785 Berlin Germany" with your own address in index.html file, on line 422.

Reservations form

To use the reservations form, you must replace demo@email.com with your email on line 3 of reservation.php file (located in the "reservation-form" folder). Also, the email subject can be changed, on line 4.

/** Configuration **/
$emailDestination = 'demo@email.com';
$emailSubject = 'New reservation!';


The reservation email that you receive when a reservation is made can be customized:

Please note that using the reservation form requires an actual server.

Contact form

To use the contact form, you must replace yourmail@demo.com with your email on line 49 of contact.php file (located in the "contact-form" folder).

Please note that using the contact form requires an actual server.

PSD Files

You can find the .psd files in the "PSD-files" folder.

9 .psd files are included:

To edit Baker & Coffee psd files, you must first install the necessary fonts. The download links for the fonts are in the "Sources and Credits" section of this document.


The psd files content is structured in three main groups: Header, Content and Footer.

structure
  1. Header contains: logo, main menu (closed and opened), location/open hours sign and a featured image;
    The logo is 100% editable. Three fonts were used: Nexa Rust Script L01, Nexa Rust Extras Words and Raleway (see "Sources and Credits" section for download links).

    structure
  2. Content is divided into content sections (Products, Menu, About, Gallery, Journal, Reservations and Contact);

    structure
  3. Footer is divided into Top (with three widget areas) and Bottom (with copyright).

    structure

All the layers are ordered, labeled and organized in groups.

Updates

Sources and Credits