Classify
Classify is a super lightweight JS library that gets rids of html that looks like this:
<div id="wrapper" class="class names that make line lengths way too long" >
<span id="inner" class="span with multiple class names"></span>
</div>
and turns it into this
<div id="wrapper" classify="wrapperclass" >
<span id="inner" classify="innerclass"></span>
</div>
creating cleaner looking HTML that is more readable.
Gettings Started
-
Create a seperate JS file for holding your class names, let's call it classnames.js
-
Place this script file as the first script tag in the head of your html document. It does not matter where you place your CSS tag, just as long as it comes first, or at least before the JS file that uses classify.
<html>
<head>
<title>My web app.</title>
<!-- classify.js comes first-->
<script src="classnames.js"></script>
<!-- The rest of the script tags come later.-->
<script src="otherscript.js"></script>
<script src="anotherscript.js"></script>
<!-- CSS can be above or below.-->
<link rel="stylesheet" href="mystyles.css" />
</head>
<body>
</body>
</html>
- Inside of your classnames.js file you will use the createMappings() function of the Classify object, this is what you will use to set what class names you want to be associated with the classify ID you choose.
Classify.createMappings(mappingObject [,data]);
Classify.createMappings({
red:'red big',
blue: 'blue',
green: 'green'
},false);
NOTE:
The createMappings() function takes an optional second parameter (set to false in this README), if the boolean value of true is provided, then Classify will look for the data-classify attribute, instead of the classify attribute seen in this readme. Using the data attribute will keep the HTML valid, for those of you who are concerned about passing the W3 validator.
The code above maps the classify ID 'red' to the classnames 'red' and 'big',and so fourth with the other attributes that are set.
Now you can set your html with the classify ID like so.
<div classify="red">
RED and BIG
</div>
<div classify="blue">
Blue
</div>
<div classify="green">
Green
</div>
classify will translate the given HTML to this:
<div classify="red" class="red big">
RED and BIG
</div>
<div classify="blue" class="blue">
Blue
</div>
<div classify="green" class="blue">
Green
</div>
Optional Methods
Classify currently has two optional methods, we will use the examples from above.
| Method Name | Return Value |
|---|---|
Classify.getMappings(); |
{red: "red big", blue: "blue", green: "green"} |
Classify.findMapping('red') |
"red big" |