Crosswalk Styleguide

3 Modules

Reusable components that comprise the majority of the styles.

3.1 Buttons

3.1.1 Standard Button

Your average form and link buttons.

Get started
:focus

lighten the button when focusing with the keyboard

Get started
:hover

lighten the button when hovering with a pointer

Get started
:active

darken the button once it’s been pressed

Get started
.button--small

A smaller button

Get started
.button--large

A larger button

Get started
.button--secondary

A less prominent button

Get started 
<a href="#" class="button {$modifiers}">Get started</a>

3.1.3 Button Group

Multiple buttons grouped together

Get started Or, join later 
<div class="button-group">
  <a href="#" class="button">Get started</a>
  <a href="#" class="button-follower">Or, join later</a>
</div>

3.2 Quotes

3.2.1 Blockquote

A stylised blockquote, for when you want to cite someone else’s words.

Amol Kher Former Engineer Manager at Netflix said

We see almost around 1,000 different devices streaming Netflix on Android every day.

.blockquote--left

A left-aligned blockquote

Amol Kher Former Engineer Manager at Netflix said

We see almost around 1,000 different devices streaming Netflix on Android every day.

.blockquote--right

A left-aligned blockquote

Amol Kher Former Engineer Manager at Netflix said

We see almost around 1,000 different devices streaming Netflix on Android every day.

.blockquote--center

Another way to use the centre-aligned blockquote

Amol Kher Former Engineer Manager at Netflix said

We see almost around 1,000 different devices streaming Netflix on Android every day.

<blockquote class="blockquote {$modifiers}">
  <footer>
    <img src="http://placehold.it/100x100" alt="" />
    <strong>Amol Kher</strong>
    Former Engineer Manager at Netflix said
  </footer>
  <p>We see almost around 1,000 different devices streaming Netflix on Android every day.</p>
</blockquote>

3.2.2 Pullquote

A stylised pullquote, perfect for highlighting content in your own article. http://miekd.com/articles/pull-quotes-with-html5-and-css

.pullquote--left

Another way to use the left-aligned pullquote

.pullquote--center

A centre-aligned pullquote

<div class="pullquote {$modifiers}" data-pullquote="The details are not the details. They make the design."></div>

3.3 Cards

3.3.1 Cards

Cards for housing highlighted blocks of content.

  • Crosswalk for Tizen

    Extension ready, powered by Chromium and Blink

  • Crosswalk for Apache Cordova

    Improve your entire app’s wrapper by upgrading your WebView.

  • Crosswalk for Android

    Use Crosswalk as your WebView or in-app browser

.cards--filled

Card item with background

  • Crosswalk for Tizen

    Extension ready, powered by Chromium and Blink

  • Crosswalk for Apache Cordova

    Improve your entire app’s wrapper by upgrading your WebView.

  • Crosswalk for Android

    Use Crosswalk as your WebView or in-app browser

<div class="cards {$modifiers}">
  <ul class="cards-list">
    <li class="cards-item">
      <h3 class="cards-heading">Crosswalk for Tizen</h3>
      <p>Extension ready, powered by Chromium and Blink</p>
    </li>
    <li class="cards-item">
      <h3 class="cards-heading">Crosswalk for Apache Cordova</h3>
      <p>Improve your entire app’s wrapper by upgrading your WebView.</p>
    </li>
    <li class="cards-item">
      <h3 class="cards-heading">Crosswalk for Android</h3>
      <p>Use Crosswalk as your WebView or in-app browser</p>
    </li>
  </ul>
</div>

3.3.2 Card icon

An optional icon above a card

  • Crosswalk for Tizen

    Extension ready, powered by Chromium and Blink

  • Crosswalk for Apache Cordova

    Improve your entire app’s wrapper by upgrading your WebView.

  • Crosswalk for Android

    Use Crosswalk as your WebView or in-app browser

.cards--filled

Card item with background

  • Crosswalk for Tizen

    Extension ready, powered by Chromium and Blink

  • Crosswalk for Apache Cordova

    Improve your entire app’s wrapper by upgrading your WebView.

  • Crosswalk for Android

    Use Crosswalk as your WebView or in-app browser

<div class="cards {$modifiers}">
  <ul class="cards-list">
    <li class="cards-item">
      <img class="cards-icon" src="http://placehold.it/100" alt="" />
      <h3 class="cards-heading">Crosswalk for Tizen</h3>
      <p>Extension ready, powered by Chromium and Blink</p>
    </li>
    <li class="cards-item">
      <img class="cards-icon" src="http://placehold.it/100" alt="" />
      <h3 class="cards-heading">Crosswalk for Apache Cordova</h3>
      <p>Improve your entire app’s wrapper by upgrading your WebView.</p>
    </li>
    <li class="cards-item">
      <img class="cards-icon" src="http://placehold.it/100" alt="" />
      <h3 class="cards-heading">Crosswalk for Android</h3>
      <p>Use Crosswalk as your WebView or in-app browser</p>
    </li>
  </ul>
</div>

3.4 Hero

3.4.1 Standard Hero

A prominent header section, usually the main focus of a page.

Build Hybrid Apps from the Future

Crosswalk is a powerful WebView for building hybrid mobile applications on multiple versions of Android.

Get started
.knockout

Inverted hero section

Build Hybrid Apps from the Future

Crosswalk is a powerful WebView for building hybrid mobile applications on multiple versions of Android.

Get started
.hero--bg1.knockout

Coffee and game background

Build Hybrid Apps from the Future

Crosswalk is a powerful WebView for building hybrid mobile applications on multiple versions of Android.

Get started
.hero--bg2

Example of adding additional, new headers

Build Hybrid Apps from the Future

Crosswalk is a powerful WebView for building hybrid mobile applications on multiple versions of Android.

Get started 
<header class="hero {$modifiers}">
  <div class="container">
    <div class="row">
      <h1 class="hero-heading">Build Hybrid Apps from the Future</h1>
    </div>
    <div class="row hero-row">
      <p>Crosswalk is a powerful <code>WebView</code> for building hybrid mobile applications on multiple versions of Android.</p>
      <a href="#" class="button">Get started</a>
    </div>
  </div>
</header>

3.4.3 Hero seperator

A seperator inbetween, or a prefix or suffix to hero sections.

<div class="hero-seperator">
  <div class="container">
    <div class="row">
      <aside class="media">
        <ul class="media-list">
          <li class="media-item">
            <a class="media-link" href="#">
              <img class="media-image" src="/assets/icons/logo-cordova.svg" alt="Apache Cordova logo" />
              <p class="media-description">
                <strong class="media-heading">Apache Cordova compatible</strong>
                Crosswalk includes Cordova / PhoneGap APIs
              </p>
            </a>
          </li>
          <li class="media-item">
            <a class="media-link" href="#">
              <img class="media-image" src="/assets/icons/logo-cordova.svg" alt="Apache Cordova logo" />
              <p class="media-description">
                <strong class="media-heading">Apache Cordova compatible</strong>
                Crosswalk includes Cordova / PhoneGap APIs
              </p>
            </a>
          </li>
        </ul>
      </aside>
    </div>
  </div>
</div>

3.5 Media

3.5.1 Media

The media object

A lot of content

Content

.media--left

Left aligned cutoff

A lot of content

Content

.media--right

Right aligned cutoff

A lot of content

Content

<div class="media {$modifiers}">
  <div class="media-image">
    <img src="http://placehold.it/300" />
  </div>
  <div class="media-description">
    <h2>A lot of content</h2>
    <p>Content</p>
  </div>
</div>

3.5.2 Media list

A list of media objects

<div class="media">
  <ul class="media-list">
    <li class="media-item">
      <a class="media-link" href="#">
        <img class="media-image" src="http://placehold.it/32" alt="" />
        <strong class="media-heading">Apache Cordova compatible</strong>
        Crosswalk includes Cordova / PhoneGap APIs
      </a>
    </li>
    <li class="media-item">
      <a class="media-link" href="#">
        <img class="media-image" src="http://placehold.it/32" alt="" />
        <strong class="media-heading">Apache Cordova compatible</strong>
        Crosswalk includes Cordova / PhoneGap APIs
      </a>
    </li>
  </ul>
</div>

3.5.4 Media image

Your description 
<div class="media-image">
  <img src="http://placehold.it/500" alt="Your description" />
</div>

3.6 Logo

3.6.1 Logo

The module for logos.

<a href="https://software.intel.com/en-us/oss" class="logo">
  <img class="logo-image" src="/assets/icons/wordmark-intel.png">
</a>

3.7 Knockout

3.7.1 Knockout

For sections with light text on dark backgrounds. Particularly useful in conjunction with the <.hero> and <.blockquote> module.

Sectioned off content. Read more…
<div class="knockout">Sectioned off content. <a href="#">Read more…</a></div>

3.7.2 Well

For sections with regular text on grey backgrounds. Like Bootstrap’s “Well.”

Sectioned-off content. Read more…
<div class="well">Sectioned-off content. <a href="#">Read more…</a></div>

3.8 Navigation

3.8.1 Nav

Primariy, horisontal navigation

<nav class="nav">
  <ul class="nav-list">
    <li class="nav-item">
      <a class="nav-link" href="#">Documentation</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Blog</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Dev Wiki</a>
    </li>
  </ul>
</nav>

3.8.2 Nav logo

<nav class="nav">
  <a class="nav-logo logo" href="#">
    <img class="logo-image" src="/images/crosswalk-logo-black.svg">
  </a>
  <ul class="nav-list">
    <li class="nav-item">
      <a class="nav-link" href="#">Documentation</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Blog</a>
    </li>
  </ul>
</nav>

3.8.3 Nav Toggle

Content that’s visible on larger screens, and uses a CSS-only toggle to reveal on smaller screens.

<nav id="contents" class="nav-toggleContainer">
  <a href="#contents" id="contents-toggle" class="button button--small button--tertiary nav-toggle">Toggle</a>
  <a href="#contents-toggle" class="button button--small button--tertiary nav-toggle--dummy">Toggle</a>
  <ul class="nav-toggleHide">
   <li>Nav item 1 (hidden on small screens)</li>
   <li>Nav item 2 (hidden on small screens)</li>
   <li>Nav item 3 (hidden on small screens)</li>
  </ul>
</nav>

3.9 Features

3.9.1 Features

Feature blocks

3.10 Footer

3.10.1 Footer

A site-wide footer.

The Crosswalk Project was created in the Intel Open Source Technology Center. Copyright © 2013–2014 Intel Corporation. 
<footer class="footer">
  <small>The Crosswalk Project was created in the Intel Open Source Technology Center. Copyright © 2013–2014 Intel Corporation.</small>
</footer>

3.10.2 Block

A chunk of content in the footer.

Follow @xwalk_project on Twitter for hybrid app development resources.

The Crosswalk Project was created in the Intel Open Source Technology Center. Copyright © 2013–2014 Intel Corporation. 
<footer class="footer">
  <div class="footer-block">
    <p>Follow <a href="http://twitter.com/xwalk_project">@xwalk_project on Twitter</a> for hybrid app development&nbsp;resources.</p>
  </div>
  <div class="footer-block">
    <small>The Crosswalk Project was created in the Intel Open Source Technology Center. Copyright © 2013–2014 Intel Corporation.</small>
  </div>
</footer>

3.11 Form

3.11.1 Label

  <label for="form-androidVersions">Android Version</label>
  <input id="form-androidVersions" name="form-androidVersions" type="text" placeholder="Ex. 4.3" />

3.11.3 Textarea

<textarea placeholder="Tell us about your experience with Crosswalk."></textarea>

3.11.4 Search Input

<input type="search" placeholder="Search, ex. Cordova…" />

3.11.5 Checkboxes

<label>Tizen</label>
<input type="checkbox" />
<label>Android</label>
<input type="checkbox" checked="checked" />

3.11.6 File

<input type="file" />

3.11.7 Select

<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

3.11.8 Filedset

Versions 
<form>
<fieldset>
  <legend>Versions</legend>
  <label for="form-androidVersions">Android Version</label>
  <input id="form-androidVersions" name="form-androidVersions" type="text" placeholder="Ex. 4.3" />
</fieldset>
</form>

3.11.9 Form Button Group

An input paired with a button

<form class="form">
  <fieldset class="form-buttonGroup">
    <input type="email" placeholder="Add your email, learn Android development" />
    <input type="submit" value="join" class="button button--secondary" />
  </fieldset>
</form>

3.12 Table

3.12.1 Table

This module could be improved or have a better name; basically, it is used for the tables on the landing page.

HTML5 feature Android WebView Crosswalk WebView
WebRTC
WebGL
Vibration API
Presentation API
WebView updates 
<table class="table--ftcomp">
  <thead>
    <tr>
      <td>HTML5 feature</td>
      <td>Android <code>WebView</code></td>
      <td>Crosswalk WebView</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>WebRTC</td>
      <td><img src="/images/crosswalk-landing-question.svg" /></td>
      <td><img src="/images/crosswalk-landing-check.svg" /></td>
    </tr>
    <tr>
      <td>WebGL</td>
      <td><img src="/images/crosswalk-landing-question.svg" /></td>
      <td><img src="/images/crosswalk-landing-check.svg" /></td>
    </tr>
    <tr>
      <td>Vibration <abbr>API</abbr></td>
      <td><img src="/images/crosswalk-landing-question.svg" /></td>
      <td><img src="/images/crosswalk-landing-check.svg" /></td>
    </tr>
    <tr>
      <td>Presentation <abbr>API</abbr></td>
      <td><img src="/images/crosswalk-landing-question.svg" /></td>
      <td><img src="/images/crosswalk-landing-check.svg" /></td>
    </tr>
    <tr>
      <td><code>WebView</code> updates</td>
      <td><img src="/images/crosswalk-landing-question.svg" /></td>
      <td><img src="/images/crosswalk-landing-check.svg" /></td>
    </tr>
  </tbody>
</table>

3.13 Article

3.13.1 Article List

A list of Articles

.article--narrow

Thinner at mid width

.article--hasToc

Includes an .article-toc module

<ul class="article-list {$modifiers}">
  <li class="article-item">
    <header class="article-header">
      <h2 class="article-title"><a href="#">Introducing Cordova Intergration</a></h2>
      <a href="#" class="article-meta"><time class="js-vagueTime" datetime="Fri, 04 Jul 2014 13:14:00 GMT">1 month ago</time></a>
    </header>
  </li>
  <li class="article-item">
    <header class="article-header">
      <h2 class="article-title"><a href="#">Introducing Android Intergration</a></h2>
      <a href="#" class="article-meta"><time class="js-vagueTime" datetime="Fri, 04 Jun 2014 13:14:00 GMT">2 months ago</time></a>
    </header>
  </li>
</ul>

3.13.2 Article Table of Contents

Secondary navigation for blog posts, documentation, etc. Includes an .article-list inside.

<nav class="article-toc">
  <ul class="article-list">
    <li class="article-item">
      <a class="article-link" href="#">Main Item Title 1</a>
      <ul class="article-list">
        <li class="article-item">
          <a class="article-link" href="#">Sub Item Title 1</a>
        </li>
        <li class="article-item nav-item--active">
          <a class="article-link" href="#">Sub Item Title 2 (active)</a>
        </li>
        <li class="article-item">
          <a class="article-link" href="#">Sub Item Title 3</a>
        </li>
      </ul>
    </li>
    <li class="article-item">
      <a class="article-link" href="#">Main Item Title 2</a>
      <ul class="article-list">
        <li class="article-item">
          <a class="article-link" href="#">Sub Item Title 1</a>
        </li>
        <li class="article-item">
          <a class="article-link" href="#">Sub Item Title 2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

3.13.3 Article

A generic blog post, documentation, help, etc. article.

Introducing Android Intergration

Crosswalk is a HTML5 runtime, built on open source foundations, which extends the web platform with new capabilities… 

<article class="article">
    <header class="article-header">
      <h2 class="article-title"><a href="#">Introducing Android Intergration</a></h2>
      <span class="article-meta"><time class="js-vagueTime" datetime="Fri, 04 Jun 2014 13:14:00 GMT">2 months ago</time></span>
    </header>
  <p>
     Crosswalk is a HTML5 runtime, built on open source foundations,
     which extends the web platform with new capabilities…
  </p>
</article>

3.13.4 Article Header

The header in article list items and articles themselves.

Crosswalk for app designers

<header class="article-header">
  <h1 class="article-title">Crosswalk for app designers</h1>
  <span class="article-meta"><time class="js-vagueTime" datetime="Fri, 04 Jun 2014 13:14:00 GMT">2 months ago</time></span>
</header>

3.13.5 Article Hero

Optional opening article images.

Crosswalk for app designers

Example hero image 
<header class="article-header">
  <h1 class="article-title">Crosswalk for app designers</h1>
</header>
<img class="article-hero" src="http://placehold.it/1500x300" alt="Example hero image" />

3.13.6 Article Lead

Stylized opening paragraphs for articles. Also available elsewhere via the helper class .lead.

Crosswalk is a HTML5 runtime, built on open source foundations, which extends the web platform with new capabilities.

This means Android developers can now deploy your mobile HTML5 application with its own runtime without a dependence on the native WebView that is on your customer's device for all Android 4.0+ devices.

<article class="article">
  <p>Crosswalk is a HTML5 runtime, built on open source foundations, which extends the web platform with new capabilities.</p>
  <p>This means Android developers can now deploy your mobile HTML5 application with its own runtime without a dependence on the native WebView that is on your customer's device for all Android 4.0+ devices.</p>
</article>

3.13.7 Article Exerpt

Exerpts used within article lists.

Crosswalk is a HTML5 runtime, built on open source foundations, which extends the web platform with new capabilities. Read more… 

<div class="article-exerpt">
  <p>Crosswalk is a HTML5 runtime, built on open source foundations, which extends the web platform with new capabilities. <a href="#">Read more…</a>
</div>

3.13.8 Article Promo

Callouts at the end of blog posts and documentation sections.

Get more hybrid app secrets

Build powerful hybrid apps for Android or Cordova / PhoneGap more reliably with tips from the Intel Crosswalk team.
.well

A Bootstrap-like “Well,” distinguishes the content with alternate styling (usually a grey box)

Get more hybrid app secrets

Build powerful hybrid apps for Android or Cordova / PhoneGap more reliably with tips from the Intel Crosswalk team.

 
<a href="http://twitter.com/xwalk_project" class="article-promo {$modifiers}">
  <h4 class="article-promoTitle">Get more hybrid app secrets</h4>
  <p>Build powerful hybrid apps for Android or Cordova / PhoneGap more reliably with <span class="a-faux">tips from the Intel Crosswalk team</span>.</p>
</a>

3.13.9 Article Lists

Numbered, bullited, and definition lists are styled in a more pleasing manner for long form reading within articles

  • Android
    1. Hybrid
    2. In-app browser
  • Cordova
  • Tizen
  • Chrome
  1. Android
    • Hybrid
    • In-app browser
  2. Cordova
  3. Tizen
  4. Chrome
<article class="article">
  <ul>
    <li>Android
      <ol>
        <li>Hybrid</li>
        <li>In-app browser</li>
      </ol>
    </li>
    <li>Cordova</li>
    <li>Tizen</li>
    <li>Chrome</li>
  </ul>
  <ol>
    <li>Android
      <ul>
        <li>Hybrid</li>
        <li>In-app browser</li>
      </ul>
    </li>
    <li>Cordova</li>
    <li>Tizen</li>
    <li>Chrome</li>
  </ol>
</article>

3.14 Embed

3.14.1 Container

For display videos with http://embedresponsively.com, so you can exclude the inline style tags it generates.

<figure class="embed-container">
  <iframe src="http://www.youtube.com/embed/nU4lvgTrjFI?modestbranding=1&autoplay=0&rel=0&showinfo=0&theme=light&color=white" frameborder="0"></iframe>
</figure>

3.14.2 Overlay

Custom images for YouTube videos, etc.

<div onclick="play();" id="vidwrap" class="embed-container embed-container--overlay" style="background-image: url('//placehold.it/800x400&text=your%20custom%20image,%20press%20here!')"></div><script type="text/javascript">function play(){document.getElementById('vidwrap').innerHTML = '<iframe src="http://www.youtube.com/embed/nU4lvgTrjFI?modestbranding=1&autoplay=1&rel=0&showinfo=0&theme=light&color=white" frameborder="0"></iframe>';}</script>

3.15 Presentation page

3.16 Testimonials (home page and testimonial page)

3.17 Demos page

3.18 Tool page

3.19 Get Started page

3.20 Quality Indicators

3.21 App list

3.22 App showcase

3.23 highlightjs.org syntax style