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

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 HTM...
Read more

Why I won't be registering as a blogger in the state of Florida.

This blog post is about Ron DeSantis. Why am I writing about Ron DeSantis? Did he create a new JavaScript framework? No. Did I move to Florida? Nope. Did Mr. DeSantis contact me about my blog? No.  Does anyone at the Republican party in Florida know that I exist? Absolutely not. I'm writing about Ron DeSantis because he and his party in Florida are working to pass a law requiring me to register my blog with them. I'm disseminating this information to you in possible violation of a law written 1000 miles away. At the discretion of some official in Florida they may decide that I owe them money and fine me for not registering with that official. I also must tell them how much money I make off my blog post. It's just pennies by the way. https://www.flsenate.gov/Session/Bill/2023/1316  This proposed law is as stupid as the book bans. Just like the banned books, nobody is being forced to read this blog. A person has to seek this blog out. You don't have to finish reading a bo...
Read more

Cool new stream about F# from LaylaCodesIt

Image
There was a cool new series about F# on Twitch today.  It was fun to see and I haven't used F# in a long time. I felt like it was my first time while watching the stream. https://www.twitch.tv/laylacodesit  Here is my code inspired by Layla and Alyssa. https://gist.github.com/trendoid/ad4c5f3b58fc09c6a0ee472a0fd869d6 or if you want the whole project... https://github.com/trendoid/FsharpConsoleApp It just reads from a text file and prints the contents out to the console. // For more information see https://aka.ms/fsharp-console-apps printfn "Console App: Started!" open System.IO let baseDirectory = __SOURCE_DIRECTORY__ let filePath = "Text.txt" let fullPath = Path.Combine(baseDirectory, filePath) let readFilesTask (path1) =   task {     let! content = File.ReadAllTextAsync(path1)     return content   } printfn "Content: %s" (readFilesTask(fullPath).Result)
Read more