parlicoot logo

parlicoot

CSS Development 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

Modular CSS

We can develop modular CSS in a couple of ways:

  • One way is to write a single site.css file that is broken into sections for each element we wish to style.

  • Another is to produce a set of CSS files for each html element and reference these directly in the HTML head, leading to a long list of files.

The first way means searching the entire stylesheet when we want to make a couple of changes, whilst the second means too many requests to the server, slowing down the site.

We could improve on this by writing separate CSS files for our site and then copy/pasting them into the site.css file which we then call just once from the html. This may be OK for development but not when we have a finished product that we may want to change later on.

A compromise is to use the single style sheet to call the required smaller files and compile them into one CSS file. This very approach to CSS development is taken by the Workless CSS Framework except the site.css file uses @import statements to reference the css components.

Happily, Workless also provides a php file within their CSS folder which can be used to produce a production stylesheet once development is complete, along with the bonus that all comments and surplus space is stripped out, thus minifying the css file.

The php file will need a server to run on, so you now have a choice of either using @import or php at the development stage with the bonus of being able to extensively comment our work. Once done, produce a minified CSS file and copy/paste the results into style.css whilst keeping the developed css modules for any future changes.

Update to Barebones

We add the following file to the assets/css directory.

  • css - directory
    • normalize.css
    • site.css
    • minified.css.php

The php file will both combine as well as minify the css files listed within it.

minified.css.php


<?php
header('Content-type: text/css');
ob_start("compress");

  function compress($buffer) {
    /* remove comments */
      $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);

      /* remove tabs, spaces, newlines, etc. */
      $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);

      return $buffer;
  }

    /* css files for compression */
    include('normalize.css');

ob_end_flush();
?>
                

Alternatively, amend the style.css file to @import each css file:


@import url('normalize.css');
                
barebones2

Modular css approach and php combination of css files as seen within the Workless Framework: http://workless.ikreativ.com/


« completing barebones | Home | the index.html file »