design2 – the html template generic page and first component

Your template inspired by the html5up models is just getting started. You’ve hopefully defined the main font as well as a heading font and presenting these in your first draft of your elements page. I’m presently working on a template (download zip) which uses a number of design elements from Editorial.

There’s a lot to learn from downloading the template files and looking at the Sass files included. They do not strictly follow a 7-1 architecture, but they are definitely informed by it. Also, a number of functions and mixins include attributions to the original author. This led to additional research and I’ve added a number of interesting Sass resources on the resources page. In particular, note the use of Sass maps in the variables section to manage font and palette values as well as the functions written to help access those values.

Besides looking at the Sass files of a HTML5up template you’re interested in, also look at specifically Hugo Giraudel’s – Sass Guidelines & Sass Boilerplate. And note that Sass has syntax and rules for annotating Sass code.

Problem Set

Finish your elements page and add the following to your template:

  • Your first component – most likely buttons, but if there’s something else you’d like to build go for it;
  • Add a responsive image class, you should figure out how/where it should exist in your 7-1 architecture;
  • Add a simple ‘generic page’ – includes a heading, image, sub-headings, and paragraphs. Here’s Editorial’s generic page.

Leave a comment

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