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.
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.
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.
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.
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.
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
