Getting Started

Getting Started

This page will guide you on how to get started with Cardboard. How to install, how to use it, and more. Take into account that meanwhile Cardboard works in many ways like other frameworks, you might need to learn some new ways of doing things. Don't worry though, they're pretty simple.

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';
// OR
import { tag, init, allTags } from './node_modules/cardboard-js/dist/cardboard.js';

Single file script

If you just want to add it to your site and start using Cardboard, you can import the bundle file:

<script src="node_modules/cardboard-js/dist/bundle/cardboard.bundle.js"></script>
<script>
const { div, p } = Carboard.allTags;
</script>

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, you can manually initialize:

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

Or use init to do this for you:

const root = init();

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.

Manipulation

There are several methods for modifying the attributes, styles, and classes of the associated HTML element. These methods are designed to make it easy to manipulate the appearance and behaviour of the element.

div().addClass('class1', 'class2');
div().addStyle('color', 'red');

Go to the Tag Manipulation Guide page for a more in-depth explanation and docs.

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 = () => {
  const count = state(0);

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

// 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, you can check this example for a more in-depth explanation.

Next, you'll find a list of resources and guides for more advanced topics.

Next

• Tags

• Attaching

• State

• Reusable Components

• Check the Examples section to view more examples

• Check the Documentation