Karton CSS Showcase

KartonCSS

A lightweight, classless CSS framework inspired by cardboard-style design and Sakura CSS.
Designed to work beautifully with the KartonJS web component framework.
CDN Usage

Include Karton CSS in your HTML via CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kartoncss/karton.css" type="text/css">

Or minified:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kartoncss/karton.min.css" type="text/css">

KartonJS

KartonJS
A lightweight 'Lit-like' web component framework using this CSS framwork by default

Glossary

KartonCSS
A lightweight web component framework inspired by cardboard-style design.
Unboxed
A special render mode for Karton components when activated via URL.
State
An internal reactive data storage mechanism.

Media Examples

Video Demo

Sample Video

Contact Form

This is an info message.
Warning! Something needs your attention.
Error! Something needs your attention badly.

Modal Title

This is the modal content.

This is the modal content.

This is the modal content.

This is the modal content.

This is the modal content.

This is the modal content.

This is the modal content.

Paragraphs look like this. Font size along with line height and maximum width are optimized for reading.

Italic, bold, and monospace. Itemized lists look like:

  • this one
  • that one
  • the other one

Here's a block quote:

Man surprised me most about humanity. Because he sacrifices his health in order to make money. Then he sacrifices money to recuperate his health. And then he is so anxious about the future that he does not enjoy the present; the result being that he does not live in the present or the future; he lives as if he is never going to die, and then dies having never really lived. -James J Lachard

An h2 header

Some code blocks

define foobar() {
      print "Welcome to flavor country!";
  }
import time
        # Quick, count to ten!
        for i in range(10):
         # (but not *too* quick)
      time.sleep(0.5)
        print i

An h3 header

A nested list:

  1. First, get these ingredients:

    • carrots
    • celery
    • lentils

  2. Boil some water.

  3. Dump everything in the pot and follow this algorithm:

    find wooden spoon
    uncover pot
    stir
    cover pot
    balance wooden spoon precariously on pot handle
    wait 10 minutes
    goto first step (or shut off burner when done)

    Do not bump wooden spoon or it will fall.

Header level 1

Header level 2

Header level 3

Header level 4

Header level 5
Header level 6

A horizontal line:

Here's a link to a website, to a local doc, and to a section heading in the current doc. Here's a footnote 1.

Tables can look like this:

Shoes, their sizes, and what they're made of
size material color
9 leather brown
10 hemp canvas natural
11 glass transparent

Multi-line tables:

keyword text
red Sunsets, apples, and other red or reddish things.
green Leaves, grass, frogs and other things it's not easy being.

A horizontal rule follows.

Images are responsive by default:

example image

example image

Form Elements

Input fields

[Top]

Select menus

[Top]

Checkboxes

[Top]

Textareas

[Top]

Action buttons

[Top]

  1. Footnote text goes here.↩