minipai

window.commentsCtrl = ($http, $scope, $element)->
  update = ()->
    $http.get(location.pathname).success (result)->
        $scope.comments = result.comments
  update()

  e$form = $element.find('form')
  e$form.submit (e)->
    e.preventDefault()
    $.post(e$form.attr('action'), e$form.serialize(), ()->

minipai

HTML A

<div class="box">
    <div class="box-title"></div>
    <div class="box-content"></div>
</div>

CSS A

 .box {...}

minipai

{
	"color_scheme": "Packages/Color Scheme - Default/Solarized (Light).tmTheme",
	"draw_white_space": "all",
	"file_exclude_patterns":
	[
		"*.pyc",
		".DS_Store"
	],
	"folder_exclude_patterns":
	[

minipai

<div class="tabs">
  <div class="tab"><div class="tab-box"></div></div>
  <div class="tab"><div class="tab-box"></div></div>
  <div class="tab active"><div class="tab-box"></div></div>
  <div class="tab"><div class="tab-box"></div></div>

</div>
  <div class="content">
    
  </div>

minipai

* {
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}
* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 

minipai

title
Layouts & Partials

Layouts

Layouts allow the common HTML surrounding individual pages to be shared across all your templates. The most basic layout has some shared content and a yield call where templates will place their contents. Furthermore, With wrap_layout, content_for and partial you can build a complex layout inheritance, reduce the duplication of you code in templates to a minimal amount.

Basic layout

minipai

require 'rubygems'
require 'sinatra' 
require 'net/http'

get '/' do  
	
	@stylesheets 	= Dir.glob("public/css/*.css")
	@erb 			= Dir.glob("views/*.erb")
	@erb.delete('views/layout.erb')

minipai

@grid_width: 60px;
@grid_num: 12;
@gutter: 10px;

@total_width: (@grid_width + @gutter * 2) * @grid_num;

.grid_width (@grid_num: 1) {
  width:  (@grid_width + @gutter * 2) * @grid_num - @gutter * 2;
}

minipai

/* ========== */
/* = hide = */
/* ========== */

.hide {
	position: absolute;
	left: -9999px;
}

.hide-text {

minipai

/* css two col function */

.col2(@sider: 200px, @space: 20px) {

	.sider {
		background-color: #ddd; /* just for demo */
		width: @sider;
		float: left;
	}
	.content {