Skip to content

Commit ad2a0f4

Browse files
riverspiritriverspirit
committed
Initial version. Working. Few demo styles added.
0 parents  commit ad2a0f4

3 files changed

Lines changed: 240 additions & 0 deletions

File tree

‎css/style.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
body {
2+
background: #EEEEEE;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
.list-container {
8+
float: left;
9+
width: 40%;
10+
margin-left: 20px;
11+
}
12+
13+
.list-controls {
14+
width: 40%;
15+
margin-left: 10px;
16+
border: 1px solid #4D4E53;
17+
float: left;
18+
padding: 10px;
19+
background: white;
20+
}
21+
22+
.code {
23+
border-left: 6px solid #558ABB;
24+
background: url("https://developer.cdn.mozilla.net/media/redesign/img/blueprint-dark.png");
25+
padding: 12px;
26+
}
27+
28+
.header h1 {
29+
margin: 0;
30+
padding: 0;
31+
font-family: Ubuntu, Arial, Tahoma, 'Sans Serif';
32+
}
33+
34+
.header {
35+
background: #27547E;
36+
margin: 0 0 10px 0;
37+
padding: 5px;
38+
color: white;
39+
}
40+
41+
.links-section {
42+
float: left;
43+
margin: 10px;
44+
color: #4D4E53;
45+
}
46+
47+
/* Demo styles */
48+
49+
@counter-style cs-cyclic {
50+
system: cyclic;
51+
symbols: ◆ ◇;
52+
suffix: " ";
53+
}
54+
55+
.demo-cyclic {
56+
list-style: cs-cyclic;
57+
}
58+
59+
@counter-style cs-fixed {
60+
system: fixed;
61+
symbols:          ;
62+
suffix: " ";
63+
}
64+
65+
.demo-fixed {
66+
list-style: cs-fixed;
67+
}
68+
69+
@counter-style cs-symbolic {
70+
system: symbolic;
71+
symbols: '*' ⁑ † ‡;
72+
range: 1 15;
73+
suffix: " ";
74+
}
75+
76+
.demo-symbolic {
77+
list-style: cs-symbolic;
78+
}
79+
80+
@counter-style cs-alphabetic {
81+
system: alphabetic;
82+
symbols: A B C D E;
83+
suffix: " ";
84+
}
85+
86+
.demo-alphabetic {
87+
list-style: cs-alphabetic;
88+
}
89+
90+
@counter-style cs-numeric {
91+
system: numeric;
92+
symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
93+
}
94+
95+
.demo-numeric {
96+
list-style: cs-numeric;
97+
}
98+
99+
.demo-lower-alpha {
100+
list-style: lower-alpha;
101+
}
102+
103+
.demo-upper-alpha {
104+
list-style: upper-alpha;
105+
}
106+

‎index.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>CSS @counter-style Demo</title>
6+
<link rel="stylesheet" href="css/style.css"/>
7+
</head>
8+
<body>
9+
<div class="header">
10+
<h1>CSS @counter-style Demo</h1>
11+
12+
</div>
13+
<div class="list-container">
14+
<ul id="demo-list" class="demo-cyclic">
15+
<li>One</li>
16+
<li>Two</li>
17+
<li>Three</li>
18+
<li>Four</li>
19+
<li>Five</li>
20+
<li>Six</li>
21+
<li>Seven</li>
22+
<li>Eight</li>
23+
<li>Nine</li>
24+
<li>Ten</li>
25+
<li>Eleven</li>
26+
<li>Twelve</li>
27+
<li>Thirteen</li>
28+
<li>Fourteen</li>
29+
<li>Fifteen</li>
30+
<li>Sixteen</li>
31+
<li>Seventeen</li>
32+
<li>Eighteen</li>
33+
<li>Nineteen</li>
34+
<li>Twenty</li>
35+
<li>Twenty One</li>
36+
<li>Twenty Two</li>
37+
<li>Twenty Three</li>
38+
<li>Twenty Four</li>
39+
<li>Twenty Five</li>
40+
<li>Twenty Six</li>
41+
<li>Twenty Seven</li>
42+
<li>Twenty Eight</li>
43+
<li>Twenty Nine</li>
44+
<li>Thirty</li>
45+
</ul>
46+
</div>
47+
48+
<div class="list-controls">
49+
<h3>Select a counter style from the list</h3>
50+
<select id="style-select">
51+
<optgroup label="System">
52+
<option value="cyclic">cyclic</option>
53+
<option value="fixed">fixed</option>
54+
<option value="symbolic">symbolic</option>
55+
</optgroup>
56+
<optgroup label="Predefined styles">
57+
<option value="lower-alpha">lower-alpha</option>
58+
<option value="upper-alpha">upper-alpha</option>
59+
</optgroup>
60+
</select>
61+
62+
63+
<pre class="code" id="code">
64+
@counter-style alternating {
65+
system: cyclic;
66+
additive-symbols: ◆ ◇;
67+
suffix: " ";
68+
}</pre>
69+
70+
</div>
71+
<div class="links-section">
72+
<i>Read more on <code>@counter-style</code> on
73+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style">Mozilla Developer Network</a></i>
74+
</div>
75+
<script src="js/script.js"></script>
76+
</body>
77+
</html>

‎js/script.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
(function () {
2+
var $styleSelect = document.querySelector('#style-select'),
3+
$demoList = document.querySelector('#demo-list'),
4+
$codeContainer = document.querySelector('#code');
5+
var examples = {
6+
'cyclic': {
7+
code: [
8+
'@counter-style alternating {\n',
9+
' system: cyclic;\n',
10+
' symbols: ◆ ◇;\n',
11+
' suffix: " ";\n',
12+
'}'
13+
].join('')
14+
},
15+
'fixed': {
16+
code: [
17+
'@counter-style circled-digits {\n',
18+
' system: fixed;\n',
19+
' symbols:          ;\n',
20+
' suffix: " ";\n',
21+
'}'
22+
].join('')
23+
},
24+
'symbolic': {
25+
code: [
26+
'@counter-style cs-symbolic {\n',
27+
' system: symbolic;\n',
28+
" symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';\n",
29+
' range: 1 15;\n',
30+
' suffix: " ";\n',
31+
'}'
32+
].join('')
33+
},
34+
'lower-alpha': {
35+
code: [
36+
'ul {\n',
37+
' list-style: lower-alpha;\n',
38+
'}'
39+
].join('')
40+
},
41+
'upper-alpha': {
42+
code: [
43+
"ul {\n",
44+
' list-style: upper-alpha;\n',
45+
'}'
46+
].join('')
47+
}
48+
};
49+
50+
$styleSelect.value = 'cyclic';
51+
52+
$styleSelect.addEventListener('change', function (e) {
53+
var selectedKey = $styleSelect.value;
54+
$codeContainer.innerHTML = examples[selectedKey].code;
55+
$demoList.className = 'demo-' + selectedKey;
56+
});
57+
})();

0 commit comments

Comments
 (0)