Projects, ideas and resources from style:Cymru

CSS Framework

CSS Framework - File structure

Setting up the files and structure needed to start a new web design project.

Basic Requirements

As with everything on the internet, there is no "correct" way for laying out a file structure for a website beyond the following basic demands:

  1. the root directory contains an index file
  2. all index page resources are linked appropriately.

A salutary reminder of how little is needed for a website is given by Justin Jackson with his Words page. The only additional resource needed to display this site is a very simple style sheet (see the page source), plus an added script linked to track the number of visitors.

A regular small website has many more files. It then becomes a matter of organisation to help keep everything in order.

Small site structure

small site

Adopting A Convention

A common convention for a small site - just a half-dozen pages - is to save all the pages in the root directory, with images, scripts, stylesheets and other media resources each in their own folders.

With the development of the web and the growing plethora of devices and supporting files, many designers now set things up with a little more structure. These additional files include items such as fonts, icons, javascript libraries and so on. Putting everything to do with the design and operation of the website within an assets folder seperates these materials from the actual content of the site.

This seperation of design materials from content allows for a more modular approach to designing a website and leads us to a 4th principle for website design:

  • Content comes first
  • Use a responsive design
  • Begin with a mobile-first approach.
  • Seperate design from content

Design within an assets folder

assets folder

CSS Framework

CSS Framework