[Site Logo]

TrimSite

A basic website builder for small websites

The Readme File

There is a readme.txt file in the main directory. This is displayed below so you can have easy access to it, but please note that doing so makes this page so it only displays properly at full screen width. If you've only got a narrow screen available, you could try printing this page out, maybe?

Notes for TrimSite
==================

In a sense, "TrimSite" is step 9 in our example sites; it's basically a tidy-up 
of our little example website framework, done in a way that makes the package 
easy to roll out as a framework for simple websites.  TrimSite has been used to 
produce the websites mentioned at the start of the video series:

  spiffin.org.uk,
  castlesailingclub.org.uk, and
  pirrieharlandresidents.org.uk

- oh and it's also used to produce the TrimSite site itself, where you can see 
the effect of switching CSS files:

  argles.org/trimsite/

Differences
-----------
A number of changes have been made from step 8 to produce the "production" 
version of the website framework.  These are as follows.

 1) The first obvious change is that the working directory for the site has 
    been renamed from <library> to <trimsite>.  That's not essential, 
    but it helps with identity and "branding".
 2) If you look inside the <trimsite> directory, it looks very different. 
    It's not such a big change, it's just that there's a whole load more options 
    than in step8.  So there's:
    - a <cssfiles> sub-directory because there's a range of CSS files to 
      choose from.  Each has been carefully developed as in the video series to 
      ensure that as far as possible they are CSS3 compliant, responsive, 
      mobile-friendly and accessible.
    - A <graphics> sub-directory.  The idea of this directory being 
      inside the <trimsite> directory is that these graphics are specific 
      to the main layout, for example the banner graphic and the site logo.
    - There's also a <documentation> subdirectory.  This hopefully contains 
      enough documentation to help another programmer to pick up the package 
      or site and work out what to do to install or maintain it.
    - Finally, there's a <templates> sub-directory.  More on this next.
 3) Templates and Partials.  
    - The first change is that templateTop.html and templateBottom.html have 
      been combined into one template, separated by a {{content}} label.  The 
      "render" method has then been modified so that $webpage->render("TOP") 
      renders the template up to, but not including the {{content}} label.  
      Similarly, $webpage->render("BOTTOM") renders everything in the 
      template after the {{content}} label.  Why do this?  Mainly because I 
      hate having tags such as <section> and </section> separated 
      across two different files.  It is "Bad Practice" because it can 
      encourage inadvertent errors of carelessness.
    - The second change relates to the fact that there are two bits of HTML 
      hidden away in the webpage render method.  These are used to create the 
      menu options, either standard, or of class "current".  So in TrimSite, 
      these lines of code are removed as partials.  Note that the page template 
      is indeed a template consisting only of HTML (and {{labels}} ), whilst the 
      menu options contain a mix of HTML and PHP and are good examples of 
      genuine partials.
 4) Oh, I nearly forgot.  I also made a slight change to the page template and 
    to the related CSS (see trimsite3.css) so that there's a menu icon with a 
    hover-over or tap drop-down menu available on narrow (presumably mobile) 
    displays.  Just because I can.  Actually, it also side-steps potential 
    problems at narrow screen widths if the menu is overly long, either through 
    having too many menu entries, or through having page labels that are too 
    long.  And note that there is *still* not a <div> or a <span> 
    in sight! B-|
 5) And if you look carefully, you'll see that there's a <figure> </figure> 
    added between the head and nav sections.  It's not immediately apparent why 
    it's there; it's because the CSS can define a background graphic which 
    displays as the banner graphic at the head of the each page.

Those look to be the only changes as far as I can see.

You might want to ask why I called the package "TrimSite".  There's a simple 
answer.  I thought of calling it the more obvious "SimpleSite" - but I got 1400 
sites returned when I did a Google search on SimpleSite.  I want to be a little 
different, at least!

Starting from this basic package, there's lots of easy things you can do/add to 
make for a smart-looking, easily maintained website.  But don't forget the KISS 
principle (Keep It Stupidly Simple) - most Beautifully Simple Ideas get ruined 
because their originator can't resist "Adding Functionality".  So I've been 
ruthless in keeping TrimSite as simple as possible - and it really does work.  
But I want to have the neat additional functionality available as well, so I've 
put the Neat Extra Stuff in TrimSitePlus.  You can find that on:

  argles.org/trimsiteplus/

TrimSitePlus adds "cool stuff" like drop-down (sub-)menus, a photo gallery 
facility, and a carousel.  Some of it is a bit experimental, but most of it is 
heavily tried and tested, works, and saves lots of time and effort!

There are sooo many advantages to taking this approach.  My all-time record is 
setting up a website in 5 minutes (well it was simple), and I also took great 
delight in responding to a "Please update my website request" by using my tablet 
while on holiday in Corfu!  Mind you, my wife wasn't so pleased about that, even 
if the update did only take five minutes...

D.A.Argles
04.11.2015 @ 15:17h