Projects, ideas and resources from style:Cymru

CSS Framework

Preparation

Preparing Barebones for development of linked css files.

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>
                

Document Content

The last addition to our index.html file that we need to make is to link to our) blank javascript file which we will be looking at later on. We add this in the <body> part of our document and it will appear after our html content but before the </body> closing tag.


<body>
    <!-- document content -->
    
    <!-- scripts -->
    <script src="assets/js/script.js"></script>
</body>
</html>
                

Download barebones v0.1


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.


CSS Framework

CSS Framework