Implementing color palettes with LESS mixins

16th October 2013

In March, we launched a redesign of Khan Academy where we gave the world the gift of color! [1]

Screen Shot 2013-10-16 at 7.28.53 PM Screen Shot 2013-10-16 at 7.29.03 PM Screen Shot 2013-10-16 at 7.29.08 PM Screen Shot 2013-10-16 at 7.29.15 PM

As you meander about Khan Academy, you’ll see that each domain’s color scheme permeates all the way through. For example, “Discoveries and projects“ falls under science, so it’s pink.

science

Instead of copying and pasting domains + colors everywhere, we used LESS variables and mixins.

More specifically, we did something like this gist [2]

As a fun demo, open some science page and then do this in the console:

$(“.science”).addClass(“math”).removeClass(“science”)

and you’ll see the theme switch just like that!

blue science

[1] – Where Jason and Tabitha both blogged about it

http://shipordie.com/post/45235932174/khanacademy-org-gets-a-makeover-bug-fixes-and-ux

http://tappitha.tumblr.com/post/46001133750/athena-behind-the-scenes

[2] – I should figure out how to embed gists some time. Or move off of wordpress.

You can leave a response, or trackback from your own site.

Leave a Reply