Modular HTML & CSS Coding
The basic concept of writing modules of code is nothing new, it is already widely used across nearly every programming language. PHP for example uses functions, which are modules of code that perform a given task. These functions can be called (reused) an infinite number of times in an infinite number of scripts. This enables developers to WRITE CODE ONLY ONCE and then reuse that module when ever it is required without the need to repeatedly copy the same code.
Wordpress templates are a great example of reusing modules of code. The webpage template is designed and coded with the ability to expand and contract for different lengths of paragraphs and headers, which makes editing text very easy. Permission is given by the designer (either freely or at a small cost) for anybody to plugin the template to the content management system supplied by Wordpress.
Smaller modules of code are much more flexible than larger modules. The Wordpress example above is very limited in terms of design customisation. It is a non-trivial task to change the look and layout of a template because the level of detail that needs to be controlled is smaller than the module of code supplied.
Modules need a framework... The framework provides slots allowing modules to be interchangeable and also defining the basic parameters that each module must fit. There is often a compromise between the flexibility of a framework and its module sizes, as smaller modules require more work to create but are more flexible. An example of a simple framework that uses 3 modules is as follows:
- Header
- Main Content
- Footer
Module compatibility should not be limited to any given framework. Writing adaptive expandable modules of code that fit different sized framework slots further enhances the flexibility of a modular approach. For example if the width of a containing div tag is defined as 100px this will only fit a framework slot that has 100px of space, alternatively if width is defined as 100% it will fill any framework slot like water filling a glass.
