Using Web Essentials 2015 Color Palette

Wednesday, October 7, 2015


One of the most popular Visual Studio extensions is Web Essentials. One of my favorite features is the extra stylesheet support WE gives Visual Studio. Making sure that the numbers of colors in a web site doesn't get out of control can be a big deal. Having a consistent color palette makes a real difference in the overall feel of a web application.

After you install the extension you should see a new menu in the toolbar called Web Essentials. It will look like this.


If you click "Create color palette" you'll add a css file to the Solution Items. This file is named specifically "WE-Palette.css". Do not rename it or move it. If you happen to remove it, but do not delete it then you'll be stuck. The file might still be in the solution folder but hidden from the project. You will have to delete it or Visual Studio won't be able to create it. You'll be stuck in a state of color palette limbo.


In this example I created a solution settings file and a color palette already. The extension sees the existing files and does not let you write over them.

So what does a color palette file look like?



It's nothing to complicated. It's just a list of colors. The trick is that the order matters. When you now type "#" in a CSS or LESS file, Visual Studio's IntelliSense feature gives you a wonderful picker that shows your color palette.

Hit #


It is that easy. It's also easy to extend. So lets add an orange color to the WE-Palette.css file and save the file.


It kind of fits our color scheme. I like it. Let's go add it in our style.css file by hitting #.


Yep. This Web Essentials (WE) Visual Studio extension is pretty darn cool. More stylesheet features can be found at:http://vswebessentials.com/features/stylesheets.

No comments:

Post a Comment

 
Copyright © Aaron Stanley King