Using Web Essentials 2015 Color Palette



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.

Comments

Post a Comment

Popular posts from this blog

Special Characters are Truly Special

Image
Do you remember the days before string interpolation in C#? I do. It was medieval. Those were truly the dark days of development. We would all use string formatting and concatenation and carried swords around to defend ourselves against giant beasts. Ok, maybe I'm the only one that was wearing a helmet but I'm kind of a weird guy. I think we can all agree that string concatenation is not all that fun. It might not be as dangerous as dragons, but it can still light your hair on fire when there is a bug in your code just to display some text. Classes in C# like StringBuilder helped make things safer but it wasn't all that readable. String.Format is easy but keeping the parameters in the right order isn't exactly a no brainer either. What if that code was just in a class behind a view? Can't we just put it in the view? In the code behind it was easily testable, but the context was lost, and it wasn't as simple as what we can do today. output = String.Format("
Read more

.NET Maui and VS Code

Image
  I was disappointed in the developer experience for .NET Maui and Visual Studio Code. I assumed that the popular debuggers and extensions would cover getting an app running. I am always up to date on my .NET and Visual Studio and Visual Studio Code so I just figured the tooling would be there. When the marketplace didn't really reveal a solution for me, I went searching. The best search result for me is the one that pointed me in the direction to get my .NET Maui CLI working.  That's right. I went to the CLI to get my IDE running the way I wanted it to. .NET MAUI with .NET CLI (Command Line Interface) Getting the .NET Maui workload and the maui-check command line tool installed really helped. Those installs made sure that the libraries and emulators were setup so I could run them without Visual Studio.  It also reminded me that I'll need some sort of emulator or device to connect VS Code to. dotnet new maui After running the CLI to create my solution and project, I realize
Read more

Where’s my phone update?

  http://www.microsoft.com/windowsphone/en-us/features/update-schedule-usa.aspx   I have a Samsung Focus.  If you look at the chart and details (as of today April 4th) I should get my February update 10 days to several weeks after AT&T gets thru testing.  AT&T isn’t done with testing at the time of this blog post.  So the February update should be called the June update and the March update could be called the July update.   I’m glad I don’t have a brick.  I’m glad I don’t have an Android 2.* and need to figure out if I can spend money on an app because it might actually not work on my version on the 2.x operating system.  I’m glad I don’t have an iPhone 4 with the bigger GBs and the cracked screens.   But how much different is copy and paste on the AT&T network than another network?  The Samsung update is in network testing right?  Or maybe that is just smoke and there is a bigger fire.  Tell me there is fire and I’ll not want the update. Otherwise quick puff
Read more