Skip to content

the-trash/the_template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sinatra/Padrino App for Frontend developers

Use HAML, SASS and Coffee Script for frontend development right now!

Installation on Windows

Ruby Install

Download .ZIP archive with Application

You can use git-clone way if you want

Windows command line actions

  • start Windows command line with cmd command
  • gem install bundler --no-ri --no-rdoc
  • go to directory of Application
  • bundle
  • padrino start -p 3000

Welcome to Application

  • open your browser
  • localhost:3000

Installation on *NIX

Ruby Install

Use your OS way to install git, ruby, gems or rvm

Clone Application

  • git clone git://github.com/the-teacher/the_template.git

Terminal Action

  • gem install bundler --no-ri --no-rdoc
  • go to directory of Application
  • bundle
  • padrino start -p 3000

Welcome to Application

  • open your browser
  • localhost:3000

How to use HAML

  • Create new action in application file app\app.rb
get '/new_action' do
  haml :new_action
end
  • Create new HAML file app\views\new_action.haml

  • Go to localhost:3000/new_action

How to use SASS

  • Create new SASS file in *public\stylesheets\scss*

  • Include SASS file in Application Layout file app\views\layouts\layout.haml

= stylesheet_link_tag 'reset'
= stylesheet_link_tag 'headers'
= stylesheet_link_tag 'custom'

= stylesheet_link_tag 'NEW_SASS_FILE'
  • Look at result localhost:3000/stylesheets/NEW_SASS_FILE.css

How to use Coffee Script

  • Create new Coffee Script file in *public\javascripts\coffee*

  • Include Coffee Script file in Application Layout file app\views\layouts\layout.haml

= javascript_include_tag 'jquery'
= javascript_include_tag 'jquery-ui'
= javascript_include_tag 'application'

= javascript_include_tag 'NEW_COFFEE_SCRIPT_FILE'
  • Look at result localhost:3000/javascripts/NEW_COFFEE_SCRIPT_FILE.js

Helpers

MD5 Helper

Just wrapper for Digest::MD5.hexdigest

def md5 str = ''
  Digest::MD5.hexdigest str.to_s
end

Email Image Helper

Gives direct link to Image if :is_mail => false, and build image tag with image cid if :is_email => true

def email_image name, options, is_mail = false
  return image_tag(name, options) unless is_mail
  options.merge!(:src => "cid:#{name}")
  tag :img, options
end
= email_image 'sinatra.png', {}, true
= email_image 'sinatra.png', {}, false

Partial Helper

Emulate behavior of haml partials with Rails-like style. Partials directory is *app\views\partials*

Names of partials starts with underscore

def partial name, options = {}
  parts = name.split '/'
  name  = parts.pop
  path  = [parts, "_#{name}"].join '/'
  haml path.to_sym, :locals => options[:locals], :layout => false
end
= partial 'partials/test', :locals => { :hello_variable => 'SOME VARIABLE FOR PARTIAL' }

app\views\partials\_test.haml

HTML letters

  • Setup you Email service options in app\app.rb file
set :delivery_method, :smtp => { 
  :address              => "smtp.gmail.com",
  :port                 => 587,
  :user_name            => 'my.markup.template@gmail.com',
  :password             => 'qwerty',
  :authentication       => :plain,
  :enable_starttls_auto => true  
}
  • Use direct link localhost:3000/mail/letter to see your HTML letter in browser
get '/mail/letter' do
  haml :"../mailers/letter", :locals => { :is_mail => false }
end
  • Use send mail link localhost:3000/mail/send to send your email. You will be redirected to /mail/letter at end of sending process.

  • Add attachments with before filter

before '/mail/send' do
  @@img_path    = "#{Padrino.root}/public/images/"
  @@attachments = [
    'sinatra.png'
  ]
end
  • Use email_image 'sinatra.png', {}, true on email sending

  • Use email_image 'sinatra.png', {}, false one HTML letter cteating

About

Padrino Template App for frontend developers

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published