Code Modules — Sample Files

This sample website is built using Code Modules’ techniques. Code Modules has now been released. The open source files for building this site can be accessed at GitHub. This website uses content derived from Code Modules’ documentation and repurposed to fit various page templates (altered for this site) provided by Start Bootstrap’s Modern Business theme.

Code Modules itself is built upon the use of BBEdit’s include system which is a dependency. If you don’t wish to use BBEdit, a paid program, Code Modules won’t work for you.

Documentation

There’s a website for Code Modules documentation.

Repo for Sample Files

GitHub repo for the files that make this website. Shows Code Modules in use.

High Level Module Types

There are five high level module types. Each of the items below are linked to the documentation for that type. See the Portfolio pages to see this same content used differently—part of the power of code modules.

Hotdogs with Scattered Condiments

Markup Modules

Markup modules return a bit of markup. Each of these modules live as a subfolder of app/modules/markup/. Most websites will have many markup modules.

Scattered Hotdogs

Page Module

The Page module is located at app/modules/pages/. Top level HTML pages contain almost no content other than a call to the Pages module. The Pages module sets a number of global variables and then calls all the other modules needed to build the top level HTML page.

Hotdogs

Nav Module

Navigation is always an important website feature. The Nav module returns the markup necessary for both desktop and mobile navigation. Sometimes, nav markup will be used for headers, and sometimes for sidebars and footers. But, with a nav module, it all comes from the same source of data.

Dressed Hotdogs

Elements Module

Websites usually have pieces of markup that don’t deserve a whole module — they need to be served via something akin to a traditional include. It can still be handy to separate them into a separate file and allow them to use global variables. I use a special Elements module for this purpose.

Plate with a Coke, French Fries, Ketchup, and Assorted Others

Tech Module

The Tech module builds the <head> section and the non-displaying “foot” section of a web page. This is where metatags, stylesheets, font links, keywords, analytics, and javascripts are placed.

Features of Code Modules

  • Improves Authoring of Static Websites
  • DRY principle — “don’t repeat yourself”
  • Encapsulation
  • Separation of Concerns
  • Text-based Source of Data at Build Time
  • Maintainability
  • Avoid Messy Markup

This site demonstrates a website built using Code Modules. The source code for this website is available on GitHub. Documentation for Code Modules is on a separate website.