Demo

Hopefully one day this will be a Twitter Bootstrap-like demo. It's not ready yet. Just a dumping ground right now.

Hey, this page needs content. You should help. Click here to fork!

Structure

Container container

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a dolor sed dolor vehicula fermentum. Nulla ac est a purus consequat luctus vitae vel erat.

Praesent nec urna tellus. In quis nisl id sem laoreet dignissim. Etiam ac tellus neque, nec sodales nisi. Sed erat metus, ultricies quis convallis sit amet, mollis sit amet risus.

HTML Source 
<div class="container entity" id="unique-id">
  <h1>Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a dolor sed dolor vehicula fermentum. Nulla ac est a purus consequat luctus vitae vel erat.</p>
  <p>Praesent nec urna tellus. In quis nisl id sem laoreet dignissim. Etiam ac tellus neque, nec sodales nisi. Sed erat metus, ultricies quis convallis sit amet, mollis sit amet risus.</p>
</div>
PHP source 
<div<?php print $attributes; ?>>
  <?php print render($prepend); ?>
  <?php print render($content['title']); ?>
  <?php print render($content); ?>
  <?php print render($append); ?>
</div>
Container / Article container__article

Title

A whale with its tail in the air after jumping and diving back into the ocean.
Whale watching off shore in Cape Cod, MA in 2008.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a dolor sed dolor vehicula fermentum. Nulla ac est a purus consequat luctus vitae vel erat. Praesent dictum, nisi sit amet dignissim dictum, lorem tellus dictum libero, eu adipiscing orci nunc in eros. Aliquam pellentesque tincidunt purus in tincidunt. Maecenas quis sapien nibh, in euismod purus. Aliquam in quam augue, id vehicula enim. Phasellus vel neque eget orci fermentum scelerisque. Aliquam fringilla lobortis est sit amet molestie. Praesent placerat faucibus consequat. Quisque fringilla ante lacus, sit amet congue risus.

Praesent nec urna tellus. In quis nisl id sem laoreet dignissim. Etiam ac tellus neque, nec sodales nisi. Sed erat metus, ultricies quis convallis sit amet, mollis sit amet risus. Ut massa quam, consequat vitae tincidunt varius, sagittis sed erat. In eget dolor nulla. Morbi sit amet orci sem. Quisque at purus tellus. Donec bibendum pretium eros a hendrerit. Aliquam convallis lectus ut risus tempor ut feugiat velit luctus. Donec mattis, nisl vel venenatis interdum, velit nulla mollis erat, nec condimentum orci nunc non lacus.

HTML source 
<article class="node article contextual-region">
  [contextual]
  <h1>Title</h1>
  <footer>
    <img class="user-photo" src="/drupal/img/user.png" alt="User photo">
    <p class="submitted">Posted by <a href="#">username</a> on <time datetime="2012-03-15">3/15/2012</time>.</p>
  </footer>
  <figure class="image">
    <img src="/drupal/img/whale-tail.jpg" alt="A whale with its tail in the air after jumping and diving back into the ocean.">
    <figcaption>Whale watching off shore in Cape Cod, MA in 2008.</figcaption>
  </figure>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a dolor sed dolor vehicula fermentum. Nulla ac est a purus consequat luctus vitae vel erat. Praesent dictum, nisi sit amet dignissim dictum, lorem tellus dictum libero, eu adipiscing orci nunc in eros. Aliquam pellentesque tincidunt purus in tincidunt. Maecenas quis sapien nibh, in euismod purus. Aliquam in quam augue, id vehicula enim. Phasellus vel neque eget orci fermentum scelerisque. Aliquam fringilla lobortis est sit amet molestie. Praesent placerat faucibus consequat. Quisque fringilla ante lacus, sit amet congue risus.</p>
  <p>Praesent nec urna tellus. In quis nisl id sem laoreet dignissim. Etiam ac tellus neque, nec sodales nisi. Sed erat metus, ultricies quis convallis sit amet, mollis sit amet risus. Ut massa quam, consequat vitae tincidunt varius, sagittis sed erat. In eget dolor nulla. Morbi sit amet orci sem. Quisque at purus tellus. Donec bibendum pretium eros a hendrerit. Aliquam convallis lectus ut risus tempor ut feugiat velit luctus. Donec mattis, nisl vel venenatis interdum, velit nulla mollis erat, nec condimentum orci nunc non lacus.</p>
</article>
PHP source 
<article<?php print $attributes; ?>>
  <?php print render($prepend); ?>
  <?php print render($content['title']); ?>
  <footer>
    <?php print render($content['user_picture']); ?>
    <?php print render($content['submitted']); ?>
  </footer>
  <?php print render($content['image']); ?>
  <?php print render($content); ?>
  <?php print render($content['links']); ?>
  <?php print render($append); ?>
</article>
Item item
one two three
HTML source 
<a href="#">one</a>
<a href="#">two</a>
<a href="#">three</a>
PHP source 
<?php foreach ($items as $item): ?>
  <?php print render($item); ?>
<?php endforeach; ?>

Formats

Unordered List item__list
HTML source 
<ul>
  <li><a href="#">one</a></li>
  <li><a href="#">two</a></li>
  <li><a href="#">three</a></li>
</ul>
PHP source 
<ul<?php print $attributes; ?>>
<?php foreach ($items as $item): ?>
  <li<?php print $item['attributes']; ?>><?php print render($item); ?></li>
<?php endforeach; ?>
</ul>
Ordered List item__list_ordered
  1. one
  2. two
  3. three
HTML source 
<ol>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ol>
PHP source 
<ol<?php print $attributes; ?>>
<?php foreach ($items as $item): ?>
  <li<?php print $item['attributes']; ?>><?php print render($item); ?></li>
<?php endforeach; ?>
</ol>
Definition list item__list_definition
Example one
Lorem ipsum Dolor sit amet, consectetur adipiscing elit.
Example two
  • Cras sit amet dolor sit amet nunc congue luctus ultrices vitae quam.
  • In eu augue lectus, sit amet scelerisque magna.
Example three
Maecenas sit amet erat a arcu pellentesque rhoncus sit amet in ipsum.
Vestibulum vitae leo vitae enim tempus euismod at quis mi.
Example four
Nested Example One
Vestibulum a augue leo, sit amet faucibus nunc.
Ut quis nibh eget nunc tristique consectetur vel volutpat elit.

Nested Example Two

  • Vestibulum a augue leo, sit amet faucibus nunc.
  • Ut quis nibh eget nunc tristique consectetur vel volutpat elit.
HTML source 
<dl>
  <dt>Example one</dt>
  <dd>Lorem ipsum Dolor sit amet, consectetur adipiscing elit.</dd>
  <dt>Example two</dt>
  <dd>
    <ul>
      <li>Cras sit amet dolor sit amet nunc congue luctus ultrices vitae quam.</li>
      <li>In eu augue lectus, sit amet scelerisque magna.</li>
    </ul>
  </dd>
  <dt>Example three</dt>
  <dd>Maecenas sit amet erat a arcu pellentesque rhoncus sit amet in ipsum.</dd>
  <dd>Vestibulum vitae leo vitae enim tempus euismod at quis mi.</dd>
  <dt>Example four</dt>
  <dd>
    <dl>
      <dt>Nested Example One</dt>
      <dd>Vestibulum a augue leo, sit amet faucibus nunc.</dd>
      <dd>Ut quis nibh eget nunc tristique consectetur vel volutpat elit.</dd>
    </dl>
    <h3>Nested Example Two</h3>
    <ul>
      <li>Vestibulum a augue leo, sit amet faucibus nunc.</li>
      <li>Ut quis nibh eget nunc tristique consectetur vel volutpat elit.</li>
    </ul>
  </dd>
</dl>
PHP source 
<dl<?php print $attributes; ?>>
  <?php foreach ($items as $item): ?>
    <dt><?php print render($item['title']); ?></dt>
    <dd><?php print render($item); ?></dd>
  <?php endforeach; ?>
</dl>
Data Structure 
<?php
// The default type = 'item'.
$data = array(
  'format' => 'definition_list',
  'items' => array(
    array(
      'title' => 'Example one',
      'items' => array('Lorem ipsum Dolor sit amet, consectetur adipiscing elit.'),
    ),
    array(
      'title' => 'Example two',
      'items' => array(
        'format' => 'list',
        'items' = array(
          'Cras sit amet dolor sit amet nunc congue luctus ultrices vitae quam.',
          'In eu augue lectus, sit amet scelerisque magna.',
        ),
      ),
    ),
    array(
      'title' => 'Example three',
      'items' => array(
        'Maecenas sit amet erat a arcu pellentesque rhoncus sit amet in ipsum.',
        'Vestibulum vitae leo vitae enim tempus euismod at quis mi.',
      ),
    ),
    array(
      'title' => 'Example four',
      'items' => array(
        array(
          'format' => 'definition_list',
          'title' => 'Nested Example One',
          'items' => array(
            'Vestibulum a augue leo, sit amet faucibus nunc.',
            'Ut quis nibh eget nunc tristique consectetur vel volutpat elit.',
          ),
        ),
        array(
          'format' => 'list',
          'title' => 'Nested Example Two',
          'items' => array(
            'Vestibulum a augue leo, sit amet faucibus nunc.',
            'Ut quis nibh eget nunc tristique consectetur vel volutpat elit.',
          ),
        ),
      ),
    ),
  ),
);?>
Figure item__figure
A whale with its tail in the air after jumping and diving back into the ocean.
Whale watching off shore in Cape Cod, MA in 2008.
HTML source 
<figure class="image">
  <img src="/drupal/img/whale-tail.jpg" alt="A whale with its tail in the air after jumping and diving back into the ocean.">
  <figcaption>Whale watching off shore in Cape Cod, MA in 2008.</figcaption>
</figure>
PHP source 
<?php foreach ($items as $item): ?>
<figure<?php print $attributes; ?>>
  <?php print render($item); ?>
  <figcaption><?php print render($item['title']); ?></figcaption>
</figure>
<?php endforeach; ?>
Heading item__heading
[contextual]

Title

[shortcut]
HTML source 
[contextual]
<h1>Title</h1>
[shortcut]
PHP source 
<?php foreach ($items as $item): ?>
  <<?php print $item['tag']; ?><?php print $item['attributes']; ?>>
    <?php print render($item); ?>
  </<?php print $item['tag']; ?>>
<?php endforeach; ?>

Forms

Checkbox item__input_checkbox
HTML source 
<label for="checkbox"><input type="checkbox" name="checkbox" id="checkbox"> Checkbox</label>
Color item__input_color
HTML source 
<label for="color">Label</label>
<input type="color" name="color" id="color">
Date item__input_date
HTML source 
<label for="date">Label</label>
<input type="date" name="date" id="date" placeholder="2012-12-31">
Email item__input_email
HTML source 
<label for="email">Label</label>
<input type="email" name="email" id="email" placeholder="you@example.com">

Components

Breadcrumbs breadcrumbs

You are here

  1. Home »
  2. Library »
  3. Data
HTML source 
<h2>You are here</h2>
<ol class="breadcrumbs">
  <li><a href="#">Home</a> »</li>
  <li><a href="#">Library</a> »</li>
  <li class="active"><a>Data</a></li>
</ol>
Pagination pagination
HTML source 
<ul class="pager">
  <li class="first"><a href="#" title="Go to first page">« first</a></li>
  <li class="previous"><a href="#" title="Go to previous page">‹ previous</a></li>
  <li class="active"><a>1</a></li>
  <li><a href="#" title="Go to page 2">2</a></li>
  <li><a href="#" title="Go to page 3">3</a></li>
  <li><a href="#" title="Go to page 4">4</a></li>
  <li><a href="#" title="Go to page 5">5</a></li>
  <li class="next"><a href="#" title="Go to next page">next ›</a></li>
  <li class="last"><a href="#" title="Go to last page">last »</a></li>
 </ul>
Primary and Secondary Tabs tabs
HTML source 
<nav class="tabs" role="navigation">
  <h2>Primary Tabs</h2>
  <ul class="tabs primary">
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li class="active"><a href="#" class="active">Third <span class="visually-hidden">Active tab</span></a></li>
    <li><a href="#">Fourth</a></li>
  </ul>
  <h2>Secondary Tabs</h2>
  <ul class="tabs secondary">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
  </ul>
</nav>