Logo

TestUI

Test Site

  • edit Edit
  • man Hello
  • World
  • edit Edit
  • help Report bug
  • more_vert More
  • Universe

    UI Testbed for Click

    About

    Rik

    The R Interface Kit for Click. It aims to be a semantic (i.e., classless) CSS framework with minimal JS and classes that is highly opionated.

    See also: Click and Shtick

    Disabled

    Colors

    pri
    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950
    sec
    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950
    ter
    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950
    neu
    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950

    Dark

    night
    moon
    0
    1
    2
    3
    4
    5
    Pri
    Sec
    Ter
    Neu

    Light

    day
    sun
    0
    1
    2
    3
    4
    5
    Pri
    Sec
    Ter
    Neu

    Menu

    bar

  • man List item
  • No icon
  • Legend in a fieldset
  • edit Edit
  • link Link (anchor)
  • edit Edit
  • help After fieldset
  • Legend not in an anchorlink Link (anchor)
  • edit Edit
  • link Link (anchor)
  • man Hello
  • World
  • edit Edit
  • help Report bug
  • more_vertSubmenu
  • Icon

    Legend in a fieldset
  • edit Edit
  • link Link (anchor)
  • edit Edit
  • help After fieldset
  • Legend not in an anchorlink Link (anchor)
  • edit Edit
  • link Link (anchor)
  • man Hello
  • World
  • edit Edit
  • help Report bug
  • more_vertSubmenu
  • Simple

  • man List item
  • No icon
  • Legend in a fieldset
  • edit Edit
  • link Link (anchor)
  • edit Edit
  • help After fieldset
  • Legend not in an anchorlink Link (anchor)
  • edit Edit
  • link Link (anchor)
  • man Hello
  • World
  • edit Edit
  • help Report bug
  • Submenu
  • Quick View

    Dorothy wept bitterly at the passing of her hope to get home to Kansas again; but when she thought it all over she was glad she had not gone up in a balloon. And she also felt sorry at losing Oz, and so did her companions.

    Typography

    For three days Dorothy heard nothing from Oz. These were sad days for the little girl, although her friends were all quite happy and contented. The Scarecrow told them there were wonderful thoughts in his head; but he would not say what they were because he knew no one could understand them but himself. When the Tin Woodman walked about he felt his heart rattling around in his breast; and he told Dorothy he had discovered it to be a kinder and more tender heart than the one he had owned when he was made of flesh. The Lion declared he was afraid of nothing on earth, and would gladly face an army or a dozen of the fierce Kalidahs.

    Thus each of the little party was satisfied except Dorothy, who longed more than ever to get back to Kansas.

    On the fourth day, to her great joy, Oz sent for her, and when she entered the Throne Room he greeted her pleasantly:

    “Sit down, my dear; I think I have found the way to get you out of this country.”

    “And back to Kansas?” she asked eagerly.

    “Well, I’m not sure about Kansas,” said Oz, “for I haven’t the faintest notion which way it lies. But the first thing to do is to cross the desert, and then it should be easy to find your way home.”

    "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
    - Phasellus eget lacinia

    Lists

    • Aliquam lobortis lacus eu libero ornare facilisis.
    • Nam et magna at libero scelerisque egestas.
    • Suspendisse id nisl ut leo finibus vehicula quis eu ex.
    • Proin ultricies turpis et volutpat vehicula.

    Inline text elements

    Link

    Bold

    Italic

    Underline

    Deleted

    Inserted

    Strikethrough

    Small

    Text Sub

    Text Sup

    Abbr.

    Kbd

    Highlighted

    Heading 3

    Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    Heading 4

    Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus.

    Heading 5

    Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam sem.

    Heading 6

    Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in velit.

    A Labradog, the most chemistry of all puppies.
    A Labradog, the most chemistry of all puppies.

    Form elements

    Curabitur consequat lacus at lacus porta finibus.
    Checkboxes
    Radio buttons
    Switches

    Accordions

    Accordion 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.

    Accordion 2
    • Vestibulum id elit quis massa interdum sodales.
    • Nunc quis eros vel odio pretium tincidunt nec quis neque.
    • Quisque sed eros non eros ornare elementum.
    • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.

    Article

    Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra rutrum.

    Duis nec elit placerat, suscipit nibh quis, finibus neque.

    Group

    Progress bar

    Loading

    System Typography

    The little girl gave a cry of amazement and looked about her, her eyes growing bigger and bigger at the wonderful sights she saw.

    The cyclone had set the house down very gently—for a cyclone—in the midst of a country of marvelous beauty. There were lovely patches of greensward all about, with stately trees bearing rich and luscious fruits. Banks of gorgeous flowers were on every hand, and birds with rare and brilliant plumage sang and fluttered in the trees and bushes. A little way off was a small brook, rushing and sparkling along between green banks, and murmuring in a voice very grateful to a little girl who had lived so long on the dry, gray prairies.

    The Sights

    While she stood looking eagerly at the strange and beautiful sights, she noticed coming toward her a group of the queerest people she had ever seen. They were not as big as the grown folk she had always been used to; but neither were they very small. In fact, they seemed about as tall as Dorothy, who was a well-grown child for her age, although they were, so far as looks go, many years older.

    A subsection inside the area, system formatting. This should reset back if the parent is a passage as well (and be locked in the editor).

    A subsection inside the area, but a .passage instead. This should be locked inside the editor and should not affect anything else.

    Three were men and one a woman, and all were oddly dressed. They wore round hats that rose to a small point a foot above their heads, with little bells around the brims that tinkled sweetly as they moved. The hats of the men were blue; the little woman’s hat was white, and she wore a white gown that hung in pleats from her shoulders. Over it were sprinkled little stars that glistened in the sun like diamonds. The men were dressed in blue, of the same shade as their hats, and wore well-polished boots with a deep roll of blue at the tops. The men, Dorothy thought, were about as old as Uncle Henry, for two of them had beards. But the little woman was doubtless much older. Her face was covered with wrinkles, her hair was nearly white, and she walked rather stiffly.


    A List

    • Dorothy
    • Toto
    • Scarecrow
    • The Tin Man
    • The Cowardly Lion

    “Come along, Dorothy; you don’t want to get lost in this strange country, too. If I get lost, I shall fall asleep in a field of poppies.”

    — The Scarecrow

    Buttons


    .icon


    Same as above, but .icononly (mixing the two is okay)

    Broken:

    edit Anchor Button edit Span Button Anchor Button Span Button
    editEdit editEdit edit edit