Go from stylesheet to styleguide instantly, for free.

Runway will read your stylesheet and build a beautifully formatted styleguide.

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"; // Runway parses comments like the one below // to build your styleguide. Give your component a name, // a description, and a code snippet to get started! /*doc name: Primary Button description: Normal / Disabled variants of our primary button. Pulls in Bootstrap styling via CDN. code: | <button class="btn runway-button">Press Me!</button> <button class="btn runway-button disabled" disabled>Disabled!</button> */ .runway-button { background-color: #80c14f; color: white; letter-spacing: .5pt; text-transform: uppercase; transition: background .2s ease-out; &:hover { background: darken(#80c14f, 10%); } &.disabled { background: transparentize(#80c14f, .3); } } /*doc name: Fancy Underline description: Jazz up links and headings with this fancy underline. code: | <span class="h1 underline">Instantly.</span> */ .underline { text-decoration: none; text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff; box-shadow: inset 0 -1px 0 0 #fff, inset 0 -3px 0 0 #80c14f; }

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css";

// Runway parses comments like the one below
// to build your styleguide. Give your component a name,
// a description, and a code snippet to get started!

/*doc
name: Primary Button
description: Normal / Disabled variants of our primary button. Pulls in Bootstrap styling via CDN.
code: |
  <button class="btn runway-button">Press Me!</button>
  <button class="btn runway-button disabled" disabled>Disabled!</button>
*/

.runway-button {
  background-color: #80c14f;
  color: white;
  letter-spacing: .5pt;
  text-transform: uppercase;
  transition: background .2s ease-out;

&:hover {
    background: darken(#80c14f, 10%);
  }

&.disabled {
    background: transparentize(#80c14f, .3);
  }
}

/*doc
name: Fancy Underline
description: Jazz up links and headings with this fancy underline.
code: |
  <span class="h1 underline">Instantly.</span>
*/

.underline {
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;
  box-shadow: inset 0 -1px 0 0 #fff, inset 0 -3px 0 0 #80c14f;
}

Annotate your stylesheet

Add comments that follow our Hologram-inspired YAML format to your CSS or SCSS file. Our interactive editor helps you make tweaks instantly.

/*doc
  name: What do you call this component?
  description: How should this component be used?
  code: |
    <div>
      <p>Multi-line HTML code sample</p>
    </div>
*/

Style your styleguide

You worry about designing components, we'll make sure they are presented in a beautiful layout. Choose between two free styleguide themes (here and here) and a variety of syntax highlighting choices. Runway will handle encapsulating styles to prevent any clashes between your code and ours.

View all of your styleguides in one place

Juggling multiple projects or design initiatives? Use Runway to keep track of a styleguide for each of your projects, all in one place.

Show the World

Runway will maintain a shareable URL for each of your styleguides. Edit the styleguide to your heart's content without its URL changing.

Show us what you're working on by tweeting with the hashtag #StyleguidesForAll

Coming Soon?

Help us make Runway fit better into your workflow. We would love your feedback as we look to explore and prioritize new features. Here are some of the things we're thinking about.

Have an idea? Give us a shout!

Creating "sections" for related components (i.e., form elements)
Broader theme selection / custom theme builder
Custom domain names
Less and Sass support