A great stack for web designers! Palette is a theming powerhouse that allows the changing of the colour palette used throughout your web page / site.
This page demonstrates the dynamic changing of palettes based on triggers on the page. Simply scroll down the page and you will see the whole colour palette change several times.
The Linked Text colour choices on your website can have a big effect on the end user and their experience (and behaviour) on your website. Getting it right (and even giving your website visitors a choice) can be hugely beneficial - for them and you!
The modern web lets us use 'CSS variables' to hold values relating to the styles we want on our websites. Palette stack can tap into these values and dynamically change them allowing us to transform all of the elements that reference those colour values.
Source and F6 utilise CSS variables to store colour values as such it it only these frameworks that can take advantage of the theming options that Palette stack facilitates.
There are many reasons why providing different themes could be useful for you, your clients and / or your website visitors.
Here are just a few....
During the design phase easily try out different colour schemes to find what works best. You could even make a partial containing your favourite colour schemes to test with each new site you build.
You might want to present your client with numerous page styling options for their site. Simply set up Palette and let them see their page/site in various styles to see what they like best.
Let your website visitors choose whatever colour scheme they like. You can even set Palette up to remember the choice made so that it is carried between sessions (and pages!).
Do you showcase website templates that you sell to customers? Palette is a great option to demonstrate how flexible and adaptable your sites can be.
Palette lets you create up to 10 different palettes/themes that can be offered to your web page visitors for them to select their preferred option.
Not only that....Palette will (optionally) remember their choice and carry it between sessions (and even between pages if you are using Palette throughout a whole site!!).
Switching palettes assigns the different colour values of the chosen palette to the underlying colour variables that we use throughout Source. As such, any elements on the page where we use these variables will get automatically updated!
Click on the different Palette selectors in the Nav bar to see the colour values below change based on your choice.
#Accent#Accent (Hover)#Accent (Alt)#Secondary#Secondary (Hover)#Secondary (Alt)#Text#Background#Background (Alt)Note: This is just a subset of the colours that Palette works with in Source framework. The F6 version of the stack works in the same way with the colours set in the Site Styles stack.
Below are some responses to questions about the functionality of Palette stack.
Built with Source