A Modular Approach
There is a growing use of a modular approach to web design and applications on the internet. This also applies to the code that we will be using to make our framework. There are in fact 4 ways to create CSS that's modular and scalable with different varying approaches but each aims to apply the following principles:
- separate presentational style from content
- separate the content from the page/site structure
All four methods advocate placing CSS styles in reusable modular blocks of code. We will be applying this principle across our framework, and so can now add this to our list:
- Content comes first
- Use a responsive design
- Begin with a mobile-first approach.
- Seperate design from content
- Apply modular principles to structure and design
normalize.css - download
We take our first real design decision here to choose what to do about the growing range of browsers and devices accessing the internet.
All browsers (user agents) have a set of defaults on how they will display sites to the user through a built in style sheet. Some browsers even contain bugs and errors... To overcome this, a method for resetting the built-in styles developed to ensure a consistency for designers and users.
However, a complete css reset means having to then redeclare the full styles for each html element you want to use. So, a more targeted system of normalising elements arose:
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need resetting across the different browsers.
Read more about the advantages of normalize.css »
We save our downloaded normalize.css in the /assets/css/ directory for later use in our framework. As an aid, we also record the version of normalize.css used by adding to the humnas.txt Technology Colophon.
Structuring the index.html File
At last, we are now getting to the stage where we create files that make up the core of our framework. Let's begin with the structure for our blank html page.
An html page comes in two parts: head and body
<!DOCTYPE html> <html> <head> <!-- document set up --> </head> <body> <!-- document content --> </body> </html>
We will be first looking at the "set-up" requirements for all our html documents. Luckily, many frameworks come with well commented documentation, so we can plagiarise them as a guide for our tutorial.
Document set up
The <head> needs to have the following items within it:
- character set used by the document
- mobile set up
- Document information: title, description
- Links to favicon.ico
- We also add a link to our blank style sheet
<!DOCTYPE html> <html lang="en"> - sets default document language <head> <!-- Initialise + Mobile --> - document character set, enables media queries <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Icons --> - link to our favicon <link rel="shortcut icon" href="favicon.ico"> <!-- CSS --> - link to css file <link rel="stylesheet" href="assets/css/site.css"> <!-- Documentation --> - document title & description <title>Page title</title> <meta name="description" content="Page description."> </head> <body> <!-- document content --> </body> </html>
<body> <!-- document content --> <!-- scripts --> <script src="assets/js/script.js"></script> </body> </html>
A Brief Note
The code has been set out in a way that I find most comfortable, commented so that when I look at it again I can see what I was doing.
Just to point out: there is no right way or "proper" convention for any of this. Read Just Try and Do a Good Job for reassurance.
An excellent source of adopting a style-guide or convention for writing CSS as well as other code practices can be seen at cssguidelin.es How you write your code if working alone is up to you.
And with that, we conclude our initial preparations for creating our Ammonite Framework.