Surveying the starter files

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:

  • Default Bootstrap files are in the /less/bootstrap/ folder.
  • The LESS files of the Font Awesome icon font are found in /less/font-awesome/.
  • Our custom LESS files are found directly inside the 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 pages

You will have seen the preceding features in previous projects.

Here is what's distinctive about this set of files:

  • I've applied a few custom LESS touches that are specific to this project:
    • _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.
  • The index.html file has much of the markup we need already in place.
  • Images are provided in the 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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset