Skip to content

Instantly share code, notes, and snippets.

@andrewliebchen
Forked from it-is-full-of-stars/gist:4111582
Created November 20, 2012 02:03
Show Gist options
  • Save andrewliebchen/4115483 to your computer and use it in GitHub Desktop.
Save andrewliebchen/4115483 to your computer and use it in GitHub Desktop.
Ruby on Rails for Designers

#Rails

##Creating a Rails project With the command line, navigate to where you want the project folder to be generated (e.g. documents/my_rails_projects/) and type the following to create a project called project_name:

rails new project_name

Navigate to that folder and type the following to create a controller called posts:

rails g controller posts

In text editor, open the file project_name/app/controllers/posts_controller and make sure it says:

class PostsController < ApplicationController
  def index
  end
end

Navigate to project_name/app/views/posts/ and create the file index.html.erb in that folder. Open project_name/config/routes.rb and under the first row, enter:

resources :posts

With the command line tool, make sure you are have navigated to the project folder, then type:

rails s

In your browser, go to localhost:3000/posts. To stop the server, hit ctrl-C.

##Generate a controller and action

rails g controller <controller name> <action>

##Change layout for entire Controller

class ProductsController < ApplicationController
  layout "inventory"
end

This is commonly used when ...

##Change layout for Controller ACTION

class ProductsController < ApplicationController
  def index
    render :layout => 'special_layout'
  end
end

This is commonly used when ...

##If server doesn't start: Migrate the database

bundle exec rake db:migrate	

This needs to be written into the command line if development has been been working on the database and the server doesn't start.

#HTML.ERB

##Create a text link

<%= link_to “Go Home”, root_path %>

"Go Home" is the text shown for the link.

##Wrap an image, declared in the HTML, in a link

<%= link_to root_path, :id => "root" do %>
  <img />
<% end %>

##Wrap an image, declared in the SCSS, in a link

<%= link_to('', root_path, class: 'my_image') %>

In the SCSS, use the "my_image" class to add background-image, or other styling. The '' makes sure no text is used for the link.

##Repeat elements

<% 3.times do %>
  <li></li>
<% end %>

##Render a partial

<%= render 'sidebar' %>

When saving partials, make sure their names start with an underscore and have the file type _PARTIAL.html.erb. They should not be called with an underscore though.

#Images

##Insert an image with a class

<%= image_tag('divider_arrow.png', :class => "arrow") %>

##Insert an image using the asset pipeline

<%= image_tag("foo.png") %>

##Linking Javascript assets

<%= javascript_include_tag "main", "columns" %>

##Linking Stylesheet assets

<%= stylesheet_link_tag "main", "columns" %>

#CSS

##CSS Image Assets

background: image_url("image.png");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment