This is the default stylesheet for StyleDocco. It also serves as an example of the documentation syntax.
We don't define any global styles except background color and resetting margins and paddings.
We use the generic sans-serif
font family to get Arial on Windows and Helvetica on Mac, but elements in the example boxes will not get any of StyleDocco styles.
<a href="#">Unstyled link example</a>
Manually adding the documentation container makes examples possible in the StyleDocco documentation. You won't need that in your stylesheet documentation, of course.
A regular link (now styled), a visited link and some inline code
.
<div class="styledocco-docs">
<p>A <a href="#">regular link</a> (now styled), a <a href="./docs.html">visited link</a> and some <code>inline code</code>.</p>
</div>
To show pseudo selectors styles in examples, just add the pseudo selector (including the :
) as a class name.
<div class="styledocco-docs"><p>
<a href="#">Link</a>
<a href="#" class=":hover">Link</a>
<a href="#" class=":visited">Link</a>
</div>
For displaying code, we prefer Ubuntu Mono, falling back on some fonts that should look better at smaller sizes than the default monospace fonts.
Code blocks also get a nice selection color to better highlight what you should select when copy/pasting.
The font in <pre> code blocks is small but legible.
<div class="styledocco-docs">
<pre>
<code>The font in <pre> code blocks is small but legible.</code>
</pre>
</div>
body {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
background-color: #f6f7f9;
}
.styledocco-sidebar,
.styledocco-docs > :not(.styledocco-example) {
box-sizing: content-box;
margin: 15px 20px;
color: #334;
line-height: 1.618;
font-family: sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
}
.styledocco-sidebar,
.styledocco-docs > p, .styledocco-docs > ul, .styledocco-docs > ol, .styledocco-docs > a {
font-size: 12px;
}
.styledocco-docs > h1, .styledocco-docs > h2, .styledocco-docs > h3,
.styledocco-docs > h4, .styledocco-docs > h5, .styledocco-docs > h6 {
font-weight: bold;
/* `!important` needed due to `*:not()` above. */
margin: 25px 20px 0 !important;
line-height: 1.2 !important;
color: #555f6a !important;
}
.styledocco-docs > :not(.styledocco-example) a {
color: #27a;
text-decoration: none;
}
.styledocco-docs > :not(.styledocco-example) a:hover {
color: #157;
text-decoration: underline;
}
.styledocco-docs > :not(.styledocco-example) a:visited {
color: #146;
}
.styledocco-docs > :not(.styledocco-example):not(pre) var,
.styledocco-docs > :not(.styledocco-example):not(pre) code {
padding: .1em 3px;
background: rgba(0, 0, 0, .025);
border: 1px solid rgba(0, 0, 0, .05);
border-radius: 3px;
font-style: normal;
font-family: "Ubuntu Mono", "Andale Mono", "DejaVu Sans Mono", "Monaco", "Bitstream Vera Sans Mono", "Consolas", "Lucida Console", monospace;
}
.styledocco-code pre code,
.styledocco-docs > pre samp,
.styledocco-docs > pre code {
padding: 0;
background: transparent;
border: 0;
font-family: "Ubuntu Mono", "Andale Mono", "DejaVu Sans Mono", "Monaco", "Bitstream Vera Sans Mono", "Consolas", "Lucida Console", monospace;
font-size: 12px;
}
.styledocco-code code::selection,
.styledocco-docs > pre code::selection {
background: #248;
color: #fff;
}
.styledocco-container {
width: 95%;
max-width: 1500px;
margin: 0 auto;
}
.styledocco-main {
float: right;
width: 83%;
}
.styledocco-sidebar {
position: fixed;
width: 9%;
padding: 1%;
}
.styledocco-section {
position: relative;
min-height: 200px;
}
Sidebar menu, fixed top/left. Slightly faded out when not hovered.
<div class="styledocco-sidebar :hover" style="position:static;width:40%">
<a href="#" class="styledocco-brand">Hovered sidebar</a>
<strong class="styledocco-nav-heading">Folder</strong>
<ul class="styledocco-nav">
<li><a href="#">Item</a>
<li class=":hover"><a href="#">Hovered item</a>
</ul>
</div>
<div class="styledocco-sidebar" style="position:static;width:40%">
<a href="#" class="styledocco-brand">Inactive menu</a>
<ul class="styledocco-nav">
<li><a href="#">Item</a>
</ul>
</div>
Sometimes you need to specify some inline styles in the HTML examples to override properties such as position: fixed
.
.styledocco-sidebar {
max-height: 90%;
overflow-y: auto;
margin-top: 20px;
word-wrap: break-word;
background-color: #777f88;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, .25);
opacity: .75;
-webkit-transition: opacity 2.5s;
-moz-transition: opacity 2.5s;
-o-transition: opacity 2.5s;
}
.styledocco-sidebar:hover {
opacity: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
}
.styledocco-sidebar a {
text-decoration: none;
}
.styledocco-brand {
display: block;
margin: 0 0 10px;
text-align: center;
color: #eee;
font-size: 16px;
font-weight: bold;
text-shadow: rgba(0, 0, 0, .5) 0 0 1px;
}
.styledocco-brand:hover {
color: #fff;
text-decoration: none;
}
.styledocco-nav {
margin: 0;
padding: 0;
}
.styledocco-nav-heading {
display: block;
padding: .3em 0;
margin: .5em 0 0;
color: #ddd;
font-size: 13px;
text-shadow: rgba(0, 0, 0, .25) 0 0 1px;
}
.styledocco-nav li {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.styledocco-nav li:active,
.styledocco-nav li:focus,
.styledocco-nav li:hover {
background: rgba(255, 255, 255, .2);
border-color: transparent;
border-radius: 3px;
text-decoration: none;
}
.styledocco-nav li:active + li,
.styledocco-nav li:focus + li,
.styledocco-nav li:hover + li {
border-color: transparent;
}
.styledocco-nav a {
display: block;
padding: .2em 5%;
color: #f7f7f7;
}
Showing examples of documentation examples would be a bit recursive, but it's a checkerboard background to be able to see edges of elements regardless of their color.
.styledocco-docs {
position: relative;
width: 58%;
min-height: 200px;
margin: 20px 0 40px;
background: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px;
box-shadow: 0 0 3px rgba(0, 0, 0, .1);
}
.styledocco-code {
position: absolute;
top: 5px; bottom: 5px;
right: 0;
width: 42%;
overflow: auto;
padding: 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 0 5px 5px 0;
border: 1px solid rgba(0, 0, 0, .1);
background: rgba(255, 255, 255, .75);
opacity: .75;
-webkit-transition: opacity .25s;
-moz-transition: opacity .25s;
-o-transition: opacity .25s;
}
.styledocco-code:hover {
opacity: 1;
}
.styledocco-example {
margin-top: 10px;
padding: 15px;
overflow: auto;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAAXNSR0IArs4c6QAAAAZQTFRF+vr6////+o8bnQAAABBJREFUCB1jYPjPgBXhEAYAfr8P8bm+jEoAAAAASUVORK5CYII=);
border-top: 1px dotted rgb(220, 220, 225);
}
pre + .styledocco-example {
margin-top: 0;
border-top: 0;
}
.styledocco-example:before, .styledocco-example:after { display: table; content: ""; }
.styledocco-example:after { clear: both; }
.styledocco-docs > pre,
.styledocco-code pre {
white-space: pre-wrap;
word-wrap: break-word;
color: #445;
margin: 0 !important;
line-height: 1.1 !important;
}
.styledocco-docs > .pilcrow {
position: absolute;
right: 0; top: 0;
text-decoration: none;
font-weight: bold;
opacity: .5;
}
.styledocco-docs > .pilcrow:hover {
opacity: 1;
}
.styledocco-docs > pre {
max-height: 200px;
overflow-y: auto;
padding: 10px 20px;
background: rgb(248, 249, 251);
border: 1px solid rgba(220, 220, 225, .8);
border-left: 0; border-right: 0;
}
.styledocco-example + pre {
border-top: 1px dotted rgb(220, 220, 225);
}
.styledocco-docs > pre:first-child {
border-top: 0;
}
.styledocco-docs > pre:last-child {
border-bottom: 0;
}
.styledocco-code pre {
padding: 0;
background: transparent;
border: 0;
}