Файл: module-assets/admin/uniform/www/multiple-themes.html
Строк: 170
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
<link type="text/css" rel="stylesheet" href="stylesheets/site.css" />
<link type="text/css" rel="stylesheet" href="stylesheets/multiple-themes.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="javascripts/jquery.uniform.min.js" type="text/javascript"></script>
<script type='text/javascript' src="javascripts/mustache.js"></script>
<script type='text/javascript' src="javascripts/ICanHaz-no-mustache.min.js"></script>
<script type='text/javascript' src="javascripts/multiple-themes.js"></script>
<title>Uniform - Multiple Themes At Once</title>
</head>
<body class='index'>
<div id="frame">
<div id="header">
<h1 class="title"><a href="index.html">Uniform</a></h1>
<h2 class="subtitle">Multiple themes on a single page</h2>
</div>
<div id="docs">
<p>Sometimes you are not happy with just one. You want more.</p>
<p>Did you ever want to have multiple ways that inputs could appear? <a href="index.html">Uniform</a> can do that for you as well. It's a bit harder and you'll need to build a custom CSS file using <a href="http://sass-lang.com/">Sass</a>, but I'm sure you will get the hang of things.</p>
<h1>Simple Example</h2>
<p>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.</p>
<div class="simple-example example">
<input type="text" class="simple" value="Default"><br>
<span class="jeans">
<input type="text" class="simple" value="Jeans">
</span>
</div>
<h2>HTML, JavaScript, CSS</h2>
<p>To do this, you need to only wrap your elements a bit.</p>
<pre><input type="text" class="simple" value="Default"><br>
<span class="jeans">
<input type="text" class="simple" value="Jeans">
</span>
</pre>
<p>The JavaScript actually doesn't change at all. Just style everything.</p>
<pre>$('input, select').uniform();
</pre>
<p>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.</p>
<pre>/* 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;
}
}
</pre>
<h2>Tradeoffs</h2>
<p>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.</p>
<p>The sprite images must have identically sized elements. You can change colors, but not the position of anything.</p>
<p>You need to wrap your elements</p>
<p>The resulting CSS is smaller than the complex example.</p>
<h1>Complex Example</h1>
<p>Nothing says "success" more than actually seeing that it works.</p>
<div class="examples">
<script type="text/html" id="exampleTemplate">
{{#.}}
<div class="example example-{{theme}}">
<h2>{{name}}</h2>
<input type="text" class="uniform-{{theme}}" value="{{name}}"><br>
<select class="uniform-{{theme}}">
<option value="{{theme}}">{{name}}</option>
</select>
<input type=checkbox checked="CHECKED">Nice!
</div>
{{/.}}
</script>
</div>
<h2>HTML</h2>
<p>Here's some sample HTML that we are going to theme two ways.</p>
<pre><input type="text" class="default">
<input type="text" class="agent">
</pre>
<h2>Sass / SCSS / CSS</h2>
<p>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:</p>
<pre>/* 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 */
</pre>
<p>You can peek at the <a href="stylesheets/multiple-themes.scss">SCSS file</a> that was used to generate the CSS for this very page.</p>
<h2>The JavaScript</h2>
<p>Here's the trick: selecively apply $.uniform() and use the "wrapperClass" property to define a globally applied class.</p>
<pre>$(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();
});
</pre>
<h2>Tradeoffs</h2>
<p>The simple method is possible without sass. This one really relies upon it because you build out the CSS files.</p>
<p>The generated CSS isn't as small as it could be if you were to do this by hand.</p>
<p>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.</p>
</div>
</div>
</body>
</html>
?>