I designed this website to be a template for the publication of web based (technical) books and documents for engineering.

The template as it stands is an empty framework (apart from all the information and instructions) designed to hold whatever document or publication is directed at it. It’s well set out, has a range of nice and consistent styles and navigations that can be used with almost no effort. It has plenty of instructions for what to do and when. It’s consistent in its appearance and is (relatively) easy to use; there’s even some maths and geometry involved in the columns and how they work (yep, still an engineer).

The actual website content explains how I’ve coded each section, how new sections can be added and how to format the various components of the website; in short:

  1. Making the site responsive (responds to different width browsers), I used a Karl Gerstner grid arrangement (read on)

  2. Formatting text to give a pleasing layout and appearance

  3. Configuring responsive side bars

  4. Different types of headings

  5. Incorporating figures, tables and footnotes

  6. Navigation and links

  7. Structuring a website (the underlying folders and files that hold everything)

  8. Using jQuery for scrolling, displaying images with a “lightbox”, code fragments and formulae

I’ve even included some other things that you may find useful:

  • Using scalable graphics

  • Optimising code and graphics

  • How to move content from Word to the website without going mad

  • Pictures of my dogs (maybe not so useful)

And of course I’ve made the whole thing available as a downloadable zip file — folders, source code, content, the lot. Download it here.

End flourish image