• Cart is empty

CIBIS Front-end Framework - Content

Table of Contents

1.0 Base

html, body etc

1.1 Links

link

1.2 Typography

Lorem ipsum dolor sit amet, link . Curabitur vel tortor ac lorem malesuada ultricies. Aliquam augue urna, egestas consequat tincidunt sed, viverra at eros. Sed tempus vehicula purus a blandit. Vestibulum tincidunt, lectus at tempor imperdiet, hover on me i'm a tooltip risus velit egestas libero, ac aliquet neque sem et quam. Vestibulum strong sagittis ultrices, sup nisl sub luctus et ultrices posuere cubilia Curae; Fusce ut sem a nulla sodales lacinia id vel erat. Aenean eget porttitor mi. em, vestibulum nec egestas ac, b justo. Suspendisse at nisi at odio pulvinar suscipit sit amet quis est.

Nunc aliquam justo ornare augue congue fringilla. Nullam eu nisl ac mi pellentesque interdum. Donec eget tortor erat. In non ligula velit. Proin sollicitudin sem et quam blandit semper ut a purus. Fusce eu lectus vitae sapien facilisis facilisis. Duis vel massa augue. Phasellus in augue nisi. Vestibulum lectus odio, ornare vitae dignissim in, gravida eget ipsum. Maecenas nec risus scelerisque ipsum mollis mollis. Praesent tempor, nulla eu volutpat malesuada, diam urna egestas lectus, ut euismod dui nisl vel ipsum. Vestibulum aliquet congue elit at venenatis.

In fermentum volutpat libero sit amet venenatis. Phasellus elit lorem, hendrerit id molestie sit amet, laoreet non urna. Integer justo est, tempor quis scelerisque sit amet, aliquam sit amet diam. Morbi vehicula fringilla nulla, et viverra lacus faucibus ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis velit quis erat interdum eu lacinia nibh laoreet. Aenean lacus libero, porttitor venenatis tempus id, laoreet vitae augue.

Heading 1

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vestibulum lorem id lectus dictum vel varius nibh pretium. Pellentesque lobortis pharetra risus, id hendrerit neque lacinia sit amet. Suspendisse quis dui vehicula erat mattis dignissim.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Lorem ipsum dolor sit amet, link . Curabitur vel tortor ac lorem malesuada ultricies. Aliquam augue urna, egestas consequat tincidunt sed, viverra at eros. Sed tempus vehicula purus a blandit. Vestibulum tincidunt, lectus at tempor imperdiet, risus velit egestas libero, ac aliquet neque sem et quam. Vestibulum strong sagittis ultrices, sup nisl sub luctus et ultrices posuere cubilia Curae; Fusce ut sem a nulla sodales lacinia id vel erat. Aenean eget porttitor mi. em, vestibulum nec egestas ac, b justo. Suspendisse at nisi at odio pulvinar suscipit sit amet quis est.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vestibulum lorem id lectus dictum vel varius nibh pretium. Pellentesque lobortis pharetra risus, id hendrerit neque lacinia sit amet. Suspendisse quis dui vehicula erat mattis dignissim.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vestibulum lorem id lectus dictum vel varius nibh pretium. Pellentesque lobortis pharetra risus, id hendrerit neque lacinia sit amet. Suspendisse quis dui vehicula erat mattis dignissim.

Heading 2

Lorem ipsum dolor sit amet, link . Curabitur vel tortor ac lorem malesuada ultricies. Aliquam augue urna, egestas consequat tincidunt sed, viverra at eros. Sed tempus vehicula purus a blandit. Vestibulum tincidunt, lectus at tempor imperdiet, risus velit egestas libero, ac aliquet neque sem et quam. Vestibulum strong sagittis ultrices, sup nisl sub luctus et ultrices posuere cubilia Curae; Fusce ut sem a nulla sodales lacinia id vel erat. Aenean eget porttitor mi. em, vestibulum nec egestas ac, b justo. Suspendisse at nisi at odio pulvinar suscipit sit amet quis est.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vestibulum lorem id lectus dictum vel varius nibh pretium. Pellentesque lobortis pharetra risus, id hendrerit neque lacinia sit amet. Suspendisse quis dui vehicula erat mattis dignissim.

Heading 3

Lorem ipsum dolor sit amet, link . Curabitur vel tortor ac lorem malesuada ultricies. Aliquam augue urna, egestas consequat tincidunt sed, viverra at eros. Sed tempus vehicula purus a blandit. Vestibulum tincidunt, lectus at tempor imperdiet, risus velit egestas libero, ac aliquet neque sem et quam. Vestibulum strong sagittis ultrices, sup nisl sub luctus et ultrices posuere cubilia Curae; Fusce ut sem a nulla sodales lacinia id vel erat. Aenean eget porttitor mi. em, vestibulum nec egestas ac, b justo. Suspendisse at nisi at odio pulvinar suscipit sit amet quis est.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vestibulum lorem id lectus dictum vel varius nibh pretium. Pellentesque lobortis pharetra risus, id hendrerit neque lacinia sit amet. Suspendisse quis dui vehicula erat mattis dignissim.

Heading 4

Lorem ipsum dolor sit amet, link . Curabitur vel tortor ac lorem malesuada ultricies. Aliquam augue urna, egestas consequat tincidunt sed, viverra at eros. Sed tempus vehicula purus a blandit. Vestibulum tincidunt, lectus at tempor imperdiet, risus velit egestas libero, ac aliquet neque sem et quam. Vestibulum strong sagittis ultrices, sup nisl sub luctus et ultrices posuere cubilia Curae; Fusce ut sem a nulla sodales lacinia id vel erat. Aenean eget porttitor mi. em, vestibulum nec egestas ac, b justo. Suspendisse at nisi at odio pulvinar suscipit sit amet quis est.

Heading 1
that wraps

Heading 2
that wraps

Heading 3
that wraps

Heading 4
that wraps

Lorem ipsum dolor sit amet, link . Curabitur vel tortor ac lorem malesuada ultricies. Aliquam augue urna, egestas consequat tincidunt sed, viverra at eros. Sed tempus vehicula purus a blandit. Vestibulum tincidunt, lectus at tempor imperdiet, risus velit egestas libero, ac aliquet neque sem et quam. Vestibulum strong sagittis ultrices, sup nisl sub luctus et ultrices posuere cubilia Curae; Fusce ut sem a nulla sodales lacinia id vel erat. Aenean eget porttitor mi. em, vestibulum nec egestas ac, b justo. Suspendisse at nisi at odio pulvinar suscipit sit amet quis est.

Heading 1

Suspendisse potenti. Aenean sagittis interdum lectus. Quisque mi metus, blandit nec, nonummy sit amet, congue vel, ante. Ut ultricies, mauris ut sagittis ultrices, ipsum, ac faucibus augue pede at risus.

Aliquam lectus nisl, congue id, sagittis non, pharetra eget, mi. Etiam arcu purus, feugiat rhoncus, accumsan non, lacinia et, lorem. Aliquam sodales elit et orci.

Heading 2

Suspendisse potenti. Aenean sagittis interdum lectus. Quisque mi metus, blandit nec, nonummy sit amet, congue vel, ante. Ut ultricies, mauris ut sagittis ultrices, odio nisl facilisis ipsum, ac faucibus augue pede at risus. Aliquam lectus nisl, congue id, sagittis non, pharetra eget, mi. Etiam arcu purus, feugiat rhoncus, accumsan non, lacinia et, lorem. Aliquam sodales elit et orci.

Heading 3

Aliquam lectus nisl, congue id, sagittis non, pharetra eget, mi. Etiam arcu purus, feugiat rhoncus, accumsan non, lacinia et, lorem. Aliquam sodales elit et orci.

Heading 4

Etiam arcu purus, feugiat rhoncus, accumsan non, lacinia et, lorem. Aliquam sodales elit et orci.

Suspendisse potenti. Aenean sagittis interdum lectus. Quisque mi metus, blandit nec, nonummy sit amet, congue vel, ante. Ut ultricies, mauris ut sagittis ultrices, odio nisl facilisis ipsum, ac faucibus augue pede at risus. Aliquam lectus nisl, congue id, sagittis non, pharetra eget, mi. Etiam arcu purus, feugiat rhoncus, accumsan non, lacinia et, lorem. Aliquam sodales elit et orci.

Heading 1

Sub Heading 2

Suspendisse potenti. Aenean sagittis interdum lectus. Quisque mi metus, blandit nec, nonummy sit amet, congue vel, ante. Ut ultricies, mauris ut sagittis ultrices, odio nisl facilisis ipsum, ac faucibus augue pede at risus. Aliquam lectus nisl, congue id, sagittis non, pharetra eget, mi. Etiam arcu purus, feugiat rhoncus, accumsan non, lacinia et, lorem. Aliquam sodales elit et orci.

Suspendisse potenti. Aenean sagittis interdum lectus. Quisque mi metus, blandit nec, nonummy sit amet, congue vel, ante. Ut ultricies, mauris ut sagittis ultrices, odio nisl facilisis ipsum, ac faucibus augue pede at risus. Aliquam lectus nisl, congue id, sagittis non, pharetra eget, mi. Etiam arcu purus, feugiat rhoncus, accumsan non, lacinia et, lorem. Aliquam sodales elit et orci.

Heading 2

Sub Heading 3

Suspendisse potenti. Aenean sagittis interdum lectus. Quisque mi metus, blandit nec, nonummy sit amet, congue vel, ante. Ut ultricies, mauris ut sagittis ultrices, odio nisl facilisis ipsum, ac faucibus augue pede at risus. Aliquam lectus nisl, congue id, sagittis non, pharetra eget, mi. Etiam arcu purus, feugiat rhoncus, accumsan non, lacinia et, lorem. Aliquam sodales elit et orci.

Suspendisse potenti. Aenean sagittis interdum lectus. Quisque mi metus, blandit nec, nonummy sit amet, congue vel, ante. Ut ultricies, mauris ut sagittis ultrices, odio nisl facilisis ipsum, ac faucibus augue pede at risus. Aliquam lectus nisl, congue id, sagittis non, pharetra eget, mi. Etiam arcu purus, feugiat rhoncus, accumsan non, lacinia et, lorem. Aliquam sodales elit et orci.

Heading 3 as 4

Sub Heading 4 as 5

Suspendisse potenti. Aenean sagittis interdum lectus. Quisque mi metus, blandit nec, nonummy sit amet, congue vel, ante. Ut ultricies, mauris ut sagittis ultrices, odio nisl facilisis ipsum, ac faucibus augue pede at risus. Aliquam lectus nisl, congue id, sagittis non, pharetra eget, mi. Etiam arcu purus, feugiat rhoncus, accumsan non, lacinia et, lorem. Aliquam sodales elit et orci.

Suspendisse potenti. Aenean sagittis interdum lectus. Quisque mi metus, blandit nec, nonummy sit amet, congue vel, ante. Ut ultricies, mauris ut sagittis ultrices, odio nisl facilisis ipsum, ac faucibus augue pede at risus. Aliquam lectus nisl, congue id, sagittis non, pharetra eget, mi. Etiam arcu purus, feugiat rhoncus, accumsan non, lacinia et, lorem. Aliquam sodales elit et orci.

This is some breakout text, .breakout class on a single paragraph.

This is some breakout text, multiple paragraphs, .breakout class on containing div.

In convallis fermentum tempus. Nunc vitae mi massa, sit amet dapibus nisi. Praesent dapibus volutpat elit, sit amet laoreet mauris mollis eu. Mauris porta tellus eu massa condimentum in semper nibh pellentesque.

This is a blockquote. It stands out.

cite - Andrew Strong

Lorem ipsum dolor sit amet, link . Curabitur vel tortor ac lorem malesuada ultricies. Aliquam augue urna, egestas consequat tincidunt sed, viverra at eros. Sed tempus vehicula purus a blandit. Vestibulum tincidunt, lectus at tempor imperdiet, risus velit egestas libero, ac aliquet neque sem et quam. Vestibulum strong sagittis ultrices, sup nisl sub luctus et ultrices posuere cubilia Curae; Fusce ut sem a nulla sodales lacinia id vel erat. Aenean eget porttitor mi. em, vestibulum nec egestas ac, b justo. Suspendisse at nisi at odio pulvinar suscipit sit amet quis est.

header h1 a {color: black}

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vestibulum lorem id lectus dictum vel varius nibh pretium. Pellentesque lobortis pharetra risus, id hendrerit neque lacinia sit amet. Suspendisse quis dui vehicula erat mattis dignissim.

1.3 Lists

Navigation Lists

Unordered Lists

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • List item
    • List item
    • List item
    • List item
  • List item
  • List item
  • List item
    1. List item
    2. List item
    3. List item
  • List item
  • List item

Ordered Lists

  1. List item
  2. List item
  3. List item
  1. List item
  2. List item
  3. List item
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  1. List item
    1. List item
    2. List item
    3. List item
  2. List item
  3. List item
  1. List item
    • List item
    • List item
    • List item
  2. List item
  3. List item

Definition Lists

Definition Title
Definition Description
Definition Title
Definition Description
Definition Title
Definition Description

Lists Next to a Floated Element

Karl Dilkington

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Lorem ipsum dolor sit amet, link . Curabitur vel tortor ac lorem malesuada ultricies. Aliquam augue urna, egestas consequat tincidunt sed, viverra at eros. Sed tempus vehicula purus a blandit. Vestibulum tincidunt, lectus at tempor imperdiet, risus velit egestas libero, ac aliquet neque sem et quam. Vestibulum strong sagittis ultrices, sup nisl sub luctus et ultrices posuere cubilia Curae; Fusce ut sem a nulla sodales lacinia id vel erat. Aenean eget porttitor mi. em, vestibulum nec egestas ac, b justo. Suspendisse at nisi at odio pulvinar suscipit sit amet quis est.

Karl Dilkington

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.

1.4 Embedded Content

Steve, Ricky and Karl

Karl Dilkington Lorem ipsum dolor sit amet, link . Curabitur vel tortor ac lorem malesuada ultricies. Aliquam augue urna, egestas consequat tincidunt sed, viverra at eros. Sed tempus vehicula purus a blandit. Vestibulum tincidunt, lectus at tempor imperdiet, hover on me i'm a tooltip risus velit egestas libero, ac aliquet neque sem et quam. Vestibulum strong sagittis ultrices, sup nisl sub luctus et ultrices posuere cubilia Curae; Fusce ut sem a nulla sodales lacinia id vel erat. Aenean eget porttitor mi. em, vestibulum nec egestas ac, b justo. Suspendisse at nisi at odio pulvinar suscipit sit amet quis est.

Karl Dilkington Lorem ipsum dolor sit amet, link . Curabitur vel tortor ac lorem malesuada ultricies. Aliquam augue urna, egestas consequat tincidunt sed, viverra at eros. Sed tempus vehicula purus a blandit. Vestibulum tincidunt, lectus at tempor imperdiet, hover on me i'm a tooltip risus velit egestas libero, ac aliquet neque sem et quam. Vestibulum strong sagittis ultrices, sup nisl sub luctus et ultrices posuere cubilia Curae; Fusce ut sem a nulla sodales lacinia id vel erat. Aenean eget porttitor mi. em, vestibulum nec egestas ac, b justo. Suspendisse at nisi at odio pulvinar suscipit sit amet quis est.

Karl Dilkington Lorem ipsum dolor sit amet, link . Curabitur vel tortor ac lorem malesuada ultricies. Aliquam augue urna, egestas consequat tincidunt sed, viverra at eros. Sed tempus vehicula purus a blandit. Vestibulum tincidunt, lectus at tempor imperdiet, hover on me i'm a tooltip risus velit egestas libero, ac aliquet neque sem et quam. Vestibulum strong sagittis ultrices, sup nisl sub luctus et ultrices posuere cubilia Curae; Fusce ut sem a nulla sodales lacinia id vel erat. Aenean eget porttitor mi. em, vestibulum nec egestas ac, b justo. Suspendisse at nisi at odio pulvinar suscipit sit amet quis est.

Karl Dilkington Lorem ipsum dolor sit amet, link . Curabitur vel tortor ac lorem malesuada ultricies. Aliquam augue urna, egestas consequat tincidunt sed, viverra at eros. Sed tempus vehicula purus a blandit. Vestibulum tincidunt, lectus at tempor imperdiet, hover on me i'm a tooltip risus velit egestas libero, ac aliquet neque sem et quam. Vestibulum strong sagittis ultrices, sup nisl sub luctus et ultrices posuere cubilia Curae; Fusce ut sem a nulla sodales lacinia id vel erat. Aenean eget porttitor mi. em, vestibulum nec egestas ac, b justo. Suspendisse at nisi at odio pulvinar suscipit sit amet quis est.

1.5 Figures

1.6 Tables

caption
thead th a thead th thead th thead th .align_left thead th .align_right thead th .align_center
tfoot th a tfoot th tfoot th tfoot th .align_left tfoot th .align_right tfoot th .align_center
tbody th a tbody td a tbody td tbody td.align_left tbody td.align_right tbody td.align_center
tbody th a tbody td a tbody td tbody td.align_left tbody td.align_right tbody td.align_center
tbody th tbody td a tbody td tbody td.align_left tbody td.align_right tbody td.align_center
tbody th tbody td a tbody td tbody td.align_left tbody td.align_right tbody td.align_center
caption
tbody th.valign_middle tbody td
with much longer text		 tbody td
with much longer text		 tbody td
with much longer text		 tbody td
with much longer text
tbody th.valign_middle tbody td
with much longer text		 tbody td
with much longer text		 tbody td
with much longer text		 tbody td
with much longer text
tbody th.valign_middle tbody td
with much longer text		 tbody td
with much longer text		 tbody td
with much longer text		 tbody td
with much longer text
caption
thead th a
thead th a thead th thead th thead th
tbody th a tbody td tbody td tbody td
tbody th tbody td tbody td tbody td
tbody th tbody td tbody td tbody td

1.7 Forms

Warning - Consider yourself warned.

Error - This ain't working sorry.

Ok - Well done this is working just right.

Note - Take note of what is being said here.

Required field*

Form Legend

Input type="text"

standard input
.mini input
.small input
.medium input
.large input
.xlarge input
.xxlarge input
.xxlarge input

Error - Change this and that and try again.

.xxlarge input

Ok - You successfully read this alert message.

Input type="password"

input type="password"

Input type="search"

small text for notes

Input type="email"

Input type="url"

small text for notes

Input type="file"

small text for notes

Input type="checkbox"

Legendlist vertical
Legendlist horizontal

Input type="radio"

Legendlist vertical
Legendlist horizontal

Selects

small text for notes
Legendlist horizontal
  • small text for notes
Legendlist horizontal
  • small text for notes
Legendlist vertical

Textareas

Input/Button type="submit"

1.8 Buttons

Normal Style

<a class="button">

Ok / Proceed Style

<a class="button button_green">

Cancel / Delete Style

<a class="button button_red">