Post History

75%

+4 −0

Q&A How to test CoDesign?

posted 2y ago by ArtOfCode‭

Answer

#1: Initial revision by

ArtOfCode‭ · 2021-08-07T10:47:15Z (over 2 years ago)

Copy Link

Raw

Markdown

I have a test page on my local dev environment so that I can test things. If you look at `.gitignore`, you'll find there's an ignore in there for `scratch/*` already.

Create a directory called `scratch`, add an `index.html` in there something like this:

```html
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Test Page</title>
    <link href="../dist/codidact.css" rel="stylesheet" type="text/css" />
    <script src="../js/co-design.js" type="application/javascript" defer></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="application/javascript"></script>
    <script src="scratch.js" type="application/javascript"></script>
</head>
<body>
    <header class="header is-dark h-bg-green-700">
        <div class="container header--container">
            <div class="header--brand">
                <a class="header--instance-name" href="#">Codidact</a>
                <a class="header--site-name" href="#">Gibberish</a>
            </div>
            <div class="header--menu">
                <a class="header--item is-visible-on-mobile is-complex" href="#">
                    <img src="https://placekitten.com/100/100" class="header--item-image" alt="..." />
                    <span class="header--alert">1</span>
                    <span class="header--trust-level">5</span>
                </a>
            </div>
        </div>
    </header>
    <main class="container">
        <!-- add whatever you want to test in here -->
    </main>
</body>
</html>
```

I also have a `scratch.js` file in the same directory so that I can test any JS functionality, but if you're just making CSS changes that HTML is all you'll need.

Communities

Post History