W3.css Website Templates

This page was created using a highly modified W3.css template. The starting point was the Nature Photography design.

The W3.css templates are a useful starting place for the development of a website design. Many examples are provided on the W3C Schools website, some of these are quite simple and can be used as a starting place for your own development. The website you are reading this was developed in that manner and is now quite complex. However, you can develop much simpler designs and I have provided some examples below.

The goal of this page is to illustrate how you can use a W3.css template and expand/adapt it for your own use.

As a tool to encourage the adoption of your web design services these templates could be used to illustrate what could be done for a client. The template for this page and the tempusfugit.me.uk website has been modified considerably from the original example.

While there is still a lot of work that needs to be performed to make a website for a client, all the information is provided by W3C Schools. The addition of enhancements, such as drop-downs in the left menu and the top menu with its expandable drop-downs, are detailed on this website.

Limits to these templates

While the templates are a good place to start if you want to give a potential client a place to start then you could potentially steer them to the W3C site for them to select a "look" for you to start. The reality is that the client will need advice on what to use and accept your recommendation.

Most of the demos are single pages and a secondary template will be needed to be created so that customisation can occur.

A lot of the "nuts and bolts" are hidden from the webmaster and I question whether the developer would have to revert to a more basic css so that the required customisation can be made. It seems that the colours for menus and buttons are fixed by W3.css and the reponsive behaviour handling is hidden.

I am presuming that the responsive handlers are are contained in c3.css as I haven't looked at the c3.css code that you can download and run from your own server. The problem with this is that you will then have to download the latest version when it is updated and possibly make the changes that you may have made to it. I know that I have an interaction with some of my existing code with respect to my menu buttons. I am sure that I can fix that it I wanted but I am resonably happy with my own responsive design at the moment.

I quite like my fixed bottom menu, fbw.css, again, there are some templates that have fixed menus that remain on screen when the page is scrolled. The Portfolio demo that I have linked below shows this. Howver, this is only when it is displayed on a computer screen.

Some examples of W3.css template usage

• The usage of the "House Design" template - less that 100 lines of code - Friends of the Church
• A second usage of the "House Design" template - this time the Village Hall again
• Craft Fair 2022 - how the "House Design" template can look - Now redirected at server level as fair is over. Please see my page on the project

A new different design for the Friends page

Having expanding the design I originally chose for the Parish Council website for use on this website I was concerned that the look of the websites was too similar. In the case of the Parish Council and this site I don't mind as much and they are in fact different enough. The Friends site on the other hand was also dveloped using the same template as the Parish Council. It was that developmnt work that led to the adoption on this website.

As there is a general lack of interest in the development of the Friends website/page I am playing around with a few of the other W3.css templates. I have a New Friends prototype. This is basd on the House Design template. It is a lot simpler and does not feature the overlay menu. In fact it may be too simple - not that the Friends group will notice or care!

I may leave the page that I originally developed on the Parish Council server as it is still to be reviewed by the team or I may replace it with the new one to see if anyone notices. The motivation for this move is that I had heard that a QR code was wanted on "the website". I started to look into a donations page/mechanism

What the Wikpeodia page says about CSS Frameworks:

CSS frameworks are prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language. CSS frameworks include Blueprint, Bootstrap, Foundation and Materialize. Like programming and scripting language libraries, CSS frameworks are usually incorporated as external .css sheets referenced in the HTML . They provide a number of ready-made options for designing and laying out the web page. Although many of these frameworks have been published, some authors use them mostly for rapid prototyping, or for learning from, and prefer to 'handcraft' CSS that is appropriate to each published site without the design, maintenance and download overhead of having many unused features in the site's styling.

Interestingly the Wikipedia page makes no reference to the W3C.css framework.