Style Guide?

index.haml

//<script type="text/x-emblem">
//  h1 Welcome to my App
//  = outlet
//</script>
.container
  .page-header 
    %h2 
      Modules 
      .pull-right <small> local storage module </small>
  %pre.language-coffeescript
    %code
      :preserve
        log = -> console.log arguments...
        onStorageEvent = (event) -> log event, 'just got stored!'
        
        user = 
          id:   32
          name: 'Clint'
          favorite_foods: ['indian', 'italian', 'etc']
            
        store = (($) ->
          _  = {}
          _.set = (key, obj) -> localStorage.setItem(key, btoa(JSON.stringify(obj))) if key? && obj? #arguments...?
          _.get = (key) ->      JSON.parse(atob(localStorage.getItem(key)))          if key?

          _.listen = (_function) -> window.addEventListener 'storage', _function, false
          _
        )(jQuery) #if you need it in the scope of store
        
        $ ->
          store.set(user.id, user)
          store.get('user').name + ' likes ' + store.get('user').favorite_foods.join(', ')
          store.listen(onStorageEvent)
        
  .page-header 
    %h2
      Closure 
      .pull-right <small> funcName = do -> </small>
  %pre.language-coffeescript
    %code
      :preserve
        $ -> some()
        
        some = do ->
          # define functions
          some   = -> # do something
          thing  = -> 
            console.log "and this function "

          if some()
          else
            thing()

  .page-header 
    %h2 
      Objects
      .pull-right { }
  %pre.language-coffeescript
    %code
      :preserve
        user = {}
        user.name = 'josh'
        
        user =
          name: 'josh'
          
  .page-header 
    %h2 
      Protypes
      .pull-right ::
  %pre.language-coffeescript
    %code
      :preserve
        Array::contains = (item) -> @indexOf(item) is >= 0 
        Number::lucky = -> @ is 7 
        Storage::
        etc...
        
        [1,2,3,4].contains(2) # true
        7.lucky() #true
  .page-header 
    %h3
      $ Chainable functions
      .pull-right return @
  %pre.language-coffeescript
    %code
      :preserve
        $.fn.slideFade = (timing) -> 
          @animate({width:'toggle'}, timing)
          return @
        
        $('input').slideFade().doSomeOtherFunction()
        

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style-guide.markdown

Style Guide?

A Pen by Clint Bettiga on CodePen.

License.

style.scss

@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://raw.githubusercontent.com/PrismJS/prism/gh-pages/themes/prism-okaidia.css);
h1,h2,h3,h4,h5,h6 {
  font-family: 'Lato', sans-serif ;
}



/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #f8f8f2;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #f92672;
}

.token.boolean,
.token.number {
	color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function {
	color: #e6db74;
}

.token.keyword {
	color: #66d9ef;
}

.token.regex,
.token.important {
	color: #fd971f;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />