The files for this project are found in the 06_Code_Begin
exercise files. As in all previous projects, Bootstrap 3 LESS, JavaScript, and markup patterns provide the core of our code base, rounded out by the HTML5 Boilerplate and Font Awesome icon font.
The folder and file structure is very similar to what we've used in the previous projects in this book. Let me briefly recap some of the features of our LESS files:
/less/bootstrap/
folder./less/font-awesome/
.less
folder and begin with an underscore, making it easy to spot them. Custom LESS files here include:__main.less
: This is the main file that imports all the others and is the file that you should compile to css/main.css
_variables.less
: This is based on Bootstrap's variables with a few customizations_navbar.less
: This provides navbar customization_page-contents.less
: This provides styles for the content area of our pages_footer.less
: This provides styles for the footer area of our pagesYou will have seen the preceding features in previous projects.
Here is what's distinctive about this set of files:
_variables.less
: I have adjusted a number of variables, especially for the navbar. I've sought to indicate these with comments._navbar.less
: This constrains the size of the site logo image and lays it at the beginning of a visual aesthetic that fits our assignment.index.html
file has much of the markup we need already in place.img
folder. They've been scaled, cropped, and optimized for the Web and are already plugged into their appropriate places in the markup.Before we begin, let's see how this currently appears in a web browser.