Week 7: HTML imports and setting up CSS

Part of my tasks for this week included looking into web components or HTML imports for our header and starting on our CSS styles.

Header

The idea behind using web component or HTML import for our header was to reduce the amount of code we needed to write and maintain across the site.  Instead of creating the header on one page, copying it to other pages, and then editing every page when there was an update, I decided to look into alternatives.  I had a look at web components (I have used polymer in the past) but also something a bit simpler with HTML imports.

Requirements

• header and nav consistent across every page
• 'active' class needs to be applied to nav of current page
• need a log in/log out view

As most of content is static for this section, I decided to go with HTML imports as I didn't need to create a template for content reuse.  I had a look at the following tutorials: treehouse, html5rocks, sitepoint, webcomponents.org.

Step 1: Create the header 

Create a separate HTML file for the header.  No need for head or body tags, just the parts that relate to the header.  I'll go into more detail about what I put into the header when I talk about styles. I saved this as header.html

Step 2: Import HTML

Import the HTML file into the head of your index page (or page you will use it on)

Step 3: Use the HTML import on your page

This step is quite varied depending on what you want to do and how.  I did this by creating a header section in the body, and then using javascript to target the header and insert header.html. I also added in a line of jQuery to target a particular child in the nav to add the active class.

I haven't added in any script for the login yet but feel it will be easy enough to do once it is ready.

The other thing to note is the HTML imports need to run on a local server when testing (you can't just open the HTML file in your browser).  I found some really good instructions at superuser (see answer by Jake Gould) and installed MAMP.

Styles

Last week at our team meeting, we briefly discussed styles and using material design as a template. I think it is a good idea but am not overly attached if we go in another direction.

I found a version of material design theme for bootstrap which I thought would be good for our project and went down the rabbit hole of installing things.

Material Design for bootstrap http://fezvrasta.github.io/bootstrap-material-design/#getting-started
and demo http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

I used bower but also had to install Node.js and npm (good overview here), XCode.  I then installed bootstrap and finally material design for bootstrap (and their snackbar).

I'm looking to using SASS for our CSS variables and also installed Compass but haven't got any further on that yet.

I used the material design nav styles straight out of the box.  I'm sure we will change colours and other elements but for the moment the structure is there.