design2 – layout and typography template

I have a favorite set of HTML/CSS templates for you to look at created by HTML5up. Each template usually includes three parts: a homepage layout, a “generic” page, and an “elements” page. The homepages are the most complicated part of the layout, but the generic and elements pages are the practical parts. They showcase basic layout the styling of every element in the template. Also illustrated are a number of components – buttons, forms, responsive images, etc. Here’s the elements reference for Editorial and Massively as examples.

This week you’re going to build the seeds for your own HTML / CSS template using Sass. We’ll focus on making some practical decisions with typography and color and build the beginnings of the elements page. Unlike a lot of the work with Natours using BEM class naming, for the elements page you’ll start with your element selectors and set values to the main ones. The exception to this will be your grid and responsive image component

Your template should include the following:

  • Select a Google font pairing for your headings and body fonts (inspiration);
  • Select a primary color as well as set a palette of black, white, and greys (consider looking at Google’s material design for reference);
  • The start should include the following elements styled as well as your grid rebuilt:
    • p, h1 – h6, a
    • grid
    • resets
    • showcase the layouts and elements similar to Editorial (or another page of interest)
  • Files to include
    • my-template/v1/elements.html
    • my-template/v1/package.json
    • my-template/v1/css/style.css
    • my-template/v1/sass/main.scss
    • my-template/v1/sass/all-7-1-directories-and-partials

Join the Conversation


Leave a comment

Your email address will not be published. Required fields are marked *