Accent
Red
Green
Blue
Red
Green
Blue
CSS
Variable
Shim
Why?
Here's why...
- Easier to manage CSS.
- Dynamically modify your CSS.
- It's feather-lite, 11kb minified (3.8kb gzip'd).
- It's pure JavaScript, no external plugins needed.
Welcome
Hello and welcome to the CSS Variable Shim Site. Your coding life is about to get easier, web wise. As you can see above we have many great features. Thats just a few. Please take a look around and give us a shot, you wont be dissapointed!
Announcements
@02-21-2014 12:00pm Est.
We are so stoked to annouce this. We have been pretty stable in the past 6+ months. So today we will be releasing a version not in beta! Version 1.0.419 is very stable and healthy.
We are so stoked to annouce this. We have been pretty stable in the past 6+ months. So today we will be releasing a version not in beta! Version 1.0.419 is very stable and healthy.
Download
Download the latest version, v1.0.419, here.
Changes in v1.0.419:
Small change to setStyle, needed to change because empty variable would cause a style of ':undefined;' to be written.
Changes in v.9.413:
Changed setStyle to be more efficient. Also a minor bug fix on setting a color on an image.
Changes in v.9.377:
Made some vast improvements to getElementPerformFunction to cover more selectors.
Changes in v.9.347:
Small bug fix to allow all browsers to take advantage of changing image colors.
Changes in v.9.327:
Fixed a bug which would only allow you to change one property within your hover selector class.
Changes in v.9.193:
Setup a queue to hold changes if the stylesheets were loaded async.
Changes in v1.0.419:
Small change to setStyle, needed to change because empty variable would cause a style of ':undefined;' to be written.
Changes in v.9.413:
Changed setStyle to be more efficient. Also a minor bug fix on setting a color on an image.
Changes in v.9.377:
Made some vast improvements to getElementPerformFunction to cover more selectors.
Changes in v.9.347:
Small bug fix to allow all browsers to take advantage of changing image colors.
Changes in v.9.327:
Fixed a bug which would only allow you to change one property within your hover selector class.
Changes in v.9.193:
Setup a queue to hold changes if the stylesheets were loaded async.
Get Started
Sample Projects
I've had a request! Give us a sample project! A very good suggestion by Shannon. So I put together a simple non Visual Studio project and I also have a Visual Studio project. Also as another download I have included this site's CSS, enjoy.
Note: If you go for the non Visual Studio project keep in mind it must be hosted or your machine will likely block the JavaScript coming from files.
Project Description I put this simple project together to show a little power of the CSS Variable Shim. In the project there is a layout with a nav, some sections and a footer. If you click the tag title the CSS Variable Shim will choose a random color and apply the change to your CSS file. Email or tweet any questions about anything!
Note: If you go for the non Visual Studio project keep in mind it must be hosted or your machine will likely block the JavaScript coming from files.
Project Description I put this simple project together to show a little power of the CSS Variable Shim. In the project there is a layout with a nav, some sections and a footer. If you click the tag title the CSS Variable Shim will choose a random color and apply the change to your CSS file. Email or tweet any questions about anything!
Javascript
All of the running code is pure JavaScript! No extra plugins or libraries needed. If you are using Visual Studio, we recommend getting The CSS Variable Shim from NuGet. If you would like to avoid NuGet please download the source using the link above and add it into your project. With Visual Studio please add a reference to the _refernce.js file. This will make it easier to use the intellisense. All of the source code is documented and has tags for using intellisense. If a function is ment for public use, when coding you will see 'Public' as the first word in the description. In contrast you will see 'Private' for functions that are internal to the shim. Below is a list of the public functions.
Note:
There are a couple of ways you can load your stylesheets to be read by the CSS Variable Shim parser. First is to just call the setStyleFiles method with no parameters. Doing this will cause the parser to read the references that javascript has for the stylesheets. The javascript references will be in order of download. The next way and the most cost effective way is to pass in an array of relative locations to the setStyleFiles method. Using this method you can specify an order and exclude any stylesheets that may not utilize the power of the CSS Variable Shim.
Note:
There are a couple of ways you can load your stylesheets to be read by the CSS Variable Shim parser. First is to just call the setStyleFiles method with no parameters. Doing this will cause the parser to read the references that javascript has for the stylesheets. The javascript references will be in order of download. The next way and the most cost effective way is to pass in an array of relative locations to the setStyleFiles method. Using this method you can specify an order and exclude any stylesheets that may not utilize the power of the CSS Variable Shim.
List Of Public Functions
setStyleFiles
refreshTheme
swapAProperty
swapMultipleProperties
refreshTheme
swapAProperty
swapMultipleProperties
Loading All Stylesheets In The Order They Were Downloaded
setStyleFiles();
Loading Specific Stylesheets In An Order
setStyleFiles(new Array('/Content/tile.css', '/Content/login.css', '/Content/Site.css'));
Refresh Styles After A Change
refreshTheme();
Swap Out A Property Of A Variable
swapAProperty({selectorName:'@Accent', property:'rgb(120,120,120)'});
Swap Out A Property Of A Variable And Force A Refresh
swapAProperty({selectorName:'@Accent', property:'rgb(120,120,120)'},true);
Swap Out A Properties Of Variables
swapMultipleProperties({
selectorNames:[]{'@Accent','@Main','@StandardPx'},
properties:[]{'rgb(120,120,120)','rgb(120,0,54)','10px'}
});
selectorNames:[]{'@Accent','@Main','@StandardPx'},
properties:[]{'rgb(120,120,120)','rgb(120,0,54)','10px'}
});
CSS
The css coding involed in The CSS Variable Shim is non intrusive. It is applied to your current style sheets. How is this done? We simply use comments to our advantage. All variables and assignments, in CSS are comments. Assignments must be after the value but before the semi-colon. For example say we have a class btn, see the example below. We want our buttons to have the ability to change themes in a snap. Here is how we would achieve that.
Class Before
.btn{
background-color:rgb(0,0,0);
}
background-color:rgb(0,0,0);
}
Variable Creation
/*@Accent:rgb(0,122,204)*/
Variable Assigning
.btn{
background-color:rgb(0,0,0)/*@Accent*/;
}
background-color:rgb(0,0,0)/*@Accent*/;
}
CSS Functions
CSS functions are little built-ins used to modify mainly color variables; they can perform lighten, darken and change opacity. These functions are represented by single characters; < > ~. There is one other function that you can use, which is to change colors on an image. This is done by placing a color variable on a pre-assigned background-image and the HTML tag must be a type of canvas. Check out the examples below.
Lighten By 20%
background-color:rgb(0,0,0)/*@Accent<20*/;
Darken By 10%
background-color:rgb(0,0,0)/*@Accent>10*/;
Change Opacity To 70%
background-color:rgb(0,0,0)/*@Accent~.7*/;
Change Image Color
background-image:url('/Image/Themed_Image.png')/*@Accent*/;
Reach Out
We are everywhere. Have Visual Studio and don't want to download and add yourself? We have you covered on Nuget! We can give fast support via our twitter. Or fork us on GitHub!
Email Us
Name (*)
Email Address (*)
Website (Optional)
Message (*)
Close
