In this section we’ll add some structure to the layout and give it some minimal styling with CSS.
As a first step toward adding links and styles to the sample application, we’ll update the site layout file public/index.html with additional HTML structure. This includes some additional divisions, some CSS classes, and the start of our site navigation.
To take advantage of the upcoming style elements, we’ll add some extra elements to the public/partials/static_pages/home.html view.
Bootstrap and custom CSS
Our first step is to add Bootstrap
The first step toward getting custom CSS to work is to create such a custom CSS file public/assets/stylesheets/custom.css. Inside the file for the custom CSS, we can use the @import function to include Bootstrap
Next we’ll add some CSS that will be used site-wide for styling the layout and each individual page.
Include the custom CSS in public/index.html
The result of the CSS
The header HTML forms a logical unit, so it should all be packaged up in one place. The way to achieve this in Angular is to use a facility called partials.
Let’s first take a look at what the layout looks like after the partials are defined in public/index.html
Similarly, we can move the header material into the partial shown in public/partials/layouts/_header.html
Now that we know how to make partials, let’s add a site footer to go along with the header. By now you can probably guess that we’ll call it _footer.html and put it in the layouts directory
We can render the footer partial in the layout by following the same pattern as the stylesheets and header partials
Of course, the footer will be ugly without some styling