BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

adding some real code styling to the docs to make them legible and starting to add the docs code content

Browse Source
This commit is contained in:
Dave Gamache 2014-12-01 11:30:23 -08:00
parent 2cbda075be
commit 4785e60a39
4 changed files with 564 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
index.html
View File

@ -23,12 +23,19 @@
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/custom.css">
<!-- Favicons
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<link rel="stylesheet" href="stylesheets/github-prettify-theme.css">
<script src="scripts/site.js"></script>
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<body class="code-snippets-visible">
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
@ -71,7 +78,7 @@
<!-- Grid -->
<div class="docs-section">
<h6 class="docs-header">The grid</h6>
<p>The grid is just a <u>12-column fluid grid with a max width of 960px</u>, but the max can be changed with one line of CSS. The syntax is simple and it makes responsive implementation much, much easier. Go ahead, resize the browser. </p>
<p>The grid is just a <u>12-column fluid grid with a max width of 960px</u>, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes responsive implementation much, much easier. Go ahead, resize the browser. </p>
<div class="example-grid docs-example">
<div class="row">
<div class="one column">One</div>
@ -122,27 +129,35 @@
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
<pre class="code-example">
<code class="code-example-body">
<div class="container">
<code class="code-example-body prettyprint"><!-- .container is main centered wrapper -->
<div class="container">
<!-- all columns must be wrapped in a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<!-- just use a number and class 'column' or 'columns' -->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
<!-- ...few more in-between .rows -->
<!-- there are a few shorthand columns widths as well -->
<div class="row">
<div class="ten columns">Ten</div>
<div class="two columns">Two</div>
<div class="one-third columns">1/3</div>
<div class="two-thirds columns">2/3</div>
</div>
<div class="row">
<div class="eleven columns">Eleven</div>
<div class="one column">One</div>
<div class="one-half columns">1/2</div>
<div class="one-half columns">1/2</div>
</div>
</div>
</code>
</div>
<!-- Note: columns *cannot* be nested, but you shouldn't ever need to -->
</code>
</pre>
<!-- ————————————————————————————————————————————————————— -->
@ -169,30 +184,71 @@
</div>
</div>
</div>
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
<pre class="code-example">
<code class="code-example-body">
<div class="container">
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
</div>
</code>
<code class="code-example-body prettyprint"><!-- Standard Headings -->
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<!-- Base type size -->
<p>The base type is 15px over 1.6 line height (24px)</p>
<!-- Other styled text tags -->
<strong>Bolded</strong>
<em>Italicized</em>
<a>Colored</a>
<u>Underlined</u>
</code>
</pre>
<!-- ————————————————————————————————————————————————————— -->
</div>
<!-- Buttons -->
<div class="row docs-section">
<h6 class="docs-header">Buttons</h6>
<p>Buttons come in two basic flavors in Skeleton. The standard <code>&lt;button&gt;</code> element is vibrant, whereas the <code>.secondary</code> button takes a monotone backseat.</p>
<p>Buttons come in two basic flavors in Skeleton. The standard <code>&lt;button&gt;</code> element is plain, whereas the <code>.button-primary</code> button is vibrant and prominent.</p>
<div class="docs-example">
<div>
<a class="button" href="#">Anchor button</a>
<button>Button element</button>
<a class="button button-primary" href="#">Anchor button</a>
<button class="button button-primary">Button element</button>
<input type="submit" value="submit input">
<input type="button" value="button input">
</div>
<div>
<a class="button button-primary" href="#">Anchor button</a>
<button class="button-primary">Button element</button>
<input class="button-primary" type="submit" value="submit input">
<input class="button-primary" type="button" value="button input">
</div>
</div>
<!-- CODE EXAMPLE ———————————————————————————————————————— -->
<pre class="code-example">
<code class="code-example-body prettyprint"><!-- Standard buttons -->
<a class="button" href="#">Anchor button</a>
<button>Button element</button>
<input type="submit" value="submit input">
<input type="button" value="button input">
<!-- Primary buttons -->
<a class="button button-primary" href="#">Anchor button</a>
<button class="button-primary">Button element</button>
<input class="button-primary" type="submit" value="submit input">
<input class="button-primary" type="button" value="button input">
</code>
</pre>
<!-- ————————————————————————————————————————————————————— -->
</div>
<!-- Forms -->
@ -258,7 +314,7 @@
<!-- Code -->
<div class="row docs-section">
<h6 class="docs-header">Code</h6>
<p>Code styling was kept super basic – basically just wrap something in a <code>&lt;code&gt;</code> tag and it will look just like that code tag just did. For blocks of code just use a <code>&lt;pre&gt;</code> tag.</p>
<p>Code styling was kept super basic – basically just wrap something in a <code>&lt;code&gt;</code> tag and it will look just like that code tag just did. For blocks of code, wrap a <code>&lt;code&gt;</code> tag with a <code>&lt;pre&gt;</code> tag.</p>
<div class="docs-example">
<pre><code>.some-class {<br>&nbsp;&nbsp;background-color: red<br>}</code></pre>
</div>
@ -331,52 +387,15 @@
<div class="code-toggler">
<span class="code-toggle"></span>
<span class="code-label">
<span class="code-label-show">Show </span>
<span class="code-label-hide">Hide </span>
code
Code
<span class="code-label-show">hidden</span>
<span class="code-label-hide">visible</span>
</span>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var codeIsActive = false,
$sections = $('.docs-section'),
$window = $(window)
$('.code-toggler').on('click', toggleCode)
function toggleCode() {
var windowScrollTop = $window.scrollTop()
var offsetHeight = windowScrollTop
$sections.each(function (i) {
if($(this).children('.code-example').length > 0) {
var codeExampleHeight = $(this).children('.code-example').outerHeight(true),
sectionBottomPadding = parseInt($('.docs-section').css('padding-bottom'))
if(windowScrollTop > $(this).offset().top + $(this).outerHeight() - sectionBottomPadding) {
if(codeIsActive == false) {
offsetHeight += codeExampleHeight
} else {
offsetHeight -= codeExampleHeight
}
}
}
})
$('body').toggleClass('code-snippets-visible')
codeIsActive = !codeIsActive
$window.scrollTop(offsetHeight)
}
});
</script>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

58
scripts/site.js Normal file
View File

@ -0,0 +1,58 @@
$(document).ready(function() {
// Variables
var codeIsActive = true,
$codeSnippets = $('.code-example-body'),
$sections = $('.docs-section'),
$window = $(window),
entityMap = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': '&quot;',
"'": '&#39;',
"/": '&#x2F;'
}
function init() {
$('.code-toggler').on('click', toggleCode)
buildSnippets();
}
function escapeHtml(string) {
return String(string).replace(/[&<>"'\/]/g, function (s) {
return entityMap[s];
});
}
function buildSnippets() {
$codeSnippets.each(function() {
var newContent = escapeHtml($(this).html())
$(this).html(newContent)
})
}
function toggleCode() {
var windowScrollTop = $window.scrollTop()
var offsetHeight = windowScrollTop
$sections.each(function (i) {
if($(this).children('.code-example').length > 0) {
var codeExampleHeight = $(this).children('.code-example').outerHeight(true),
sectionBottomPadding = parseInt($('.docs-section').css('padding-bottom'))
if(windowScrollTop > $(this).offset().top + $(this).outerHeight() - sectionBottomPadding) {
if(codeIsActive == false) {
offsetHeight += codeExampleHeight
} else {
offsetHeight -= codeExampleHeight
}
}
}
})
$('body').toggleClass('code-snippets-visible')
codeIsActive = !codeIsActive
$window.scrollTop(offsetHeight)
}
init();
});

8
stylesheets/custom.css
View File

@ -32,7 +32,8 @@
font-weight: 600;
letter-spacing: .1rem; }
.docs-example .row,
.docs-example.row {
.docs-example.row,
.docs-example form {
margin-bottom: 0; }
.docs-example h1,
.docs-example h2,
@ -46,10 +47,13 @@
color: #999;
letter-spacing: normal; }
.code-example {
margin-top: 0;
margin-top: 1.5rem;
margin-bottom: 0;
display: none;
}
.code-example-body {
white-space: pre;
}
.code-snippets-visible .code-example {
display: block;
}

149
stylesheets/github-prettify-theme.css Normal file
View File

@ -0,0 +1,149 @@
/* GitHub Theme */
.prettyprint {
background: #fff;
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
font-size: 1.2rem;
padding: 2.5rem 3rem;
-webkit-font-smoothing: antialiased;
}
.pln {
color: #333333;
}
@media screen {
.str {
color: #dd1144;
}
.kwd {
color: #333333;
}
.com {
color: #999988;
}
.typ {
color: #445588;
}
.lit {
color: #445588;
}
.pun {
color: #333333;
}
.opn {
color: #333333;
}
.clo {
color: #333333;
}
.tag {
color: navy;
}
.atn {
color: teal;
}
.atv {
color: #dd1144;
}
.dec {
color: #333333;
}
.var {
color: teal;
}
.fun {
color: #990000;
}
}
@media print, projection {
.str {
color: #006600;
}
.kwd {
color: #006;
font-weight: bold;
}
.com {
color: #600;
font-style: italic;
}
.typ {
color: #404;
font-weight: bold;
}
.lit {
color: #004444;
}
.pun, .opn, .clo {
color: #444400;
}
.tag {
color: #006;
font-weight: bold;
}
.atn {
color: #440044;
}
.atv {
color: #006600;
}
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin-top: 0;
margin-bottom: 0;
}
/* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
/* */
}
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
/* */
}
/* My additional styles */
/*li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }*/
.prettyprint li {
margin-bottom: .3rem;
}