This Boilerplate Kit's primary objective is to accelerate your development
process by providing you with all the files and code needed for working with the
most current release of Bootstrap - currently version 4.1.3. Not
only does this Kit include all the Bootstrap CSS and JS,
Holder.js scripts, but it also includes 20 fully-functional example
templates that you can fire up and begin using as a base for your project.
The installation instructions, along with features, what's included and how to use this template, are found by clicking on this article. This article contains the most up-to-date documentation for the boilerplate template kit.
- What is Included
- Getting Started
- Code of Conduct
Here is what is included in this Boilerplate Kit for
The following vendor scripts are included in the template.
The Bootstrap 4 Boilerplate Kit template for Espresso includes the following 20 template variations ranging from using parts of the framework to custom components and layouts as well as Bootstrap experiments.
Here is an overview (with screenshots) of each of the included templates in the Boilerplate Kit.
|Floating Labels: Beautifully simple forms with floating labels over your inputs.||Offcanvas: Turn your expandable navbar into a sliding offcanvas menu.|
The following screenshot outlines the various options available to you when you
create a New Project within
There is an optional Extras section which allows you to include extra configuration files that form part of most modern-day web projects.
Theme Options you will find the following settings for you to choose
These extras are:
- IE Classes: this includes markup in your HTML document for IE9 that will
display a browser upgrade message. When selecting this option a new
browser-upgrade.cssfile is included in your
/css/folder and is linked in your HTML markup. If you don't select this option then no additional markup or CSS is added to your HTML template.
- Server Extras: includes an
humans.txtfile in the root of your project folder. You can edit these files and customise them to your needs. This option is selected by default as these files are recommended but if you don't select them then none of these files are added to your project.
- Google Analytics: by including this, additional Google Analytics code is
included in your markup just before the closing
</body>tag. You have the option of inputting your Site ID at time of creating your template or, if you only create the GA tag later on, you can add the Site ID to the markup later on. If this option is unticked, no additional code is added to your markup.
- Font Awesome: includes the CSS and webfonts required for using the
Font Awesome library in your projects. To use Font Awesome
just add markup to your html like this
<i class="fa fa-star"></i>and you will get a star icon loaded in your document. If you don't select this option then the CSS and
/webfonts/directory are not copied over into your project.
Each Bootstrap template that is generated from the Boilerplate Kit contains a range of favicons that you can customise and use in your projects.
In the HTML markup for each template you will see these meta-tags:
<link rel="icon" href="favicon.ico"> <link rel="manifest" href="manifest.json"> <!-- For Android Devices. --> <meta name="msapplication-config" content="browserconfig.xml"> <!-- For Windows and Microsoft Mobile. --> <link rel="apple-touch-icon" href="img/favicons/apple-touch-icon.png"> <!-- For Apple iOS. --> <link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#563d7c"> <!-- For Safari. -->
The following breaks down what each of the meta-tags provide.
favicon.icois the first meta-tag and sits in the root of your project folder. The
favicon.icois a compiled icon image made of 16x16, 32x32 and, in some cases, 64x64 pixel images. If you don't know how to generate a
favicon.icohave a look at this resource.
manifest.jsonis used by Android devices and sits in your root folder. This json file contains the path to the various Android-specific favicon files. These files are locate in
/img/favicons/and are labelled
android-chrome-512x512.png. These are the default sizes required for most Android devices.
browserconfig.xmlis similar to the Android
manifest.jsonbut this file is specific to Windows and Microsoft devices. The
browserconfig.xmlcontains links to Microsoft-specific favicon files. These files are located in
/img/favicons/and are prefixed with
mstile-*and then the file sizes. Each of these files cover an array of Windows and Mobile device sizes.
apple-touch-iconis a link to the favicon used for iOS devices. There is only one size image for iOS devices as this is all you really need to provide but some developers choose to add more icons to cater for specific iOS devices. You don't need to add more but feel free to add more if you want.
safari-pinned-tab.svgis a link to a SVG file which is used by Safari on macOS and iOS. This is a transparent, single-colour SVG which is styled by the
color="#563d7c"class in the meta-tag. This favicon is used when people add your website to their favourites and/or bookmarks and appears under the favourite sites in Safari.
VERY IMPORTANT: The files contained in
/img/favicons/ are all Bootstrap
favicons and you will need to redesign each of the images and SVG files in this
directory (or delete what you aren't going to use in your markup). You will also
need to update the
<TileColor> contained in the
browserconfig.xml file as
well as the
background_color in the
manifest.json to your
website's primary colour used. The colours are all Bootstrap specific colours
and need changing.
These instructions will get the Bootstrap 4 Boilerplate Kit template installed
Espresso on your
You will need a copy of Espresso running on
There are two methods to installing the Boilerplate Template Kit and these are documented below.
- Download the Boilerplate Template Kit by clicking this link.
- Extract the zip folder.
- Open up your
Espresso.appapplication on your machine.
New Project(or Shift+Cmd+N)
Show Templates Folder
- Copy the extracted folder (called
bootstrap4.espressotemplate) to the
Templatesdirectory that has just opened up (see below).
The new Boilerplate Template Kit should now be available for you to use in
Espresso app when you create a New Project (see below for what you
should be seeing).
- Open up your
Terminal.appapplication on your machine.
- Run the following commands to checkout the project directly to your
$ cd ~/Library/Application\ Support/Espresso/Templates/ $ git clone https://github.com/justinhartman/bootstrap4.espressotemplate.git
You can now open up
Espresso.app and the template will be available to you
when you click on
New Project or Shift+Cmd
Please read the CONTRIBUTING.md file for details on how you can get involved in the project as well as the process for submitting bugs and pull requests.
Please read the CODE_OF_CONDUCT.md file for the guidelines that govern the community.
View the CHANGELOG.md file for a detailed list of changes, along with specific tasks completed for each version released to date.
- Justin Hartman - @justinhartman
Also see the list of contributors who have participated in this project.
This project is licensed under the
MIT License. See the
LICENSE file for full details.
Special thanks go out to the following people and projects.
- Bootstrap - for the libraries and example code that is used in this project. Without them, this project wouldn't even exist.
- Espresso - for their H5BP template that this was adapted from.
- Font Awesome - the the best icon font library in the world.
- humans.txt - for the
- robotstxt - for the
- H5BP - for providing the
.htaccessfile in the extras component.
- @justinhartman/.github - for the Github project templates.