INFORMATION ABOUT PROJECT32
INTRODUCTION
Project32 is a Restaurant themed concept site that also suits may other similar applications. The project introduces the ability to change "theme" colours using the Source Palette stack. There are 5 cool new capabilities that use of the Palette stack provides:
User selectable colour themes or schemes. A page or site wide way to offer the selection of different colour schemes to the web site visitor that adds a bit of fun for visitors to express themselves by selecting the appearance of the site or individual page. When they vist again, their colour selection will be remembered. Some people love this stuff.
A way to cater for those with varying degrees of colour blindness, to select a more readable and therefore, more accessible site.
A high Contrast site version for maximum Accessibility to provide the best contrast between content and page background. The High Contrast demo site achieves a 100% Accessibility result from Google's Lighthouse / PageSpeed.
The Palette stack provides a great way to try different colour combinations both during the early development phase and also in front of a client to determine colour choices and combinations. Seeing multiple colour layouts can be a fast way to finalise on colour and design choices.
Project32 also uses layouts using the Grid Plus Filter function to build Tabbed layouts as used here on this "Tab" layout and also on the Menu layout.
Great attention has been taken with this site and it achieves a 100% report for both Desktop and Mobile in Google's Lighthouse / PageSpeed.
Note: This layout is created with just one Grid Plus stack, This "tab" content can be directly linked to using the URL https://webdeersign.shakingthehabitual.com/project-32/info/?category=intro1*
PALETTE STACK
The Palette stack is setup in a Partial that displays horizontally, and because there are an unusually high number of colours used, i.e. 10 options, in this demo, it has been setup to stack on smaller screens.
In addition, on the Home page, the Palette stack has been duplicated and a second colour selection set to display horizontally with reduced size buttons. This is just for demonstration to allow easier selection of colours at all stages of where the page has scrolled to. A live site would not need 2 sets of buttons, but both are shown in thsi demo.
Note that the Palette stack can also be used with the Source Dark Mode stack as an additional colour in the Palette colour selectors. Users can now choose a Dark Mode if their OS or browser does not support auto Dark Mode.
Note also , that if you use multiple Palette stacks on a site, they must all be identical and best served in a Stacks Partial.
Note: This layout is created with just one Grid Plus stack, This "tab" content can be directly linked to using the URL href="https://webdeersign.shakingthehabitual.com/project-32/info/?category=palette1
GRID PLUS FILTER
The Grid Plus filter feature is used in this Project in a way that recreates a traditional Tabbed layout. This gives you all of the power of Source inside a micro light tabbed layout.
This markdown text is placed inside a Grid Plus Item that has been given the unique Category of filter1, and the Grid Plus settings has the label FILTER assigned to that label. When the FILTER button above is selected, you will be presented with this content.
Note also that the starting category can be set, as it is here to be intro1. Note that the categories and category names must be different and in this example the number 1 is added onto the end of the category name.
In addition, each Tab can be accessed from a URL by appending the filter category as shown below for this tab. How cool is that?
This "tab" content can be directly linked to using the URL https://webdeersign.shakingthehabitual.com/project-32/info/?category=filter1
DIVIDERS
Project32 uses extensive use of SVG Page Dividers with solid colours and transparent colours controlled using Palette and selected by the user. Page Dividers are used at the top or bottom (or both) to create the effect of overlapping waves to soften the overall structure of the pages. In this project, the last dividers before the footer, are 2 divders that butt up to each other and slightly overlap to avoid ugly lines appearing between sections. Using this technique, page dividers can overlap the bottom of one section and then top top of the next sections. The effect is a seamless overlapping of both adjacent sections.
SVG wave page dividers can be downloaded at several free sites and can be pasted into the project to change the shape and style of the dividers. Alternatively, page dividers can be created in a basic vector graphics app by creating a 1000px wide, 30px high SVG, with a transparent background and with a shape that obscures either the top or bottom half of the SVG image.
Check out the additional Project32 divider tutorial page inside the project.
Note: This layout is created with just one Grid Plus stack, This "tab" content can be directly linked to using the URL https://webdeersign.shakingthehabitual.com/project-32/info/?category=dividers1
NOTES
As always with Webdeersign SOURCE projects, getting a 100% Lighthouse / PageSpeed performance result for MOBILE & DESKTOP is one of our main objectives. Each project is extensively tested with Lighthouse.
PROJECT32 also includes a tutorial page to show how to create layouts that use Page or Shape Dividers at the bottom and also how to combine bottom and top dividers in adjacent Sections.
Images downloaded from UNSPLASH and Optimised using Google's SQUOOSH to optimise and generate optimised webP Images. Full details detailing how to serve webP Images with fallback jpg or png images are included.
Locally served Subsetted Gooogle Fonts, subsetted at Google-Webfonts-Helper
Note: This layout is created with just one Grid Plus stack, This "tab" content can be directly linked to using the URL https://webdeersign.shakingthehabitual.com/project-32/info/?category=notes1
GET THIS PROJECT
Use the button below to find out full details about Project32.
Note: This layout is created with just one Grid Plus stack, This "tab" content can be directly linked to using the URL https://webdeersign.shakingthehabitual.com/project-32/info/?category=get1