CSS Minifier - Open Source Tool

CSS Minifier - Open Source Tool

This CSS Minifier tool will help you to minify your css code easily. It supports different function of css code compression.

Greetings friends today we are going to build Css Minifier - Open Source Tool

As you know the HTML markup is essential for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.

Save It As index.html :

<!DOCTYPE html>
<html lang="en" ><head><meta charset="UTF-8"><title>Cara Memasang Tool CSS Minifier di Blogger</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><link rel="stylesheet" href="css/style.css"></head><body><div class="next-wrap"><div id="cssminifier"><span class="clear"></span><textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea><div class="button-group"><div class="box"><input class="opt1" id="stripAllComment" type="checkbox" /><label for="stripAllComment">Strip all comments</label><input class="opt2" id="superCompact" type="checkbox" /><label for="superCompact">Super compact</label><input class="opt3" id="betterIndentation" type="checkbox" /><label for="betterIndentation">Keep indentation</label><input checked="" class="opt4" id="keepLastComma" type="checkbox" /><label for="keepLastComma">Remove the last semicolon</label></div><button onclick="compressCSS("cssField");">Compress CSS</button><button onclick="clearField("cssField");">Clear Field</button><button onclick="selectAll("cssField");">Select All</button></div><div class="clear"></div></div>
</div><script  src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="js/index.js"></script></body></html>

If you want to copy code click on any code section code will be copied.

We have included jquery plugin in our above HTML code because we have used jquery code to make this css minifier tool work So if you already have jquery script included on your website remove this jquery script.

Without CSS our this script (Css Minifier - Open Source Tool) will never look good-looking. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.

So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.

Save It As style.css :

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);body{background:#2ecc71;font-family:'Open Sans', sans-serif;margin:0;padding:0;position:relative;line-height:normal}.next-wrap{position:relative;max-width:840px;margin:8% auto;background:#ecf0f1;color:#666;font-size:1em;line-height:normal;border-radius:5px;overflow:hidden;padding:20px;box-shadow:0 2px 0 rgba(0, 0, 0, 0.1)}#cssminifier{overflow:hidden;background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:0;border:1px solid rgba(0, 0, 0, 0.05)}#cssminifier textarea{overflow:hidden;width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New', Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05);border-radius:5px 5px 0 0;resize:none}textarea:focus{background-color:#FFF;color:#303030}#cssminifier .box{margin:10px auto 30px;color:rgba(255, 2255, 255, .6)}#cssminifier .box p{margin:0 0 2px}#cssminifier button{cursor:pointer}#cssminifier .col{width:48%;margin:0 auto 30px}#cssminifier .left{float:left;margin-left:1%}#cssminifier .right{float:right;margin-right:1%}#cssminifier .button-group{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}#cssminifier button,
#cssminifier button[disabled]:active{background:rgba(255, 255, 255, 0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s}#cssminifier button:hover,
#cssminifier button:active{background:#fff;color:#2980b9}#cssminifier button[disabled],
#cssminifier button[disabled]:active{background:#fff}#cssminifier .opt1,
#cssminifier .opt2,
#cssminifier .opt3,
#cssminifier .opt4,
#cssminifier .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}#cssminifier br{display:none}

So we have written HTML markup and customised it and now we will add some functionality in this project (Css Minifier - Open Source Tool).

To make this project (Css Minifier - Open Source Tool) work properly for that we will use JavaScript.

So here is a JavaScript for our project (Css Minifier - Open Source Tool) and also save it with the filename as provided. Make a new directory called js and put this file to that directory


Save It As index.js :

function get(e) {
return document.getElementById(e)
function highlightCode(e) {
if (hc.checked) {
var a = e.innerHTML;
a = a.replace(/\{([\s\S]+?)\}/g, function(e) {
return e.replace(/\"(.*?)\"/g, "<span class="st">"$1"</span>").replace(/\"(.*?)\"/g, "<span class="st">\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g, "$1<span class="pr">$2</span>:<span class="vl">$3</span>$4").replace(/<span class="pr">\{/g, "{<span class="pr">")
}), a = a.replace(/<(.*?)("|")(.*?)("|")>/g, function(e) {
return e.replace(/"(.*?)"/g, "<span class="vl">"$1"</span>").replace(/"(.*?)"/g, "<span class="vl">\"$1\"</span>")
}), a = a.replace(/\{([\s\S]+?)\}/g, function(e) {
return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g, "<span class="pn">$1</span>").replace(/\!important/gi, "<span class="im">!important</span>")
}), a = a.replace(/\/\*([\w\W]+?)\*\//gm, "<span class="cm">/*$1*/</span>"), e.innerHTML = "<code>" + a + "</code>", hr.style.display = "block", rt.style.display = "block"
} else hr.style.display = "none", rt.style.display = "none"
function compressCSS(e) {
var a = get(e),
c = /@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,
n = a.value,
t = n.length;
n = sa.checked || sc.checked ? n.replace(/\/\*[\w\W]*?\*\//gm, "") : n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm, "\n$2\n"), n = n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g, "$2"), n = sc.checked ? n : n.replace(/\}(?!\})/g, "}\n"), n = bi.checked ? n.replace(c, function(e) {
return e.replace(/\n+/g, "\n
}) : n.replace(c, function(e) {
return e.replace(/\n+/g, "")
}), n = bi.checked && !sc.checked ? n.replace(/\}\}/g, "}\n}") : n, n = bi.checked && !sc.checked ? n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g, "@$1$2{\n
") : n, n = cm.checked ? n.replace(/;\}/g, "}") : n.replace(/\}/g, ";}").replace(/;+\}/g, ";}").replace(/\};\}/g, "}}"), n = n.replace(/\:0(px|em|pt)/gi, ":0"), n = n.replace(/ 0(px|em|pt)/gi, " 0"), n = n.replace(/\s+\!important/gi, "!important"), n = n.replace(/(^\n+|\n+$)/, ""), a.value = n, hr.innerHTML = "/* " + (t - n.length) + " of " + t + " unused characters has been removed. */\n" + n.replace(/</g, "<").replace(/>/g, ">"), highlightCode(hr)
function clearField(e) {
var a = get(e);
a.value = "", a.focus()
function selectAll(e) {
get(e).focus(), get(e).select()
var hc = get("highlightCode"),
sa = get("stripAllComment"),
sc = get("superCompact"),
cm = get("keepLastComma"),
bi = get("betterIndentation"),
bs = get("breakSelector"),
tt = get("toTab"),
to = get("tabOpt").getElementsByTagName("input"),
sb = get("spaceBetween"),
ip = get("inlineSingleProp"),
rs = get("removeLastSemicolon"),
il = get("inlineLayout"),
si = get("singleBreak"),
hr = get("highlightedResult"),
rt = document.getElementsByTagName("h2")[1];

The above code is pure javascript it is not jquery code so if you did not add jquery plugin nothing happens..

Completion :

So here we are, We have done and our project Css Minifier - Open Source Tool is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.

  • Css Minifier - Open Source Tool
    • css
      • style.css
    • js
      • index.js
    • index.html

Download Project (Css Minifier - Open Source Tool) File :

Css Minifier - Open Source Tool.zip
File Size 3.06 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

I hope that this post help you a lot and I think you will appreciate it so don't take that appreciation with you if you like my post appreciate me in the comment form below.

Thank you !

Post a Comment

Help us improve this article by leaving your feedback below.
Previous Post Next Post