Skip to content
This repository was archived by the owner on Apr 12, 2022. It is now read-only.

Commit 09f61a5

Browse files
anshu-krishnaanshu-krishna
committed
First Commit
1 parent 7a0056f commit 09f61a5

File tree

6 files changed

+648
-0
lines changed

6 files changed

+648
-0
lines changed

‎README.md

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
# JSCSS
2+
3+
#### I recomend using SASS/SCSS for creating insteadof this library. But, if for some reason you wish to create CSS in JavaScript this library might help.
4+
5+
### `class JSCSS` has 5 properties:
6+
- `style` : A `Proxy` for adding/removing styles in a block.
7+
8+
Example
9+
```javascript
10+
let mydiv = new JSCSS('#mydiv');
11+
12+
// Add styles
13+
mydiv.style.color = 'blue';
14+
mydiv.style.padding = '0.8em 1.2em';
15+
mydiv.style['box-shadow'] = '0 0 3px black';
16+
17+
// Multi-valued properties can be assigned using arrays
18+
mydiv.style.background = [
19+
'#844af0',
20+
'-webkit-gradient(linear, left top, left bottom, from(#844af0),to(#6d2de3))',
21+
'linear-gradient(to bottom, #844af0 0%,#6d2de3 100%)'
22+
];
23+
24+
// Remove style
25+
delete mydiv.style.background;
26+
```
27+
28+
- `selectors` : A string `Set` for adding and removing selectors in a block. See [Set MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) for more details on sets.
29+
30+
Example
31+
```javascript
32+
let highlight = new JSCSS;
33+
34+
// Add selectors
35+
highlight.selectors.add('div.bold');
36+
highlight.selectors.add('span.bold');
37+
38+
// Remove selector
39+
highlight.selectors.delete('div.bold');
40+
41+
// All the other Set functions are supported (like: has, entries etc.)
42+
```
43+
44+
- `child` : A `Proxy` for adding/removing sub-blocks. Sub-blocks act in a manner similar to that in SCSS.
45+
```scss
46+
/*SCSS*/
47+
#mydiv {
48+
color: blue;
49+
button {
50+
color: black;
51+
}
52+
}
53+
```
54+
When compiled to CSS becomes
55+
```css
56+
/*CSS*/
57+
#mydiv {
58+
color: blue;
59+
}
60+
#mydiv button {
61+
color: black;
62+
}
63+
```
64+
`child` is used to achieve the same result in JSCSS.
65+
66+
Example
67+
```javascript
68+
let mydiv = new JSCSS('#mydiv');
69+
mydiv.style.color = 'blue';
70+
mydiv.child.btn = new JSCSS('button');
71+
mydiv.child.btn.style.color = 'black';
72+
73+
//A more easily readable way to do this will be
74+
let mydiv = new JSCSS('#mydiv');
75+
mydiv.style.color = 'blue';
76+
mydiv.child.btn = new JSCSS('button').addStyles({
77+
color: 'black'
78+
});
79+
80+
// Or
81+
let mydiv = new JSCSS('#mydiv');
82+
mydiv.style.color = 'blue';
83+
84+
{
85+
let btn = new JSCSS('button');
86+
btn.style.color = 'black';
87+
88+
mydiv.child.btn = btn;
89+
}
90+
91+
/*
92+
When rendered this code will produce:
93+
#mydiv {
94+
color: blue;
95+
}
96+
#mydiv button {
97+
color: black;
98+
}
99+
*/
100+
```
101+
102+
- `styleElement` : A read-only reference to a `<style>` element containg the rendered CSS.
103+
104+
Example
105+
```javascript
106+
let mydiv = new JSCSS('#mydiv').addStyles({
107+
color: 'white',
108+
background: '#212121'
109+
});
110+
111+
document.head.appedChild(mydiv.styleElement);
112+
```
113+
114+
- `spaceFromParentSelector` : A boolean value. Default value is `true`. This determines if a space will be added between this block's selector and its parent block's selectors.
115+
116+
Example
117+
```javascript
118+
let buttons = new JSCSS('button', 'input[type="button"]').addStyles({
119+
color: 'white',
120+
background: '#212121'
121+
});
122+
123+
buttons.child.hover = new JSCSS(':hover').addStyles({
124+
background: 'blue'
125+
});
126+
127+
buttons.child.active = new JSCSS(':active').addStyles({
128+
background: 'darkblue'
129+
});
130+
131+
/*
132+
The above code will render:
133+
134+
button,
135+
input[type="button"] {
136+
color: white;
137+
background: #212121;
138+
}
139+
button :hover,
140+
input[type="button"] :hover {
141+
color: blue;
142+
}
143+
button :active,
144+
input[type="button"] :active {
145+
color: darkblue;
146+
}
147+
148+
Which is not what we intened.
149+
*/
150+
151+
// So we must disable the space between the child block selector (:hover, :active) and the parent selector (button, input[type="button"])
152+
153+
buttons.child.hover.spaceFromParentSelector = false;
154+
buttons.child.active.spaceFromParentSelector = false;
155+
156+
/*
157+
Now the rendered code will be what we intended:
158+
159+
button,
160+
input[type="button"] {
161+
color: white;
162+
background: #212121;
163+
}
164+
button:hover,
165+
input[type="button"]:hover {
166+
color: blue;
167+
}
168+
button:active,
169+
input[type="button"]:active {
170+
color: darkblue;
171+
}
172+
*/
173+
```
174+
175+
### `class JSCSS` has 7 functions:
176+
- `toString()` : Get the CSS string.
177+
178+
Example
179+
```javascript
180+
let mydiv = new JSCSS('#mydiv').addStyles({
181+
color: 'blue'
182+
});
183+
184+
console.log(mydiv.toString());
185+
/* Logs:
186+
#mydiv {
187+
color: blue;
188+
}
189+
*/
190+
```
191+
192+
- `addStyles(object [, ... object])` : Add multiple styles.
193+
194+
Example
195+
```javascript
196+
let mydiv = new JSCSS('#mydiv').addStyles({
197+
color: 'white',
198+
background: '#212121'
199+
}, { border: 'none' }, { 'font-size': '1.2em'});
200+
```
201+
202+
- `reRender()` : Update the CSS in the block's `<style>` element node.
203+
204+
- `deleteStyles()` : Removes all the styles from block.
205+
206+
- `copyStylesFrom(jscssObj)` : Remove all current block styles and then copy styles from the passed block.
207+
208+
- `mergeStylesFrom(jscssObj)` : Merge styles from passed block into current block.
209+
210+
- `unlinkFromDOM()` : If block's `<style>` element has been added in the document then it is removed from the document.

‎example1.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS CSS Example 1</title>
6+
<script src="js-css.js"></script>
7+
<style>
8+
input[type="checkbox"] {
9+
display: none;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<div class="mydiv">
15+
<button>One</button>
16+
<input type="button" value="Two" />
17+
<input type="checkbox" id="chk" /> <label for="chk">Three</label>
18+
</div>
19+
20+
<h3>Generated CSS:</h3>
21+
22+
<script>
23+
// This example demonstrates some the features of JSCSS
24+
25+
// Create a CSS block for ".mydiv"
26+
let mydiv = new JSCSS('.mydiv');
27+
28+
// Add styles to mydiv using the 'style' proxy
29+
mydiv.style['box-shadow'] = `0 0 3px black`;
30+
mydiv.style.padding = `0.5em 1em`;
31+
mydiv.style['text-align'] = 'center';
32+
33+
34+
// Create a CSS block for various buttons
35+
let buttons = new JSCSS(`button`, `input[type="button"]`, `input[type="checkbox"]+label`);
36+
37+
// Add more button selectors using the add function ('selectors' is a type of JS Set and hence supports all the Set functions)
38+
buttons.selectors.add(`input[type="submit"]`);
39+
40+
// Add styles to button using the 'addStyles' function
41+
buttons.addStyles({
42+
border: 'none',
43+
'border-radius': '1em',
44+
padding: '0.8em 1.2em',
45+
color: 'white',
46+
cursor: 'pointer',
47+
font: `1rem 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif`
48+
});
49+
50+
// Add multi valued property
51+
buttons.style.background = [
52+
`#844af0`,
53+
`-webkit-gradient(linear, left top, left bottom, from(#844af0),to(#6d2de3))`,
54+
`linear-gradient(to bottom, #844af0 0%,#6d2de3 100%)`
55+
];
56+
57+
// Remove buttons 'border-radius' using proxy
58+
delete buttons.style['border-radius'];
59+
60+
// Create a CSS block for hover conditions
61+
let hover = new JSCSS(':hover');
62+
63+
// Configure hover selector to have no space between it and its parent selector
64+
hover.spaceFromParentSelector = false;
65+
66+
hover.style.background = [
67+
`#4e10c2`,
68+
`-webkit-gradient(linear, left top, left bottom, from(#4e10c2),to(#4615a1))`,
69+
`linear-gradient(to bottom, #4e10c2 0%,#4615a1 100%)`
70+
];
71+
72+
// Set hover block to be child of buttons block (think of it as hover block is inside the buttons block in SCSS)
73+
buttons.child.hover = hover;
74+
75+
// Set buttons block to be a child of mydiv block
76+
mydiv.child.button = buttons;
77+
78+
// Display the generated CSS
79+
let pre = document.createElement('pre');
80+
pre.innerHTML = String(mydiv);
81+
document.body.appendChild(pre);
82+
83+
// Add the CSS in the document
84+
document.head.appendChild(mydiv.styleElement);
85+
86+
// After 5 seconds change some styles and re-render
87+
setTimeout(() => {
88+
mydiv.style.background = '#212121';
89+
mydiv.child.button.style['font-weight'] = 'bold';
90+
mydiv.reRender();
91+
92+
pre.innerHTML += `\n\n\nAfter 5 seconds:\n\n${mydiv}`;
93+
}, 5000);
94+
</script>
95+
</body>
96+
</html>

‎example2.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS CSS Example 2</title>
6+
<script src="js-css.js"></script>
7+
</head>
8+
<body>
9+
<div id="one">
10+
Hello World
11+
</div>
12+
<div id="two">
13+
Style will be copied here
14+
</div>
15+
<div id="three">
16+
Style will be merged here
17+
</div>
18+
<script>
19+
// This example demonstrates some the features of JSCSS
20+
21+
// Create CSS block for all three divs and add them to the document.
22+
let one = new JSCSS('#one');
23+
one.addStyles({
24+
"box-shadow": '0 0 3px black',
25+
padding: '0.8em 1.2em',
26+
background: '#212121',
27+
color: 'white',
28+
margin: '0.5em 0'
29+
});
30+
document.head.appendChild(one.styleElement);
31+
32+
let two = new JSCSS('#two').addStyles({
33+
'font-size': '5em'
34+
});
35+
document.head.appendChild(two.styleElement);
36+
37+
let three = new JSCSS('#three').addStyles({
38+
'font-size': '5em'
39+
});
40+
document.head.appendChild(three.styleElement);
41+
42+
// After 5 seconds
43+
setTimeout(() => {
44+
// Copy one's style in two. (Overwites all the styles of two)
45+
two.copyStylesFrom(one);
46+
two.reRender();
47+
48+
// Merge one's style in two. (Overwites a style value in two if it is also present in one)
49+
three.mergeStylesFrom(one);
50+
three.reRender();
51+
52+
// After 5 seconds
53+
setTimeout(() => {
54+
// Delete all style values from one
55+
one.deleteStyles();
56+
one.reRender();
57+
58+
// After 10 ms
59+
setTimeout(() => {
60+
// Remove one's styleElement from DOM
61+
one.unlinkFromDOM();
62+
}, 10);
63+
}, 5000);
64+
}, 5000);
65+
</script>
66+
</body>
67+
</html>

0 commit comments

Comments
 (0)