Permalink
Browse files

Better styling

  • Loading branch information...
1 parent 7a99617 commit 8a23ee745733a361047c205f998f681486b64dca @3rd-Eden committed Mar 26, 2012
Showing with 174 additions and 11 deletions.
  1. +136 −0 css/debug.css
  2. +22 −11 css/debug.min.css
  3. +16 −0 styl/debug.styl
View
@@ -1,18 +1,43 @@
html.debug [style]:not([scoped]) {
outline: 1px solid #ffa500;
+ position: relative;
+}
+html.debug [style]:not([scoped]):after {
+ background: #ffa500;
+ color: #fff;
+ font-weight: 600;
+ padding: 5px;
+ position: absolute;
}
html.debug [style]:not([scoped]):after {
content: "Don't use inline styles, replace it with external CSS definitions";
}
html.debug a[href*="javascript"] {
outline: 1px solid #f00;
+ position: relative;
+}
+html.debug a[href*="javascript"]:after {
+ background: #f00;
+ color: #fff;
+ font-weight: 600;
+ padding: 5px;
+ position: absolute;
}
html.debug a[href*="javascript"]:after {
content: "Don't use inline javascript, replace it with external JS files.";
}
html.debug a:not([href]):not([name]),
html.debug a[href=""]:not([name]) {
outline: 1px solid #f00;
+ position: relative;
+}
+html.debug a:not([href]):not([name]):after,
+html.debug a[href=""]:not([name]):after {
+ background: #f00;
+ color: #fff;
+ font-weight: 600;
+ padding: 5px;
+ position: absolute;
}
html.debug a:not([href]):not([name]):after,
html.debug a[href=""]:not([name]):after {
@@ -21,6 +46,15 @@ html.debug a[href=""]:not([name]):after {
html.debug img:not([alt]),
html.debug img[alt=""] {
outline: 1px solid #f00;
+ position: relative;
+}
+html.debug img:not([alt]):after,
+html.debug img[alt=""]:after {
+ background: #f00;
+ color: #fff;
+ font-weight: 600;
+ padding: 5px;
+ position: absolute;
}
html.debug img:not([alt]):after,
html.debug img[alt=""]:after {
@@ -33,6 +67,19 @@ html.debug video[src=""],
html.debug audio:not([src]),
html.debug audio[src=""] {
outline: 1px solid #f00;
+ position: relative;
+}
+html.debug img:not([src]):after,
+html.debug img[src=""]:after,
+html.debug video:not([src]):after,
+html.debug video[src=""]:after,
+html.debug audio:not([src]):after,
+html.debug audio[src=""]:after {
+ background: #f00;
+ color: #fff;
+ font-weight: 600;
+ padding: 5px;
+ position: absolute;
}
html.debug img:not([src]):after,
html.debug img[src=""]:after,
@@ -44,13 +91,30 @@ html.debug audio[src=""]:after {
}
html.debug iframe {
outline: 1px solid #ffa500;
+ position: relative;
+}
+html.debug iframe:after {
+ background: #ffa500;
+ color: #fff;
+ font-weight: 600;
+ padding: 5px;
+ position: absolute;
}
html.debug iframe:after {
content: "The use of iframes increases the loading times of your page.";
}
html.debug embed,
html.debug object {
outline: 1px solid #ffa500;
+ position: relative;
+}
+html.debug embed:after,
+html.debug object:after {
+ background: #ffa500;
+ color: #fff;
+ font-weight: 600;
+ padding: 5px;
+ position: absolute;
}
html.debug embed:after,
html.debug object:after {
@@ -80,6 +144,36 @@ html.debug u,
html.debug xml,
html.debug xmp {
outline: 1px solid #f00;
+ position: relative;
+}
+html.debug acronym:after,
+html.debug applet:after,
+html.debug basefont:after,
+html.debug big:after,
+html.debug center:after,
+html.debug dir:after,
+html.debug font:after,
+html.debug frame:after,
+html.debug frameset:after,
+html.debug isindex:after,
+html.debug layer:after,
+html.debug marquee:after,
+html.debug menu:after,
+html.debug nobr:after,
+html.debug noembed:after,
+html.debug noframes:after,
+html.debug nolayer:after,
+html.debug plaintext:after,
+html.debug spacer:after,
+html.debug strike:after,
+html.debug u:after,
+html.debug xml:after,
+html.debug xmp:after {
+ background: #f00;
+ color: #fff;
+ font-weight: 600;
+ padding: 5px;
+ position: absolute;
}
html.debug acronym:after,
html.debug applet:after,
@@ -108,6 +202,14 @@ html.debug xmp:after {
}
html.debug br[clear] {
outline: 1px solid #f00;
+ position: relative;
+}
+html.debug br[clear]:after {
+ background: #f00;
+ color: #fff;
+ font-weight: 600;
+ padding: 5px;
+ position: absolute;
}
html.debug br[clear]:after {
content: "Don't use the clear attribute on <br> tags.";
@@ -118,6 +220,18 @@ html.debug [alink],
html.debug [background],
html.debug [bgcolor] {
outline: 1px solid #f00;
+ position: relative;
+}
+html.debug [link]:after,
+html.debug [vlink]:after,
+html.debug [alink]:after,
+html.debug [background]:after,
+html.debug [bgcolor]:after {
+ background: #f00;
+ color: #fff;
+ font-weight: 600;
+ padding: 5px;
+ position: absolute;
}
html.debug [link]:after,
html.debug [vlink]:after,
@@ -142,6 +256,28 @@ html.debug [ontouchstart],
html.debug [ontouchend],
html.debug [ontouchmove] {
outline: 1px solid #f00;
+ position: relative;
+}
+html.debug [onmouseover]:after,
+html.debug [onmouseout]:after,
+html.debug [onmousedown]:after,
+html.debug [onmouseup]:after,
+html.debug [onclick]:after,
+html.debug [ondblclick]:after,
+html.debug [onmousemove]:after,
+html.debug [onload]:after,
+html.debug [onerror]:after,
+html.debug [onbeforeunload]:after,
+html.debug [onfocus]:after,
+html.debug [onblur]:after,
+html.debug [ontouchstart]:after,
+html.debug [ontouchend]:after,
+html.debug [ontouchmove]:after {
+ background: #f00;
+ color: #fff;
+ font-weight: 600;
+ padding: 5px;
+ position: absolute;
}
html.debug [onmouseover]:after,
html.debug [onmouseout]:after,
View
@@ -1,23 +1,34 @@
-html.debug [style]:not([scoped]){outline:1px solid #ffa500;}
+html.debug [style]:not([scoped]){outline:1px solid #ffa500;position:relative;}
+html.debug [style]:not([scoped]):after{background:#ffa500;color:#fff;font-weight:600;padding:5px;position:absolute}
html.debug [style]:not([scoped]):after{content:"Don't use inline styles, replace it with external CSS definitions"}
-html.debug a[href*="javascript"]{outline:1px solid #f00;}
+html.debug a[href*="javascript"]{outline:1px solid #f00;position:relative;}
+html.debug a[href*="javascript"]:after{background:#f00;color:#fff;font-weight:600;padding:5px;position:absolute}
html.debug a[href*="javascript"]:after{content:"Don't use inline javascript, replace it with external JS files."}
-html.debug a:not([href]):not([name]),html.debug a[href=""]:not([name]){outline:1px solid #f00;}
+html.debug a:not([href]):not([name]),html.debug a[href=""]:not([name]){outline:1px solid #f00;position:relative;}
+html.debug a:not([href]):not([name]):after,html.debug a[href=""]:not([name]):after{background:#f00;color:#fff;font-weight:600;padding:5px;position:absolute}
html.debug a:not([href]):not([name]):after,html.debug a[href=""]:not([name]):after{content:"Missing or empty href attribute."}
-html.debug img:not([alt]),html.debug img[alt=""]{outline:1px solid #f00;}
+html.debug img:not([alt]),html.debug img[alt=""]{outline:1px solid #f00;position:relative;}
+html.debug img:not([alt]):after,html.debug img[alt=""]:after{background:#f00;color:#fff;font-weight:600;padding:5px;position:absolute}
html.debug img:not([alt]):after,html.debug img[alt=""]:after{content:"Missing alt attribute."}
-html.debug img:not([src]),html.debug img[src=""],html.debug video:not([src]),html.debug video[src=""],html.debug audio:not([src]),html.debug audio[src=""]{outline:1px solid #f00;}
+html.debug img:not([src]),html.debug img[src=""],html.debug video:not([src]),html.debug video[src=""],html.debug audio:not([src]),html.debug audio[src=""]{outline:1px solid #f00;position:relative;}
+html.debug img:not([src]):after,html.debug img[src=""]:after,html.debug video:not([src]):after,html.debug video[src=""]:after,html.debug audio:not([src]):after,html.debug audio[src=""]:after{background:#f00;color:#fff;font-weight:600;padding:5px;position:absolute}
html.debug img:not([src]):after,html.debug img[src=""]:after,html.debug video:not([src]):after,html.debug video[src=""]:after,html.debug audio:not([src]):after,html.debug audio[src=""]:after{content:"Missing src attribute."}
-html.debug iframe{outline:1px solid #ffa500;}
+html.debug iframe{outline:1px solid #ffa500;position:relative;}
+html.debug iframe:after{background:#ffa500;color:#fff;font-weight:600;padding:5px;position:absolute}
html.debug iframe:after{content:"The use of iframes increases the loading times of your page."}
-html.debug embed,html.debug object{outline:1px solid #ffa500;}
+html.debug embed,html.debug object{outline:1px solid #ffa500;position:relative;}
+html.debug embed:after,html.debug object:after{background:#ffa500;color:#fff;font-weight:600;padding:5px;position:absolute}
html.debug embed:after,html.debug object:after{content:"Use native HTML5 implementions instead of plugins."}
-html.debug acronym,html.debug applet,html.debug basefont,html.debug big,html.debug center,html.debug dir,html.debug font,html.debug frame,html.debug frameset,html.debug isindex,html.debug layer,html.debug marquee,html.debug menu,html.debug nobr,html.debug noembed,html.debug noframes,html.debug nolayer,html.debug plaintext,html.debug spacer,html.debug strike,html.debug u,html.debug xml,html.debug xmp{outline:1px solid #f00;}
+html.debug acronym,html.debug applet,html.debug basefont,html.debug big,html.debug center,html.debug dir,html.debug font,html.debug frame,html.debug frameset,html.debug isindex,html.debug layer,html.debug marquee,html.debug menu,html.debug nobr,html.debug noembed,html.debug noframes,html.debug nolayer,html.debug plaintext,html.debug spacer,html.debug strike,html.debug u,html.debug xml,html.debug xmp{outline:1px solid #f00;position:relative;}
+html.debug acronym:after,html.debug applet:after,html.debug basefont:after,html.debug big:after,html.debug center:after,html.debug dir:after,html.debug font:after,html.debug frame:after,html.debug frameset:after,html.debug isindex:after,html.debug layer:after,html.debug marquee:after,html.debug menu:after,html.debug nobr:after,html.debug noembed:after,html.debug noframes:after,html.debug nolayer:after,html.debug plaintext:after,html.debug spacer:after,html.debug strike:after,html.debug u:after,html.debug xml:after,html.debug xmp:after{background:#f00;color:#fff;font-weight:600;padding:5px;position:absolute}
html.debug acronym:after,html.debug applet:after,html.debug basefont:after,html.debug big:after,html.debug center:after,html.debug dir:after,html.debug font:after,html.debug frame:after,html.debug frameset:after,html.debug isindex:after,html.debug layer:after,html.debug marquee:after,html.debug menu:after,html.debug nobr:after,html.debug noembed:after,html.debug noframes:after,html.debug nolayer:after,html.debug plaintext:after,html.debug spacer:after,html.debug strike:after,html.debug u:after,html.debug xml:after,html.debug xmp:after{content:"These elements have been depricated from the HTML specification."}
-html.debug br[clear]{outline:1px solid #f00;}
+html.debug br[clear]{outline:1px solid #f00;position:relative;}
+html.debug br[clear]:after{background:#f00;color:#fff;font-weight:600;padding:5px;position:absolute}
html.debug br[clear]:after{content:"Don't use the clear attribute on <br> tags."}
-html.debug [link],html.debug [vlink],html.debug [alink],html.debug [background],html.debug [bgcolor]{outline:1px solid #f00;}
+html.debug [link],html.debug [vlink],html.debug [alink],html.debug [background],html.debug [bgcolor]{outline:1px solid #f00;position:relative;}
+html.debug [link]:after,html.debug [vlink]:after,html.debug [alink]:after,html.debug [background]:after,html.debug [bgcolor]:after{background:#f00;color:#fff;font-weight:600;padding:5px;position:absolute}
html.debug [link]:after,html.debug [vlink]:after,html.debug [alink]:after,html.debug [background]:after,html.debug [bgcolor]:after{content:"Styling should be done with CSS, not using CSS attributes."}
-html.debug [onmouseover],html.debug [onmouseout],html.debug [onmousedown],html.debug [onmouseup],html.debug [onclick],html.debug [ondblclick],html.debug [onmousemove],html.debug [onload],html.debug [onerror],html.debug [onbeforeunload],html.debug [onfocus],html.debug [onblur],html.debug [ontouchstart],html.debug [ontouchend],html.debug [ontouchmove]{outline:1px solid #f00;}
+html.debug [onmouseover],html.debug [onmouseout],html.debug [onmousedown],html.debug [onmouseup],html.debug [onclick],html.debug [ondblclick],html.debug [onmousemove],html.debug [onload],html.debug [onerror],html.debug [onbeforeunload],html.debug [onfocus],html.debug [onblur],html.debug [ontouchstart],html.debug [ontouchend],html.debug [ontouchmove]{outline:1px solid #f00;position:relative;}
+html.debug [onmouseover]:after,html.debug [onmouseout]:after,html.debug [onmousedown]:after,html.debug [onmouseup]:after,html.debug [onclick]:after,html.debug [ondblclick]:after,html.debug [onmousemove]:after,html.debug [onload]:after,html.debug [onerror]:after,html.debug [onbeforeunload]:after,html.debug [onfocus]:after,html.debug [onblur]:after,html.debug [ontouchstart]:after,html.debug [ontouchend]:after,html.debug [ontouchmove]:after{background:#f00;color:#fff;font-weight:600;padding:5px;position:absolute}
html.debug [onmouseover]:after,html.debug [onmouseout]:after,html.debug [onmousedown]:after,html.debug [onmouseup]:after,html.debug [onclick]:after,html.debug [ondblclick]:after,html.debug [onmousemove]:after,html.debug [onload]:after,html.debug [onerror]:after,html.debug [onbeforeunload]:after,html.debug [onfocus]:after,html.debug [onblur]:after,html.debug [ontouchstart]:after,html.debug [ontouchend]:after,html.debug [ontouchmove]:after{content:"Use proper event listeners instead of event attributes."}
View
@@ -1,9 +1,25 @@
debug()
warning()
outline: 1px solid orange
+ position: relative
+
+ &:after
+ background: orange
+ color: #FFF
+ font-weight: 600
+ padding: 5px
+ position: absolute
error()
outline: 1px solid red
+ position: relative
+
+ &:after
+ background: red
+ color: #FFF
+ font-weight: 600
+ padding: 5px
+ position: absolute
[style]:not([scoped])
warning()

0 comments on commit 8a23ee7

Please sign in to comment.