-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (118 loc) · 5.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<!-- syntax highlighter files -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>
<!-- jQuery from Google's CDN -->
<script type="text/javascript">
document.write("\<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'>\<\/script>");
</script>
<script type="text/javascript">
$(function() {
$("input[type='submit']").click(function() {
// regular expression to grab a selector and property set
myregex = new RegExp("[^}]+{[^}]*}", "gi");
mymatch = $(".in").val().match(myregex);
// creating a string of 52 spaces, I'll use later
spaces = "";
for (var i=0;i<52;i++)
{
spaces += " ";
}
// cycle through each matched item
$.each(mymatch, function(index, value) {
// separate out the selector and the properties
cleanSelector = value.substring(0, value.indexOf("{"));
cleanProperties = value.substring(value.indexOf("{"));
// if there are comments outside of the selectors, pull them out
commentIndex = cleanSelector.lastIndexOf("*/");
comment = "";
if (commentIndex > -1) {
comment = cleanSelector.substring(0, commentIndex + 2) + "\n";
cleanSelector = cleanSelector.substring(commentIndex + 2);
}
// change all groups of spaces to one space and trim
cleanSelector = cleanSelector.replace(/[\s]+/g, " ").replace(/^\s*|\s*$/,"");
cleanProperties = cleanProperties.replace(/[\s]+/g, " ").replace(/^\s*|\s*$/,"");
// clean up the selector, adding new lines after ',', adding single spaces around '+' and '>'
cleanSelector = cleanSelector.replace(/,[\s]*/g, ",\n").replace(/[\s]*\+[\s]*/g, " + ").replace(/[\s]*\>[\s]*/g, " > ");
// Get the index of the end of the selector and the index of the last comma
selectorEndIndex = cleanSelector.length;
lastCommaIndex = cleanSelector.lastIndexOf(",");
if (lastCommaIndex < 0)
lastCommaIndex = 0;
else
lastCommaIndex += 2
// if the distance between the end and the last comma is greater than 50,
// then add a line break, otherwise, add the appropriate amount of spaces
if ((selectorEndIndex - lastCommaIndex) > 50)
cleanSelector += "\n" + spaces.substring(3);
else
cleanSelector += spaces.substring(selectorEndIndex - lastCommaIndex + 3);
// clean up the properties, adding a single space after ':', a new line after ';'
cleanProperties = cleanProperties.replace(/[\s]*:[\s]*/g, ": ").replace(/;[\s]*(?=[^\s}])/g, ";\n" + spaces.substring(1)).replace(/{[\s]*/g, "{ ").replace(/[\s]*}/g, " }").toLowerCase();
out = $(".out").val();
$(".out").val(out + comment + cleanSelector + cleanProperties + "\n\n");
});
});
});
</script>
<style type="text/css">
body {font-family: Helvetica, Arial, sans-serif;}
textarea {width: 100%; height: 8em;}
.field { margin-bottom: 2em; }
</style>
</head>
<body>
<h1>Tidy CSS</h1>
<p>I use a hybrid CSS formatting scheme. It's a mix between multi-line format and
single-line format with tabbing (see
<a href="http://css-tricks.com/different-ways-to-format-css/">CSS Tricks</a>
for more info). This style allows me to quickly browse
the selectors on the left as you can with inline, and it also allows
me to see the properties in order on the right without having to
scroll horizontally. This formmatter automatically formats css.</p>
<p>The code is over at <a href="https://github.com/reallyseth/tidy-css">Github</a>, so feel free to contribute or just straight copy for your own purposes.</p>
<p class="note">NOTE: There are some issues with comments inside
curly braces. But comments outside of the curlies will be ignored
and left alone.</p>
<h2>Before</h2>
<pre class="brush: css">
a[href^="mailto"]:hover { color: #cc0000; }
h2, .ms-rteElement-H2{
color: #cc0000;
font-size: 12px;
font-weight: bold;
margin-bottom: 0;
margin-top: 4px;
}
</pre>
<h2>After</h2>
<pre class="brush: css">
a[href^="mailto"]:hover { color: #cc0000; }
h2,
.ms-rteElement-H2 { color: #cc0000;
font-size: 12px;
font-weight: bold;
margin-bottom: 0;
margin-top: 4px; }
</pre>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
<div class="field">
<div class="label">Messy</div>
<textarea class="in"></textarea>
</div>
<div class="field">
<div class="label">Clean</div>
<textarea class="out"></textarea>
</div>
<input type="submit" value="clean up" />
<script>
</script>
</body>
</html>