More W3 Template Development

Taking the design from my Portfolio Template, I have developed a new template for the Friends Project.

The Friends template and the Craft Fair template were based on the W3.css House template. While this was a lot simpler than my "all sing all dancing" template it still allowed the header to scroll off the screen.

The new template proposed for the Friends is to use the W3.CSS Responsive Fluid Grid. The templates for the Craft Fair and originally for the Friends (and partially my storyboard designs) were based on the "Mobile First" example from the W3 pages. Well, actually the "higher-level" w3 classes: w3-half, w3-third and w3-twothirds are used.

Looking at the additional examples on the W3C Schools page, there are examples of flexible two column and three column layouts (which I still need to feature on this website), but I think that they are too complex for the Friends template.

For the Friends template all I want is a two column layout for laptop and tablet and a single column for mobile. The laptop and tablet displays multiple images will be display and fewer on the mobile display, which will single stacked images with possible headers (dividers) from the left or right larger display.

The "top" menu was taken from my main template. This took a bit of work and deserves a page to explain the coding and how it needs to be constructed.

Navigation on this template is much simpler and the emphasis is that the page is more likely to be viewed on a mobile device. The configuration of the banner at the top of the page is such that the text is a hyperlink back to the main page. There is an expandable dropdown on the topbar but it is thought that this will prove to be too complicated for most visitors to work out that if you tap the dropdown you will get a menu.

Colours

The colours for the menus, particualy the top bar, were changed from my light-green colour from the W3.css framework.

Friends Gallery