Yum Skincare

Yum Skincare is a skincare product manufacturer that produces various lotions. Drupal 7 was the chosen platform for this website, which is multi-lingual and features two different designs for the same page.

Tags

  • Drupal
  • Multi-lingual

Case Studies

Design swapping

Some pages, like the about us page, share the same content on both the men and women side. The client requested different colors but wanted to keep the same textual copy.

Instead of creating two pages, I managed to keep it as one. I use JavaScript's sessionStorage to save a variable when you enter the respective gender's landing pages and use that variable to add a class to the body element. I set up my SASS files so that one class change alters all the colors on the page.

Design swapping

Yin Yang image generation

The skin types page has multiple Yin Yang symbols. The symbols all have different colors and a shadow is behind each one so a icon font wouldn't work. I didn't want to use images for each one as it would be very difficult for the client to add or edit in the future.

I created a mixin in SASS to generate the symbol using CSS borders and backgrounds. I then created a field in Drupal for the color so that the symbol can be generated with code without going into Photoshop.

Yin Yang image generation