Sometimes you are not happy with just one. You want more.

Did you ever want to have multiple ways that inputs could appear? Uniform can do that for you as well. It's a bit harder and you'll need to build a custom CSS file using Sass, but I'm sure you will get the hang of things.

Simple Example

If your themes have the same size elements in the sprite, you can do things the easy way. Simply add a few classes and rely on CSS being overridden.


HTML, JavaScript, CSS

To do this, you need to only wrap your elements a bit.

<input type="text" class="simple" value="Default"><br>
<span class="jeans">
	<input type="text" class="simple" value="Jeans">
</span>

The JavaScript actually doesn't change at all. Just style everything.

$('input, select').uniform();

Next up, just add a bit of SCSS. If you want to see the necessary CSS instead, take a look at the bottom of the stylesheet for this example page.

/* Default theme */
@import "../../themes/default/css/uniform.default.scss";

.jeans {
	@include use-backgrounds(url('../images/sprite-jeans.png'), 0, url('../images/bg-input-jeans.png'), url('../images/bg-input-focus-jeans.png'), 0);

	input {
		color: #FFE000;
	}
}

Tradeoffs

Even for this simple example you will notice that I needed to override the input colors for the jeans theme. Doing this with complex themes is much worse than the "Complex Example" below.

The sprite images must have identically sized elements. You can change colors, but not the position of anything.

You need to wrap your elements

The resulting CSS is smaller than the complex example.

Complex Example

Nothing says "success" more than actually seeing that it works.

HTML

Here's some sample HTML that we are going to theme two ways.

<input type="text" class="default">
<input type="text" class="agent">

Sass / SCSS / CSS

It's easiest to just use some SCSS to build your CSS file. The general idea is that you can wrap each theme in a special CSS selector. You can also have the default theme without a selector so elements can fall back to that gracefully. Let me show you with this example:

/* File: myThemes.scss */
/* Default theme */
@import "themes/default/css/uniform.default.scss";

/* Agent */
$class-wrapper: ".uniform-agent"
@import "themes/agent/css/uniform.agent.scss";

/* And you keep adding as many themes as you'd like */

You can peek at the SCSS file that was used to generate the CSS for this very page.

The JavaScript

Here's the trick: selecively apply $.uniform() and use the "wrapperClass" property to define a globally applied class.

$(function () {
	// Apply the agent theme selectively
	$('input.agent').uniform({wrapperClass: "uniform-agent"});

	// Apply the default theme to the rest - Don't worry, Uniform will
	// not apply styling to an element twice
	$('input').uniform();
});

Tradeoffs

The simple method is possible without sass. This one really relies upon it because you build out the CSS files.

The generated CSS isn't as small as it could be if you were to do this by hand.

This does support far more themes and they have all of their colors and sizes properly applied. It's less troublesome because you don't need to worry about restyling things.