mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-09-01 01:51:52 +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
const dedent = require("dedent");
const ejs = require("ejs");
const fs = require("fs");
@@ -12,8 +13,9 @@ function getCurrentId() {
function example(code) {
const magicBrackets = /\[\[(.*)\]\]/g;
const inline = code.replace(magicBrackets, "$1");
const escaped = code
const dedented = dedent(code);
const inline = dedented.replace(magicBrackets, "$1");
const escaped = dedented
.replace(magicBrackets, "")
.replace(/</g, "&lt;")
.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).
</p>
<div class="example">
<input type="checkbox" id="example<%= getNewId() %>">
<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>
<%- example(`
<input type="checkbox" id="example${getNewId()}">
<label for="example${getCurrentId()}">This is a checkbox</label>
`) %>
<p>
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.
</p>
<div class="example">
<%- example(`
<div class="field-row">
<input checked type="checkbox" id="example<%= getNewId() %>">
<label for="example<%= getCurrentId() %>">I am checked</label>
<input checked type="checkbox" id="example${getNewId()}">
<label for="example${getCurrentId()}">I am checked</label>
</div>
<div class="field-row">
<input disabled type="checkbox" id="example3">
<label for="example3">I am inactive</label>
<input disabled type="checkbox" id="example${getNewId()}">
<label for="example${getCurrentId()}">I am inactive</label>
</div>
<div class="field-row">
<input checked disabled type="checkbox" id="example4">
<label for="example4">I am inactive but still checked</label>
<input checked disabled type="checkbox" id="example${getNewId()}">
<label for="example${getCurrentId()}">I am inactive but still checked</label>
</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>
</section>
@@ -212,65 +190,36 @@
<code>field-row</code> class to ensure a consistent spacing between inputs.
</p>
<div class="example">
<%- example(`
<div class="field-row">
<input id="radio1" type="radio" name="first-example">
<label for="radio1">Yes</label>
<input id="radio${getNewId()}" type="radio" name="first-example">
<label for="radio${getCurrentId()}">Yes</label>
</div>
<div class="field-row">
<input id="radio2" type="radio" name="first-example">
<label for="radio2">No</label>
<input id="radio${getNewId()}" type="radio" name="first-example">
<label for="radio${getCurrentId()}">No</label>
</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>
Option buttons can also be <code>checked</code> and <code>disabled</code> with their corresponding
HTML attributes.
</p>
<div class="example">
<%- example(`
<div class="field-row">
<input id="radio3" type="radio" name="second-example">
<label for="radio3">Peanut butter should be smooth</label>
<input id="radio${getNewId()}" type="radio" name="second-example">
<label for="radio${getCurrentId()}">Peanut butter should be smooth</label>
</div>
<div class="field-row">
<input checked disabled id="radio4" type="radio" name="second-example">
<label for="radio4">I understand why people like crunchy peanut butter</label>
<input checked disabled id="radio${getNewId()}" type="radio" name="second-example">
<label for="radio${getCurrentId()}">I understand why people like crunchy peanut butter</label>
</div>
<div class="field-row">
<input disabled id="radio5" type="radio" name="second-example">
<label for="radio5">Crunchy peanut butter is good</label>
<input disabled id="radio${getNewId()}" type="radio" name="second-example">
<label for="radio${getCurrentId()}">Crunchy peanut butter is good</label>
</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>
</section>
</main>

6
package-lock.json generated
View File

@@ -4,6 +4,12 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"dedent": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
"integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
"dev": true
},
"ejs": {
"version": "3.0.2",
"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",
"devDependencies": {
"dedent": "^0.7.0",
"ejs": "^3.0.2"
}
}