color themes
We've adjusted and expanded the CSS custom properties at tad to make the system more optimized in general and also allow for the new color ranges coming out of the marketing side. After discussion, we determined the areas that should be adjustable are the background, text, links and any buttons. These properties can always be changed with targeted CSS, but the more specific we make the atoms the more code we have to add at the molecule and card level to overload previous rules.
Starting with just impact, a normal approach wasn't too bad. It's ok to declare, as an example, in an impact molecule or card that the label should be black text on a white background. That's not a lot of code. It got a little more repetitive when we added the promo concept and then it got really ugly when we started putting these into a story body with its own rules.
What we have done here instead, using CSS custom properties, is set some defaults for our current cards to eliminate boilerplate code while also giving us a clean place to add new themes without increasing the payload by all that much. Here is the new set of standards for impact card and promo cards.
Remains found two years after man vanished, cops say. Now SC man charged with murder
Dolly comes to Kansas. Parton promotes reading program as it expands to JoCo, WyCo
In the new setup, atoms like links, buttons and labels are listening for these properties. Here is a sampling of the CSS for the impact and promo molecules.
.impact,
.promo {
--paper-color: #373737;
--header-color: white;
--text-color: white;
--secondary-text-color: white;
--link-color: white;
--link-hover-color: white;
--button-color: #222;
--button-background-color: white;
}
.promo {
--paper-color: #31409F;
--button-color: #31409F;
}This setup allows us to expand in the future for different ad campaigns. Here is a quick sample.
Remains found two years after man vanished, cops say. Now SC man charged with murder
Dolly comes to Kansas. Parton promotes reading program as it expands to JoCo, WyCo
Here is the CSS to make those work.
.purple {
background-color: #91096F;
--header-color: white;
--text-color: white;
--secondary-text-color: white;
--link-color: white;
--link-hover-color: #FFE31A;
--button-color: white;
--button-background-color: #09932D;
}
.charcoal {
background-color: #525D54;
--header-color: white;
--text-color: white;
--secondary-text-color: white;
--link-color: #FFDD69;
--link-hover-color: white;
--button-color: #7A8A0E;
--button-background-color: white;
}The same CSS also works for cards, along with any other element that uses our system.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus lorem a
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate enim dolor, sit amet lacinia ex lacinia ac. Sed facilisis nulla felis, eget ultricies dolor cursus nec. Cras sodales ligula elementum ipsum elementum gravida.
Keep ReadingLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus lorem a
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate enim dolor, sit amet lacinia ex lacinia ac. Sed facilisis nulla felis, eget ultricies dolor cursus nec. Cras sodales ligula elementum ipsum elementum gravida.
Keep ReadingLastly, though we dont' use this in our designs, it was important in the structure that elements inside of a story body could be tailored too. The same rules could be applied to the article header, as an example.