mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-09-08 21:20:50 +02:00
Code Issues Releases Wiki Activity

add dedent package and finish example usage

Browse Source
This commit is contained in:
Jordan Scales
2020-04-21 13:50:15 -04:00
parent 9338217743
commit f6a039905b
4 changed files with 37 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
build.js
View File

@@ -1,4 +1,5 @@
#!/usr/bin/env node #!/usr/bin/env node
const dedent = require("dedent");
const ejs = require("ejs"); const ejs = require("ejs");
const fs = require("fs"); const fs = require("fs");
@@ -12,8 +13,9 @@ function getCurrentId() {
function example(code) { function example(code) {
const magicBrackets = /\[\[(.*)\]\]/g; const magicBrackets = /\[\[(.*)\]\]/g;
const inline = code.replace(magicBrackets, "$1"); const dedented = dedent(code);
const escaped = code const inline = dedented.replace(magicBrackets, "$1");
const escaped = dedented
.replace(magicBrackets, "") .replace(magicBrackets, "")
.replace(/</g, "&lt;") .replace(/</g, "&lt;")
.replace(/>/g, "&gt;"); .replace(/>/g, "&gt;");

103
docs/index.html.ejs
View File

@@ -141,16 +141,10 @@
being able to click the entire label to select the box). being able to click the entire label to select the box).
</p> </p>
<div class="example"> <%- example(`
<input type="checkbox" id="example<%= getNewId() %>"> <input type="checkbox" id="example${getNewId()}">
<label for="example<%= getCurrentId() %>">This is a checkbox</label> <label for="example${getCurrentId()}">This is a checkbox</label>
`) %>
<details>
<summary>Show code</summary>
<pre><code>&lt;input type="checkbox" id="example1"&gt;
&lt;label for="example1"&gt;This is a checkbox&lt;/label&gt;</code></pre>
</details>
</div>
<p> <p>
Checkboxes can be selected and disabled with the standard <code>checked</code> and <code>disabled</code> Checkboxes can be selected and disabled with the standard <code>checked</code> and <code>disabled</code>
@@ -162,36 +156,20 @@
a consistent spacing between inputs. a consistent spacing between inputs.
</p> </p>
<div class="example"> <%- example(`
<div class="field-row"> <div class="field-row">
<input checked type="checkbox" id="example<%= getNewId() %>"> <input checked type="checkbox" id="example${getNewId()}">
<label for="example<%= getCurrentId() %>">I am checked</label> <label for="example${getCurrentId()}">I am checked</label>
</div> </div>
<div class="field-row"> <div class="field-row">
<input disabled type="checkbox" id="example3"> <input disabled type="checkbox" id="example${getNewId()}">
<label for="example3">I am inactive</label> <label for="example${getCurrentId()}">I am inactive</label>
</div> </div>
<div class="field-row"> <div class="field-row">
<input checked disabled type="checkbox" id="example4"> <input checked disabled type="checkbox" id="example${getNewId()}">
<label for="example4">I am inactive but still checked</label> <label for="example${getCurrentId()}">I am inactive but still checked</label>
</div> </div>
`) %>
<details>
<summary>Show code</summary>
<pre><code>&lt;div class="field-row"&gt;
&lt;input checked type="checkbox" id="example2"&gt;
&lt;label for="example2"&gt;I am checked&lt;/label&gt;
&lt;/div&gt;
&lt;div class="field-row"&gt;
&lt;input disabled type="checkbox" id="example3"&gt;
&lt;label for="example3"&gt;I am inactive&lt;/label&gt;
&lt;/div&gt;
&lt;div class="field-row"&gt;
&lt;input checked disabled type="checkbox" id="example4"&gt;
&lt;label for="example4"&gt;I am inactive but still checked&lt;/label&gt;
&lt;/div&gt;</code></pre>
</details>
</div>
</div> </div>
</section> </section>
@@ -212,65 +190,36 @@
<code>field-row</code> class to ensure a consistent spacing between inputs. <code>field-row</code> class to ensure a consistent spacing between inputs.
</p> </p>
<div class="example"> <%- example(`
<div class="field-row"> <div class="field-row">
<input id="radio1" type="radio" name="first-example"> <input id="radio${getNewId()}" type="radio" name="first-example">
<label for="radio1">Yes</label> <label for="radio${getCurrentId()}">Yes</label>
</div> </div>
<div class="field-row"> <div class="field-row">
<input id="radio2" type="radio" name="first-example"> <input id="radio${getNewId()}" type="radio" name="first-example">
<label for="radio2">No</label> <label for="radio${getCurrentId()}">No</label>
</div> </div>
`) %>
<details>
<summary>Show code</summary>
<pre><code>&lt;div class="field-row"&gt;
&lt;input id="radio1" type="radio" name="first-example"&gt;
&lt;label for="radio1"&gt;Yes&lt;/label&gt;
&lt;/div&gt;
&lt;div class="field-row"&gt;
&lt;input id="radio2" type="radio" name="first-example"&gt;
&lt;label for="radio2"&gt;No&lt;/label&gt;
&lt;/div&gt;</code></pre>
</details>
</div>
<p> <p>
Option buttons can also be <code>checked</code> and <code>disabled</code> with their corresponding Option buttons can also be <code>checked</code> and <code>disabled</code> with their corresponding
HTML attributes. HTML attributes.
</p> </p>
<div class="example"> <%- example(`
<div class="field-row"> <div class="field-row">
<input id="radio3" type="radio" name="second-example"> <input id="radio${getNewId()}" type="radio" name="second-example">
<label for="radio3">Peanut butter should be smooth</label> <label for="radio${getCurrentId()}">Peanut butter should be smooth</label>
</div> </div>
<div class="field-row"> <div class="field-row">
<input checked disabled id="radio4" type="radio" name="second-example"> <input checked disabled id="radio${getNewId()}" type="radio" name="second-example">
<label for="radio4">I understand why people like crunchy peanut butter</label> <label for="radio${getCurrentId()}">I understand why people like crunchy peanut butter</label>
</div> </div>
<div class="field-row"> <div class="field-row">
<input disabled id="radio5" type="radio" name="second-example"> <input disabled id="radio${getNewId()}" type="radio" name="second-example">
<label for="radio5">Crunchy peanut butter is good</label> <label for="radio${getCurrentId()}">Crunchy peanut butter is good</label>
</div> </div>
`) %>
<details>
<summary>Show code</summary>
<pre><code>&lt;div class="field-row"&gt;
&lt;input id="radio3" type="radio" name="second-example"&gt;
&lt;label for="radio3"&gt;Peanut butter should be smooth&lt;/label&gt;
&lt;/div&gt;
&lt;div class="field-row"&gt;
&lt;input checked disabled id="radio4" type="radio" name="second-example"&gt;
&lt;label for="radio4"&gt;I understand why people like crunchy peanut butter&lt;/label&gt;
&lt;/div&gt;
&lt;div class="field-row"&gt;
&lt;input disabled id="radio5" type="radio" name="second-example"&gt;
&lt;label for="radio5"&gt;Crunchy peanut butter is good&lt;/label&gt;
&lt;/div&gt;</code></pre>
</details>
</div>
</div> </div>
</section> </section>
</main> </main>

6
package-lock.json generated
View File

@@ -4,6 +4,12 @@
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
"dedent": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
"integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
"dev": true
},
"ejs": { "ejs": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/ejs/-/ejs-3.0.2.tgz", "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.0.2.tgz",

1
package.json
View File

@@ -25,6 +25,7 @@
}, },
"homepage": "https://github.com/jdan/windows98.css#readme", "homepage": "https://github.com/jdan/windows98.css#readme",
"devDependencies": { "devDependencies": {
"dedent": "^0.7.0",
"ejs": "^3.0.2" "ejs": "^3.0.2"
} }
} }