![[Site Logo]](trimsite/graphics/logo-haven.png)
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