New Project32 released and available in the current 50% off Black Friday Sale.
This one uses Stuarts clever new Palette stack and if you don’t already have it, Stuart has kindly offered a 50% the Palette stack using the voucher code that is included with Project32.
It is essentially a Restaurant/Cafe/Take Away concept site with 10 user selectable colour themes. One of the themes is a High Contrast version theme to aid Accessibility, that can help those page visitors who are partially sighted, colour blind or neurodivergent.
It gets a 100% in both Mobile and desktop Performance and also a 100% fo accessibility using Lighthouse / Pagespeed.
Also included is a tutorial page that explains how to use SVG’s for page shape dividers together with a load of SVG shape page dividers to use.
Screenshot of included Divider page - how to build perfect page shape dividers without using any additional stacks. You can even add 2 shape dividers on the join between 2 adjacent background images.
Project32 also includes a folder of divider SVG’s to use.
Hej Gary got your project :-), there is a bug in the divider at “Calling All…” There appears a white space when choosing another colour scheme :-) Just for your information, it is visible on your website too. Amazing project by the way. I am looking forward to learning how you did this page :-)
Yes, it is corrected now. Very nicely done this project. It must have taken a little time to make the colour combinations. It looks amazing. With a simple tweaking of colours, you have all these different artistic impressions from the same layout. Palette is a powerful design tool I should say.
Palette is the secret to selecting the different colours for each theme. Ironically, before Palette (BP), it was time consuming and ultimately difficult to go through the process of choosing good colour combinations. Palette give you an instant swap of colours and that process allows you to fine tune and select better colours.
Palette is is a great tool just in Preview mode. I would go as far to say that every Stacks user would benefit from using Palette, if they are using Source or F6.
“ I would go as far to say that every Stacks user would benefit from using Palette, if they are using Source or F6.”
I wholeheartedly agree. But I’d go further than that. Every stack would benefit from an update so that Source or F6 colours can be selected as well as colours from the colour picker. And while they’re at it, I’d suggest also adding the ability to select viewport and container units instead of just pixels (or, better still, replacing numeric size controls with text boxes, so that units, calculations and clamps can be entered). Of course, we can always hack the CSS — but that rather defeats the point of Stacks.
All the Source stacks do offer a choice of Source colours - though i admit that in some stacks it is just a limited range that is offered. I do plan to expand the options in future.
Pretty much all colours though can be applied via classes:
These can be added to the CSS box of any stack and the content of the stack will pick that up (as long as the default colour option is selected in the stack).
Unfortunately, that’s a function provided by the framework and beyond the scope of a stack. Using CSS Variables for vales and colours was introduced to RW Stacks by Souce and then F6 followed. AFAIK Foundry and UIKIT don’t use Variables frameworks.
The reason that it works so well with Source is that you have access to them all.
I did this in LockUp, though — the color palettes in Source and F6 use CSS variables (‘custom properties’) and it’s relatively easy to find out what these are, so it’s possible for any stackmaker to offer these colors in the HUD. It’s not particularly elegant to have various different ways of selecting a color in Stacks, but the ‘enable’ function at least allows you to hide all but the selected color model. (As an aside here, I’m not sure why RGBA isn’t now used by all stacks — it’s one of my pet peeves that many stacks still exclude transparency. There may be instances where it is inappropriate, but then there are instances where bubble-gum pink or sludge green are inappropriate too. Doesn’t mean they should be excluded!)
