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