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

JavaScript should be your favorite language

So you think you're really cool because you're hardcore and know everything there is about PHP or C# or C++ or VB or Perl or Ruby or Python or ColdFusion or Java or ActionScript or..  I should stop right?  The thing is, as developers we've been coding in all these other languages to fit the phone, desktop, server and platform we think is best.  But we were wrong.  There is no "best" or "favorite" platform.  We shouldn't have been writing Flash apps.  We shouldn't have been writing Silverlight or Windows or Mono or XNA or Java apps.  We should have been writing HTML5 apps this whole time.  Don't get me wrong.  I don't thing that the debate of standards based apps vs native apps is over.  I think it's going to go nuclear.  Soon their will be iOS , Windows , Ubuntu , Chrome , Android , Blackberry , Firefox OS , and more to come.  They (I assume) will all probably be a little different but there will be ways to write in just HTML5, Jav
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