Skip to content

Commit b9a0f8c

Browse files
idist-hnidist-hn
committed
Rebuild
0 parents  commit b9a0f8c

File tree

18 files changed

+4271
-0
lines changed

18 files changed

+4271
-0
lines changed

‎.gitattributes‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
* linguist-vendored
2+
*.js linguist-vendored=false

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/node_modules

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018 Luca Gesmundo
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎Readme.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
2+
![](/gif/debucsser.gif)
3+
4+
# DebuCSSer
5+
6+
CSS debugging tool with an unpronounceable name.
7+
8+
### [Codepen Demo](https://codepen.io/lucagez/full/LMEerQ)
9+
10+
## Installation
11+
12+
If you are using a bundler:
13+
14+
`npm install debucsser`
15+
16+
Alternatively: download debucsser.js in /module folder and link it in your HTML.
17+
18+
_**A chrome extension is under development**_
19+
20+
## Why
21+
22+
Debucsser is a simple CSS debugging tool made to be unobtrusive in your workflow.
23+
24+
I often find myself applying an "outline" to a lot of elements on the page to see their dimensions.
25+
26+
With Debucsser I simply hold **`CTRL`** and move my mouse around to see the dimensions in px and apply an outline class to every element I hover.
27+
28+
If you hold **`CTRL`** + **`SHIFT`** you apply the outline class to all the elements on the page by adding a global class.
29+
30+
You can configure some parameters.
31+
32+
I find handy the possibility to specify a custom class I want to apply to different elements without the need to comment and uncomment the my css files.
33+
34+
## Usage
35+
36+
```javascript
37+
// only if you installed via NPM
38+
import Debucsser from 'debucsser';
39+
40+
// pass all the custom properties you want
41+
const config = {
42+
color: 'palevioletred', // color of the outline
43+
width: '4px', // width of the outline
44+
grayscaleOnDebugAll: true, // apply grayscale filter to every element
45+
customClass: 'exampleClass', // a class existent in your stylesheet
46+
}
47+
48+
// init the debugger
49+
const debug = new Debucsser(config).init();
50+
```
51+
52+
When you have done this, simply hold **`CTRL`** or **`CTRL`** + **`SHIFT`** and move the mouse around on the page.
53+
54+
## Props
55+
56+
| property | propType | default | description |
57+
| :-------------------- | ------------ | ------------: | :-------------------------------------------------------------------- |
58+
| `color` | { string } | palevioletred | Outline color. |
59+
| `width` | { string } | 3px | Outline width. |
60+
| `style` | { string } | solid | Outline style. |
61+
| `grayscaleOnDebug` | { bool } | false | Apply grayscale filter on hovered element while holding `CTRL`. |
62+
| `grayscaleOnDebugAll` | { bool } | false | Apply grayscale filter on all elements while holding `CTRL` + `SHIFT`.|
63+
| `customClass` | { string } | null | Apply custom class on hovered element while holding `CTRL`. |
64+
| `mainKey` | {number} | 17 | Set the key to use alternatively to `CTRL`. |
65+
| `secondKey` | {number} | 16 | Set the key to use alternatively to `SHIFT`. |
66+
67+
## Contributing
68+
69+
Fork ➡ new branch ➡ PR 🎉
70+
71+
**TODO:**
72+
73+
- [ ] Make a usable chrome extension (very experimental by now)
74+
- [ ] Improve default styling of label
75+
76+
If you have any idea on how to make Debucsser better don't hesitate 😎
77+
78+
#### License
79+
80+
MIT

‎app/index.html‎

Lines changed: 188 additions & 0 deletions
Large diffs are not rendered by default.

‎app/src/debucsser.js‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
class Debucsser {
2+
constructor(props) {
3+
this.config = props || {};
4+
this.color = this.config.color || 'palevioletred';
5+
this.width = this.config.width || '3px';
6+
this.style = this.config.style || 'solid';
7+
this.customClass = this.config.customClass || null;
8+
this.grayscaleOnDebug = this.config.grayscaleOnDebug || false;
9+
this.grayscaleOnDebugAll = this.config.grayscaleOnDebugAll || false;
10+
this.string = `${this.width} ${this.style} ${this.color}`;
11+
this.mainKey = this.config.mainKey || 17;
12+
this.secondKey = this.config.secondKey || 16;
13+
this.init = this.init.bind(this);
14+
this.debug = this.debug.bind(this);
15+
this.debugAll = this.debugAll.bind(this);
16+
this.stop = this.stop.bind(this);
17+
this.addClass = this.addClass.bind(this);
18+
this.labels = this.labels.bind(this);
19+
this.createGlobalClass = this.createGlobalClass.bind(this);
20+
this.removeGlobalClass = this.removeGlobalClass.bind(this);
21+
}
22+
init() {
23+
// initialize invisible label element => we'll make it visible on selected keystroke
24+
this.label = document.createElement('div');
25+
this.label.classList.add('debucsser-label');
26+
this.label.style = 'display: none;';
27+
document.body.appendChild(this.label);
28+
29+
this.inject_label_style();
30+
this.createDebugStyle();
31+
this.debug();
32+
this.globalStyle = this.createGlobalClass();
33+
}
34+
debug() {
35+
document.addEventListener('keydown', (key) => {
36+
if (key.keyCode == this.mainKey) {
37+
document.addEventListener('mousemove', this.labels, true);
38+
document.addEventListener('mouseover', this.addClass, true);
39+
document.addEventListener('keydown', this.debugAll, true);
40+
}
41+
this.stop();
42+
});
43+
}
44+
stop() {
45+
document.addEventListener('keyup', (key) => {
46+
if (key.keyCode == this.mainKey) {
47+
document.removeEventListener('mouseover', this.addClass, true);
48+
document.removeEventListener('mousemove', this.labels, true);
49+
this.label.style = 'display: none;';
50+
}
51+
})
52+
}
53+
addClass(over) {
54+
over.target.classList.add(this.customClass ? this.customClass : 'debucsser');
55+
document.addEventListener('mouseout', (out) => {
56+
out.target.classList.remove(this.customClass ? this.customClass : 'debucsser');
57+
}, true);
58+
}
59+
debugAll(key) {
60+
if (key.keyCode == this.secondKey) {
61+
document.body.appendChild(this.globalStyle);
62+
document.addEventListener('keyup', this.removeGlobalClass, true)
63+
}
64+
}
65+
createDebugStyle() {
66+
const style = document.createElement('style');
67+
style.innerHTML = `
68+
.debucsser {
69+
outline: ${this.string};
70+
${this.config.grayscaleOnDebug && 'filter: grayscale(100%);'}
71+
}
72+
`;
73+
document.body.appendChild(style);
74+
}
75+
createGlobalClass() {
76+
const global = document.createElement('style');
77+
global.innerHTML = `
78+
* {
79+
outline: ${this.string};
80+
${this.config.grayscaleOnDebugAll && 'filter: grayscale(100%);'}
81+
}
82+
`;
83+
return global;
84+
}
85+
removeGlobalClass(key) {
86+
if (key.keyCode == this.secondKey) {
87+
document.body.removeChild(this.globalStyle);
88+
}
89+
}
90+
labels(e) {
91+
if (e.target) {
92+
const classList = e.target.classList ? e.target.classList.value.replace('debucsser', '') : undefined;
93+
const id = e.target.id ? '#' + e.target.id : undefined;
94+
const dimensions = e.target.getBoundingClientRect();
95+
this.label.innerHTML = `
96+
<h2>class: <strong>${classList || `¯\\_(ツ)_/¯`}</strong></h2>
97+
<h2>id: <strong>${id || `¯\\_(ツ)_/¯`}</strong></h2>
98+
<h2><strong>${dimensions.width.toFixed(0)}px</strong> × <strong>${dimensions.height.toFixed(0)}px</strong></h2>
99+
`;
100+
this.label.style = `display: block; top:${e.clientY + 20}px; left:${e.clientX + 20}px;`;
101+
} else {
102+
this.label.style = 'display: none;';
103+
}
104+
}
105+
inject_label_style() {
106+
const style = document.createElement('style');
107+
style.innerHTML = `
108+
.debucsser-label {
109+
position: fixed;
110+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
111+
padding: 10px 20px;
112+
background: #333;
113+
border-radius: 3px;
114+
color: #f9f9f9;
115+
opacity: 0.9;
116+
z-index: 999;
117+
}
118+
.debucsser-label strong {
119+
color: palevioletred;
120+
}
121+
`;
122+
document.body.appendChild(style);
123+
}
124+
}
125+
126+
127+
// only for demo purpose
128+
const explain = document.querySelector('.explain');
129+
explain.querySelector('button').addEventListener('click', () => {
130+
explain.style.transform = 'translateX(2000px)';
131+
document.querySelector('.wrapper').style.filter = 'none';
132+
});

‎app/style.css‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
@import url('https://fonts.googleapis.com/css?family=UnifrakturCook:700');
2+
3+
/* ⬇ class for test purpose ⬇ */
4+
5+
.testShadow {
6+
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
7+
}
8+
9+
10+
/* ⬇ code useful only for this pen ⬇ */
11+
12+
body {
13+
margin: 0;
14+
font-family: Georgia, serif;
15+
}
16+
17+
hr {
18+
width: 70%;
19+
}
20+
21+
button {
22+
display: block;
23+
margin: auto;
24+
border: none;
25+
padding: 10px 20px;
26+
border-radius: 3px;
27+
color: #444;
28+
font-size: 21px;
29+
cursor: pointer;
30+
}
31+
32+
.wrapper {
33+
filter: brightness(10%);
34+
width: 100%;
35+
margin: 0;
36+
display: grid;
37+
grid-gap: 10px;
38+
grid-template-columns: 3fr 2fr;
39+
grid-template-rows: auto;
40+
grid-template-areas:
41+
"header header"
42+
"main sidebar"
43+
"article-container sidebar";
44+
background-color: #fff;
45+
color: #444;
46+
}
47+
48+
.box {
49+
color: #444;
50+
padding: 20px;
51+
}
52+
53+
.header {
54+
grid-area: header;
55+
text-align: center;
56+
}
57+
58+
.header h1 {
59+
font-family: 'UnifrakturCook', cursive;
60+
font-size: 48px;
61+
margin: 0;
62+
}
63+
64+
#main-article {
65+
grid-area: main;
66+
border-right: 1px solid #999;
67+
}
68+
69+
#main-article .content {
70+
padding: 0 20px;
71+
-webkit-columns: 150px 3;
72+
-moz-columns: 150px 3;
73+
columns: 150px 3;
74+
}
75+
76+
aside .content {
77+
padding: 0 20px;
78+
-webkit-columns: 150px 2;
79+
-moz-columns: 150px 2;
80+
columns: 150px 2;
81+
}
82+
83+
84+
.sidebar {
85+
grid-area: sidebar;
86+
}
87+
88+
.article-container {
89+
grid-area: article-container;
90+
display: grid;
91+
grid-template-columns: 1fr 1fr 1fr;
92+
}
93+
94+
.content {
95+
margin: 40px 0 40px 0;
96+
font-family: Georgia, serif;
97+
font-weight: 400;
98+
}
99+
100+
.main-article-image, .The-luckiest-man, .Demostenes, #Chief-Joseph, #jfk, #Alexander {
101+
border-radius: 3px;
102+
display: block;
103+
margin: auto;
104+
}
105+
106+
.git {
107+
margin: 20px;
108+
}
109+
110+
.explain {
111+
opacity: 0.9;
112+
background: #444;
113+
color: #fff;
114+
position: fixed;
115+
max-width: 500px;
116+
max-height: 500px;
117+
padding: 30px;
118+
z-index: 999;
119+
border-radius: 3px;
120+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
121+
top: 50%;
122+
left: 50%;
123+
transition: transform 1s;
124+
transform: translate(-50%, -50%);
125+
}
126+
127+
.explain h1, .explain strong {
128+
color: palegoldenrod;
129+
}
130+
131+
@media screen and (max-width: 960px) {
132+
.article-container {
133+
grid-template-columns: 1fr 1fr;
134+
}
135+
}
136+
137+
@media screen and (max-width: 1024px) {
138+
.wrapper {
139+
grid-template-columns: auto;
140+
grid-template-areas:
141+
"header"
142+
"main"
143+
"sidebar"
144+
"article-container";
145+
}
146+
}

0 commit comments

Comments
 (0)