Starting a Rails 5 Application with SimpleForm and Bootstrap

We will start a Rails 5 application with the Bootstrap responsive web design framework and a streamlined form framework. This will be accomplished with the implementation of the simple_form gem.

Start a new Rails application in the Terminal with rails new simple_app

Change directory in to the simple_app application root folder and open your application in your code editor.

Open your Gemfile and add the gem simple_form

simple_form_gem_in_gemfile

Then bundle your application.

After you bundle, you will see a message popping up noting that you need to still add a Bootstrap Stylesheet to your Assets folder. A great place to get a Bootstrap stylesheet that allows you some differing themes is Bootswatch. You can select from varying color schemes.

bootswatch_screenshot

Pick one that you like, click the Download button, and select the bootstrap.min.css link. This will open the file in your browser. Press control “a” (ctrl-a). That will select all of the CSS script. Follow up with ctrl-c.Β This will copy the text to your clipboard.

In your code editor open your assets folder, open your stylesheets, create a new file titled main.css and paste your bootstrap.min.css from your clipboard into the file. Save your file and then open the application.html.erb file inside your layouts folder. Add the stylesheet_link_tag ‘main’, media: ‘all’, ‘data-turbolinks-track’: ‘reload’ to your file.

main_css_stylesheet_link_in_application_layout

Drop down to the <body> tag and add in a container tag to your application. This will provide the bootstrap container to your application providing a space between the edge of your screen and the text.

body_tag_container

Go to assets.rb file in the config/initializers folder and add in the instructions for the Rails application to pre-compile the main.css file in your assets folder. Add this line Rails.application.config.assets.precompile += %w( main.css )

precompile_assets_in_initializers

Now add in a scaffold. For instance, add in a Posts scaffold for your application. Head to the command line and run rails g scaffold Posts title body:text tags

 

Now it is time to set up your database. Run rake db:migrate

After you have set up your database. Let’s take a look at what the simple_form code looks like. Open your _form.html.erb file and notice how streamlined and easy it is to read your code. Add the autofocus: true text to your title form input. This is will draw the user’s attention to the title input field in the browser by highlighting it. Save your file.

simple_form_rails_form_image.png

Go to routes and make the Posts index your home page by adding root “posts#index” to your routes.rb file.

Save your file and head back to the terminal to start your rails server with the rails s command. Head to localhost:3000 in your browser. Click New in your application and see the layout of your rails form.simple_form_bootstrap_responsive_design_blog

Your mobile-friendly Ruby on Rails application is up and running.

code on

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: