Getting Started

Getting Started

Guide on how to get started with Cardboard. How to install, how to use and more resources.

Installing

For now, Cardboard is not published on NPM or on any CDN sites. This is a priority for v1.0.0. For now, you can install from github:

npm install https://github.com/nombrekeff/cardboard-js

Importing

Then you can import the package, like any other.

import { tag, init, allTags } from 'cardboard-js';

I recommend destructuring allTags, for cleaner code:

const { div, p, span, b, script, button, style, a, hr } = allTags;

Initializing

To start adding stuff to the page, we first need to get a reference to some element already that's on the page. Here's how it's done:

const root = attach(tag('(body)'));

By using the tag function and providing a selector (a selector is indicated by the parenthesis (<selector>)) we can create a tag that represents that element in the page. The selector can be any selector valid inside querySelector.

Attaching

We also call attach with the tag. This attached an element, which means that we can then add tags to it without needing a reference to the tag. There's a page about Attaching with a better explanation.

But here's the basic overview. Take the last snippet, because we've attached the body, we can now do this:

p.attach("I'm a child of body");
attached().add(p("Child of body too"));

The p tags will be automatically added as childs of body without having a reference to it.

You can also attach more than once, and then go back to the previous attached tags:

const wrapper = div.attach();

attach(wrapper);
const childDiv = div.attach("I'm inside wrapper");

attach(childDiv);
p.attach("I'm inside child div!");
detach(); // Goes back to previously attached tag

p.attach("I'm now inside wrapper!");

Example

const Counter = () => {
  let counter = state({ count: 0 });

  return button()
    .text(`Clicked $count times`, counter)
    .addStyle('color', 'red')
    .addClass('clicker')
    .clicked((_) => counter.count++);
};

// Counter will be added to the body, as it's the attached tag.
attached().append(Counter());

The example above showcases a few of the basic aspects of Cardboard. Next, you'll find a list of resources and guides for more advanced topics

Further learning

• Attaching

• State

• Lifecycle

• Conditionals

• Reusable Components

• Tweening

• Check the Examples section to view more examples

• Check the Documentation