css github buttons

CSS3 github buttons is awesome button style, this is similar button in github.com, helps you easily create GitHub-style buttons from links, buttons, and inputs. this article is example for use github style button as written in rails code
http://nicolasgallagher.com/lab/css3-github-buttons/
for example:

<a class="button" href="#">Get Started</a>

and

<%=  button_to 'Add to Cart', line_items_path(product_id: product), :class => "button big" %>
<%= f.submit "Create Product", :class => "button big"%>

css3 Pricing Table on rails 3

when designing the pricing table for list of product.  so, in this article is a how to build a price table for listing the products in Rails code

<h1>Products List</h1>
<pre>
<% @products.each do |product| %>
<ul class="pricing_table">
	<li>
<div class="footer">
<h3>Product <%= product.id %></h3>
</div>
<h3><%= product.name %></h3>
<div class="price_body">
<div class="price"><%= product.price %></div>
</div>
<div class="features">
<ul>
	<li><%= product.description %></li>
</ul>
</div>
<div class="footer"><a class="action_button" href="#">Get Started</a></div></li>
</ul>
<pre>
<% end %>

pricing_table
CSS file

 .pricing_table {
	width: 700px;
	color:#fff;
	font-size:12px;
	font-family: Ubuntu, arial, verdana;
	line-height: 150%;
	text-align: center;
	margin: 10px auto 0 auto;
	text-shadow: 0px 1px 0px rgba(0,0,0,.5);

}

/**/

.pricing_table>li {
 background-color: #35afe3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
    background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
    border-bottom: 2px solid #103c56;
    -webkit-box-shadow: inset 0px 2px 0px 0px #6ad2ef;
    -moz-box-shadow: inset 0px 2px 0px 0px #6ad2ef;
    box-shadow: inset 0px 2px 0px 0px #6ad2ef;

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

    width: 33.33%;
	float: left;
	list-style-type: none;
	/*For smooth hover effects if .active is replaced by :hover*/
	transition: all 0.2s;

    margin-bottom:20px;

}

.pricing_table>li.active {
	background: linear-gradient(#F9B84A, #DB7224);
	transform: scale(1.03);
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
}
.pricing_table h3 {
	text-transform: uppercase;
	padding: 15px 0;
	font-size: 14px;
	font-weight: bold;
}
.pricing_table .price_body {
	width: 125px;
	height: 125px;
	margin: 0 auto 15px auto;
	border: 2px solid #fff;
	border-radius: 100%;
	display: table;
}
.pricing_table .price {
	font-size: 30px;
	font-weight: bold;
	text-transform: uppercase;
	/*Lets vertically center align the price now*/
	vertical-align: middle;
	display: table-cell;
}
.pricing_table .price .price_figure {
	display: block;
}
.pricing_table .price .price_term {
	font-size: 11px;
	font-weight: normal;
}

.pricing_table .features li {
	list-style-type: none;
	padding: 5px 0;
}

.pricing_table .footer {
	padding: 10px;
	background: #333;
	margin-top: 10px;
}

.pricing_table .footer .action_button{
	color: #fff;
	font-size: 11px;
	display: inline-block;
	text-decoration: none;
	font-weight: bold;
	background: #000;
	padding: 4px 20px;
	border-radius: 8px;
	background: linear-gradient(#666, #333);
}
.pricing_table .active .footer .action_button {
	background: linear-gradient(#F9B84A, #DB7224);
}

.pricing_table li.active .footer :hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
	background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
	background-color:#ce0100;
}

.pricing_table .active .footer .signup_button {

	margin-left: auto;
    margin-right: auto;
    text-align: center;
	-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
	box-shadow:inset 0px 1px 0px 0px #f29c93;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
	background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
	background-color:#fe1a00;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #d83526;
	display:block;
	color:#ffffff;
	font-family:arial;
	font-size:20px;
	font-weight:bold;
	padding:24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #b23e35;
}

thi’s the products list of Indonesian food
css3 products list

pagination rails 3 with kaminari

put in your Gemfile

gem 'kaminari'

and then, Bundle install

app/controllers/users_controller.rb

@users = User.order("name").page(params[:page]).per(5)
rails g kaminari:views default

config/locales/en.yml

en:
  hello: "Hello world"
  views:
    pagination:
      previous: "&lt; Previous"
      next: "Next &gt;"
      truncate: "..."

app/views/users/index.html.erb

<%= paginate @users %>

kaminari

id-ruby

About ID-ruby

id-ruby

id-ruby is a community of ruby users based in Indonesia. We’re a friendly group that freely shares knowledge about the Ruby programming language, its libraries and frameworks, such as Ruby on Rails. The group meets at least once a month for talks, demos, hacks and discussions. Meetings are free and open to the public. Developers with any level of Ruby experience or any programming languages background are welcomed to participate.

Getting in touch

Join us in our mailing lists, and come see us in our meetups!

homepage : http://id-ruby.org/

Getting involved

Fork our repository here http://github.com/id-ruby/ and send us your best pull request to contribute

Action Mailer

signup

Actiion Mailer Tutorial on Rails 3

Action Mailer has been rewrite in Rails 3 , I assuming that you have the User model, and then I’ll generate a new mailer with the following code

   rails g mailer user_mailer

app/mailers/user_mailer.rb

class UserMailer < ActionMailer::Base
default :from => "slametnhd@gmail.com"

  def registration_confirmation(user)
    @user = user
    mail(:to => user.email, :subject => "Registered")
  end
end

/config/initializers/setup_mail.rb

ctionMailer::Base.smtp_settings = {
 :address              => "smtp.gmail.com",
:port                 => "587",
 :domain               => "mail.gmail.com",
 :user_name            => "slametnhd@gmail.com",
  :password             => "secret",
  :authentication       => "plain",
 :enable_starttls_auto => true
 }

 ActionMailer::Base.default_url_options[:host] = "localhost:3000"

/app/views/user_mailer/registration_confirmation.text.erb

Thank you for registering!
<%= @user.name %>

Sincerely for you

masmet.com

app/controllers/user_controller.rb

def create
      @user = User.new(params[:user])
      if @user.save
        UserMailer.registration_confirmation(@user).deliver
        sign_in @user
        flash[:success] = "Welcome to the Masmet App!"
        redirect_to @user

      else
        @title ="sign up"
        render 'new'
      end
    end

gmail

rails 3: scaffold generator

list of scaffold on rails 3

>rails generate scaffold Post name:string title:string content:text
>rails generate scaffold Account user_name:string description:text
premium:boolean income:integer ranking:float fee:decimal birthday:date
login_time:time
>rails g scaffold Book title:string author:string
>rails g scaffold User name:string age:integer
>rails generate scaffold User name:string email:string
>rails generate scaffold Micropost content:string user_id:integer

———————————————————-

>rails generate

as well as

>rails g