StyleDocco default styles

This is the default stylesheet for StyleDocco. It also serves as an example of the documentation syntax.

Main layout

The page content has a maximum width of 1500 pixels.

When StyleDocco encounters a first level heading, the documentation is split into a new section with a pair of documentation and CSS code.

<article class="section">
  <div class="docs">
    <h1>Documentation</h1>
  </div>
  <div class="code"><pre><code>CSS code</code></pre></div>
</article>

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  /* Top/bottom paddings for bars */
  padding: 60px 0 40px;
  background-color: hsl(207, 10%, 90%);
  color: hsl(207, 5%, 30%);
}
.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}
.section {
  position: relative;
  margin-bottom: 20px;
}
.docs {
  position: relative;
  z-index: 2;
  width: 68%;
  min-height: 200px;
  background-color: hsl(207, 0%, 100%);
  background-clip: padding-box;
  border: 1px solid hsla(207, 5%, 5%, .1);
  border-radius: 5px;
  box-shadow: 0 0 3px hsla(207, 5%, 5%, .1);
}
.code {
  position: absolute;
  top: 5px; bottom: 5px;
  right: 0;
  z-index: 1;
  width: 33%;
  padding: 10px 10px 10px 20px;
  border-radius: 0 5px 5px 0;
  border: 1px solid hsla(207, 20%, 10%, .1);
  background-color: hsla(207, 20%, 95%, .9);
  background-clip: padding-box;
  opacity: .5;
  -webkit-transition: opacity .4s;
  -moz-transition:    opacity .4s;
  -o-transition:      opacity .4s;
  transition:         opacity .4s;
}
  .code:hover {
    opacity: 1;
  }

Previews and code

Previews are rendered in sandboxed iframes with the documented CSS applied. The code is editable and the previews will be automatically updated.

The width of the previews can be adjusted to test responsive designs. The height will be automatically adjusted to fit the content. Free hand resizing currently only works properly in Firefox. In WebKit browsers you can only enlarge the previews and other browsers have not implemented CSS resize .

Editable code blocks have a desaturated orange background. They will be automatically resized to fit the text inside.

<textarea class="preview-code">Code</textarea>

Previews are placed in a resizeable container as iframe elements cannot be resized with the CSS resize property.

No code is allowed to overflow horizontally.

.preview {
  background: hsl(207, 0%, 100%);
  border-top: 1px solid hsl(207, 30%, 95%);
  position: relative;
  z-index: 1;
}
  .preview-code + .preview {
    margin-top: 0;
    border-top: 0;
  }
.preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.preview-code {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  color: hsl(207, 9%, 37%);
  max-height: 200px;
  padding: 10px 20px;
  overflow-y: auto;
  background: hsl(207, 30%, 95%);
  border: 1px solid hsl(207, 30%, 85%);
  border-left: 0; border-right;
  box-shadow: inset 0 1px 2px hsla(207, 30%, 10%, .1);
  line-height: 1.1 !important;
  resize: none;
}
  .preview-code:focus {
    outline: 0;
    background: hsl(207, 30%, 97%);
    box-shadow: inset 0 1px 2px hsla(207, 30%, 10%, .1),
                0 0 5px hsla(207, 75%, 75%, .9);
  }
  .preview-code:last-child {
    border-bottom: 0;
    border-radius: 0 0 5px 5px;
  }
.resizeable {
  padding: 15px;
  overflow: auto;
  background: hsl(207, 0%, 100%);
  box-shadow: 0 0 2px hsla(207, 10%, 20%, .2);
  resize: both;
}
.preview-code, pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: auto;
}
.code pre {
  height: 100%;
  margin-top: 0;
}

Fixed to top with a small drop shadow.

<nav class="bar top"></nav>

<div class="bar top"><a href="#" class="brand">Site name</a></div>

<div class="bar top">
  <ul class="menu">
    <li><a href="#">css-file</a>
    <li><a href="#" class="dropdown-toggle is-active" unselectable="on"
           data-toggle="dropdown-1">folder</a>
        <ul class="dropdown" id="dropdown-1">
          <li><a href="#">css-file</a>
          <li><a href="#">css-file</a>
        </ul>
  </ul>
</div>

.bar {
  position: fixed;
  left: 0; right: 0;
  z-index: 1010;
  min-height: 40px;
  line-height: 40px;
  background-image: -webkit-linear-gradient(hsla(207, 10%, 35%, .97),
                                            hsla(207, 5%, 25%, .92));
  background-image:    -moz-linear-gradient(hsla(207, 10%, 35%, .97),
                                            hsla(207, 5%, 25%, .92));
  background-image:      -o-linear-gradient(hsla(207, 10%, 35%, .97),
                                            hsla(207, 5%, 25%, .92));
  background-image:         linear-gradient(hsla(207, 10%, 35%, .97),
                                            hsla(207, 5%, 25%, .92));
}
.bar.top {
  top: 0;
  box-shadow: 0 1px 2px hsla(207, 5%, 0%, .2);
}
.bar.bottom {
  bottom: 0;
  box-shadow: 0 -1px 2px hsla(207, 5%, 0%, .2);
}
.bar ul {
  margin: 0 !important;
}
.bar li {
  display: block;
  list-style: none;
}
.bar .icon path {
  fill: hsla(27, 10%, 75%, .75);
}
.docs .icon path {
  fill: hsla(207, 10%, 75%, .5);
}
  .docs .permalink:hover .icon path {
    fill: hsl(207, 10%, 75%);
  }
.bar button {
  color: hsla(27, 10%, 75%, .75);
}
  .bar button:hover .icon path,
  .bar button.is-active .icon path {
    fill: hsl(27, 10%, 85%);
  }
  .bar button:hover, .bar button.is-active {
    color: hsl(27, 10%, 85%);
  }
.bar .icon {
  vertical-align: middle;
  display: inline-block;
}
.bar, .bar a, .bar a:visited {
  color: hsl(27, 10%, 85%);
  text-shadow: 1px 1px 0 hsla(27, 5%, 0%, .5);
}
    .bar a:hover,
    .bar a.is-active {
      color: hsl(27, 10%, 95%);
      text-shadow: 1px 1px 0 hsla(27, 5%, 0%, 1);
      text-decoration: none;
    }
.brand {
  float: left;
  margin-right: 20px;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
}
.brand, a.brand, a.brand:visited {
  color: hsl(27, 5%, 5%);
  text-shadow: 1px 1px 0 hsla(27, 5%, 100%, .2);
}
  .brand:hover, a.brand:hover {
    color: hsl(27, 5%, 0%);
    text-shadow: 1px 1px 0 hsla(27, 5%, 100%, .3);
    text-decoration: none;
  }

.menu {
  font-size: 12px;
}
.menu > li {
  float: left;
  position: relative;
}
.menu a {
  display: block;
  margin-right: 15px;
}

.dropdown-toggle {
  position: relative;
  padding-right: 15px;
}
 /* Arrow */
.dropdown-toggle:after {
  display: block;
  position: absolute;
  right: 0;
  top: 18px;
  content: '';
  border: 4px solid;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.nav-results,
.dropdown {
  position: absolute;
  z-index: 1020;
  top: 32px;
  left: -16px;
  width: 175px;
  max-height: 500px;
  padding: 10px 0;
  overflow-y: auto;
  word-wrap: break-word;
  font-size: 11px;
  line-height: 20px;
  background-color: hsla(207, 10%, 25%, .97);
  border: 1px solid hsla(207, 5%, 70%, .3);
  border-radius: 3px;
  box-shadow: 0 0 3px hsla(207, 5%, 0%, .2);
}
.toc-list {
  width: 200px;
}
.nav-results {
  right: 0;
  width: 200px;
  left: auto;
  padding: 5px 0;
}
.nav-results-filename {
  display: block;
  font-size: 10px;
  opacity: .75;
}
.nav-results a {
  display: block;
  line-height: 15px;
  padding: 5px 10px;
}
 /* Match everything after the first non-hidden `li`. */
.nav-results li:not([hidden]) ~ li a {
  border-top: 1px solid hsla(27, 10%, 90%, .1);
}
.dropdown a {
  padding: 0 15px;
}
.dropdown li:hover {
  background-color: hsl(207, 10%, 22%);
}
.nav {
  float: right;
  position: relative;
}
.nav input[type="search"] {
  padding: 2px 4px;
  color: #fff;
  width: 150px;
  border: 1px solid hsla(207, 5%, 0%, .3);
  background: hsla(207, 12%, 40%, .9);
  box-shadow: inset 1px 1px 3px hsla(207, 5%, 0%, .05),
                    1px 1px 0 hsla(207, 5%, 100%, .05);
  border-radius: 10px;
  -webkit-appearance: textfield;
}
  .nav input[type="search"]:focus {
    outline: 0;
    background: hsla(207, 7%, 45%, .9);
  }

Settings and configuration

.settings {
  text-align: center;
}
.bar button {
  display: inline-block;
  vertical-align: middle;
  padding: 0 5px;
  margin: 0 3px;
  background: transparent;
}
.bar button:first-child {
  margin-left: 0;
}
.settings .auto {
  line-height: 32px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: -1px;
  text-shadow: none;
  text-transform: uppercase;
}

Typography and text styles

We use the generic sans-serif font family to get Arial on Windows and Helvetica on Mac. The body font-size is set to 14px.

Lorem ipsum dolor sit amet.

Paragraphs, lists, tables and blockquotes get some bottom margins as well as side margins.

<p>Paragraph #1
<p>Paragraph #2
<ul><li>List</ul>

Headings get font-sizes at a modular scale of 5:6.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h2>
<h4>Heading 4</h2>
<h5>Heading 5</h2>
<h6>Heading 6</h3>

body {
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.618;
}
.docs pre, p, ol, ul, dl,
figure, blockquote, table {
  margin-left: 20px; margin-right: 20px;
}
.preview, .docs pre,
p, ol, ul, dl,
figure, blockquote, table {
  margin-top: 10px;
}
  ul ul, ol ol, ul ol, ol ul,
  blockquote p:last-child {
    margin-top: 0;
  }
ul, ol {
  padding-left: 1.5em;
}
p:last-child, ol:last-child, ul:last-child, dl:last-child {
  margin-bottom: 20px;
}
hr,
h1, h2, h3, h4, h5, h6 {
  margin: 1em 20px .5em;
}
  h1:first-of-type {
    margin-top: 20px;
  }
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  color: hsl(207, 10%, 50%);
}
h1 a, h1 a:hover, h1 a:visited {
  color: inherit;
  text-decoration: inherit;
}
h1 {
  font-size: 3.052em;
  font-weight: normal;
  color: hsl(207, 10%, 45%);
}
h2 {
  font-size: 1.953em;
}
h3 {
  font-size: 1.536em;
}
h1, h2, h3 {
  letter-spacing: -.025em;
}
h4 {
  font-size: 1.25em;
}
h5 {
  font-size: 1em;
  text-transform: uppercase;
}
h6 {
  font-size: 1em;
}
.permalink {
  position: absolute;
  top: 15px; right: 15px;
}

Links

To show pseudo selectors styles in previews, add the pseudo selector (including the :) as a regular class.

<a href="#">Link</a>
<a href="#" class=":hover">Link</a>
<a href="#" class=":visited">Link</a>

a {
  color: hsl(207, 90%, 50%);
  text-decoration: none;
}
  a:hover {
    color: hsl(207, 95%, 40%);
    text-decoration: underline;
  }
  a:visited {
    color: hsl(207, 100%, 35%);
  }

Code

For displaying code, we prefer Ubuntu Mono, falling back on some fonts that should look better at smaller sizes than the default monospace fonts.

<pre>
<code>The font in <pre> code blocks is small but legible.</code>
</pre>

<?php
echo "Hello World;
?>

Helper classes

.preview-code,
pre, code, var {
  font-style: normal;
  font-family: "Ubuntu Mono", "Andale Mono", "DejaVu Sans Mono", "Monaco", "Bitstream Vera Sans Mono", "Consolas", "Lucida Console", monospace;
  font-size: 12px;
}
.docs pre, code, var {
  padding: .1em 3px;
  background: hsla(207, 5%, 0%, .025);
  border: 1px solid hsla(207, 5%, 0%, .05);
  border-radius: 3px;
}
.code pre {
  line-height: 1.1 !important;
}
pre code {
  padding: 0;
  background: transparent;
  border: 0;
}

.cf:before, .cf:after { content: ''; display: table; }
.cf:after { clear: both; }
[unselectable="on"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
[hidden] {
  display: none !important;
}
small {
  font-size: 85%;
  opacity: .9;
}