From 4785e60a39bd11858006b433b3f1f00400ea47c7 Mon Sep 17 00:00:00 2001 From: Dave Gamache Date: Mon, 1 Dec 2014 11:30:23 -0800 Subject: [PATCH] adding some real code styling to the docs to make them legible and starting to add the docs code content --- index.html | 683 +++++++++++++------------- scripts/site.js | 58 +++ stylesheets/custom.css | 8 +- stylesheets/github-prettify-theme.css | 149 ++++++ 4 files changed, 564 insertions(+), 334 deletions(-) create mode 100644 scripts/site.js create mode 100644 stylesheets/github-prettify-theme.css diff --git a/index.html b/index.html index 2467652..b219e70 100644 --- a/index.html +++ b/index.html @@ -2,381 +2,400 @@ - - - Your Page Title Here - - + + Your Page Title Here + + - - + - - + - - - + + - - + + + + + + + + - + - -
-
-

A dead simple, responsive boilerplate.

- Download -
-
- - Super light at less than a kb & built with mobile in mind. -
-
- - Styles designed to be a starting point, not a UI framework. -
-
- - No compiling or installing necessary. Just vanilla CSS. -
-
-
+ +
+
+

A dead simple, responsive boilerplate.

+ Download +
+
+ + Super light at less than a kb & built with mobile in mind. +
+
+ + Styles designed to be a starting point, not a UI framework. +
+
+ + No compiling or installing necessary. Just vanilla CSS. +
+
+
- - -
-
Is Skeleton for you?
-

You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap and Foundation are overkill for your project and you just want the basics. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has less than 100 lines of custom CSS.

-

Love Skeleton and want to share it, follow it, love it? Well, I appreciate that <3

- - - - - -
+ +
+
Is Skeleton for you?
+

You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap and Foundation are overkill for your project and you just want the basics. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has less than 100 lines of custom CSS.

+

Love Skeleton and want to share it, follow it, love it? Well, I appreciate that <3

+ + + + + +
- -
-
The grid
-

The grid is just a 12-column fluid grid with a max width of 960px, 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.

-
-
-
One
-
Eleven
-
-
-
Two
-
Ten
-
-
-
Three
-
Nine
-
-
-
Four
-
Eight
-
-
-
Five
-
Seven
-
-
-
Six
-
Six
-
-
-
Seven
-
Five
-
-
-
Eight
-
Four
-
-
-
Nine
-
Three
-
-
-
Ten
-
Two
-
-
-
Eleven
-
One
-
-
- + +
+
The grid
+

The grid is just a 12-column fluid grid with a max width of 960px, 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.

+
+
+
One
+
Eleven
+
+
+
Two
+
Ten
+
+
+
Three
+
Nine
+
+
+
Four
+
Eight
+
+
+
Five
+
Seven
+
+
+
Six
+
Six
+
+
+
Seven
+
Five
+
+
+
Eight
+
Four
+
+
+
Nine
+
Three
+
+
+
Ten
+
Two
+
+
+
Eleven
+
One
+
+
+ 
-	
-		

-			

-				
One

-				
Eleven

-			

-			

-				
Two

-				
Ten

-			

-			
-			

-				
Ten

-				
Two

-			

-			

-				
Eleven

-				
One

-			

-		

-	
+
+

+  
+  
+  

+    
One

+    
Eleven

+  

+
+  
+  

+    
Two

+    
Ten

+  

+
+  
+  

+    
1/3

+    
2/3

+  

+  

+    
1/2

+    
1/2

+  

+
+

+
+
+
- -
- -
-
Typography
-

Type is all set with the rems, so font-sizes and spacial relationships are responsively sized based on a single <html> font-size property. Everything is still base 10 though so, an <h1> is 5.0rem, which just means 50px.

-
-
-
-

The typography base is 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

-

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

-
-
-

Heading <h1> 50rem

-

Heading <h2> 42rem

-

Heading <h3> 36rem

-

Heading <h4> 30rem

-
Heading <h5> 24rem
-
Heading <h6> 15rem
-
-
-
- +
+ + +
+
Typography
+

Type is all set with the rems, so font-sizes and spacial relationships are responsively sized based on a single <html> font-size property. Everything is still base 10 though so, an <h1> is 5.0rem, which just means 50px.

+
+
+
+

The typography base is 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

+

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

+
+
+

Heading <h1> 50rem

+

Heading <h2> 42rem

+

Heading <h3> 36rem

+

Heading <h4> 30rem

+
Heading <h5> 24rem
+
Heading <h6> 15rem
+
+
+
+ + + 
-	
-		

-			

-				
One

-				
Eleven

-			

-		

-	
+
+
Heading

+
Heading

+
Heading

+
Heading

+
Heading

+
Heading

+
+
+
The base type is 15px over 1.6 line height (24px)

+
+
+Bolded
+Italicized
+Colored
+Underlined
+
-
- -
-
Buttons
-

Buttons come in two basic flavors in Skeleton. The standard <button> element is vibrant, whereas the .secondary button takes a monotone backseat.

-
- Anchor button - - Anchor button - -
-
- -
-
Forms
-

Forms are a huge pain, but hopefully these styles make it a bit easier.

-
-
-
-
- - -
-
- - -
- - - - -
-
-
-
+
- -
-
Lists
-
-
-
    -
  • Unordered lists have basic styles
    • -
  • - They use the circle list style -
      -
    • Nested lists styled to feel right
      • -
    • Can nest either type of list into the other
      • -
    -
    • -
  • Just more list items mama san
    • -
-
-
-
    -
  1. Ordered lists also have basic styles
    2. -
  2. - They use the decimal list style -
      -
    • Ordered and unordered can be nested
      • -
    • Can nest either type of list into the other
      • -
    -
    3. -
  3. Last list item just for the fun
    4. -
-
-
-
+ +
+
Buttons
+

Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary button is vibrant and prominent.

+
+
+ Anchor button + + + +
+
+ Anchor button + + + +
+
- -
-
Code
-

Code styling was kept super basic – basically just wrap something in a <code> tag and it will look just like that code tag just did. For blocks of code just use a <pre> tag.

-
- 
.some-class {
  background-color: red
}
-
-
- -
-
Tables
-

Only most basic styling for tabular data. Remember to always use a proper table structure – check the code example if you're not sure about it.

-
- - - - - - - - - - - - - - - - - - - - - - - -
NameAgeSexLocation
Dave Gamache26MaleSan Francisco
Dwayne Johnson42MaleHayward
-
-
+ +
+
+Anchor button
+
+
+
 
-		
-		

-			
Media queries

-			
Skeleton uses media queries to serve the scalable grid, but also has a list of queries for convenience of styling your site across devices. There are two sets of queries, the first is mobile-first style, meaning they target min-width so all the base styles are mobile, then queries are used to enhance for larger screen sizes. Mobile-first queries are how Skeleton's grid is styled. I've also provided the same set of queries with max-width if that's your preference. The sizes for the queries are:

-			

-				

-					
    
-						
  • Desktop HD: 1200px
    • 
-						
  • Desktop: 1000px
    • 
-						
  • Tablet: 750px
    • 
-					
					
-				

-				

-					
    
-						
  • Phablet: 550px
    • 
-						
  • Mobile: 400px
    • 
-					
					
-				

-			

-		

+
+Anchor button
+
+
+
+
+
+ - -
-
Examples of Skeleton sites
-
- -
-
License & Log
-

All parts of Skeleton are free to use and abuse under the open-source MIT license. More importantly, if you're into coding head over to the Github page and contribute or fork this bad boy.

-
+
-
- - - Show - Hide - code - -
+ +
+
Forms
+

Forms are a huge pain, but hopefully these styles make it a bit easier.

+
+
+
+
+ + +
+
+ + +
+ + + + +
+
+
+
-
+ +
+
Lists
+
+
+
    +
  • Unordered lists have basic styles
    • +
  • + They use the circle list style +
      +
    • Nested lists styled to feel right
      • +
    • Can nest either type of list into the other
      • +
    +
    • +
  • Just more list items mama san
    • +
+
+
+
    +
  1. Ordered lists also have basic styles
    2. +
  2. + They use the decimal list style +
      +
    • Ordered and unordered can be nested
      • +
    • Can nest either type of list into the other
      • +
    +
    3. +
  3. Last list item just for the fun
    4. +
+
+
+
- - + +
+
License & Log
+

All parts of Skeleton are free to use and abuse under the open-source MIT license. More importantly, if you're into coding head over to the Github page and contribute or fork this bad boy.

+
+
+ + + Code + hidden + visible + +
+ +
+ –––––––––––––––––––––––––––––––––––––––––––––––––– --> \ No newline at end of file diff --git a/scripts/site.js b/scripts/site.js new file mode 100644 index 0000000..0a74ea3 --- /dev/null +++ b/scripts/site.js @@ -0,0 +1,58 @@ +$(document).ready(function() { + + // Variables + var codeIsActive = true, + $codeSnippets = $('.code-example-body'), + $sections = $('.docs-section'), + $window = $(window), + entityMap = { + "&": "&", + "<": "<", + ">": ">", + '"': '"', + "'": ''', + "/": '/' + } + + 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(); + +}); \ No newline at end of file diff --git a/stylesheets/custom.css b/stylesheets/custom.css index 518d341..005eaab 100644 --- a/stylesheets/custom.css +++ b/stylesheets/custom.css @@ -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; } diff --git a/stylesheets/github-prettify-theme.css b/stylesheets/github-prettify-theme.css new file mode 100644 index 0000000..7dd0a0d --- /dev/null +++ b/stylesheets/github-prettify-theme.css @@ -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; +} \ No newline at end of file