As discussed in earlier lesson, flowbite can be very handy when it comes to implementing tailwind design.
As we know, tailwind is a CSS framework packed with classes corresponding to actual CSS. Similarly, we have Flowbite which is a package built on top of tailwind. Flowbite provides a set of pre-built components such as cards, modals, different buttons and mostly all the basic components.
Let's add flowbite to the app so that we do not have to worry about designs and classes. This will help us better focus more on the app side.
Follow this link to install flowbite to our rails app. We recommend the usage yarn rather than npm by simply typing yarn add flowbite in the command line instead of npm install flowbite
Do not forget to import flowbite
For fixing the basic design of form implementations, paste the following content to config/initializers/simple_form.rb
# frozen_string_literal: true
# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
# Default class for buttons
config.button_class = 'my-2 bg-blue-500 hover:bg-blue-700 text-white font-bold text-sm py-2 px-4 rounded'
# Define the default class of the input wrapper of the boolean input.
config.boolean_label_class = ''
# How the label text should be generated altogether with the required text.
config.label_text = lambda { |label, required, explicit_label| "#{label} #{required}" }
# Define the way to render check boxes / radio buttons with labels.
config.boolean_style = :inline
# You can wrap each item in a collection of radio/check boxes with a tag
config.item_wrapper_tag = :div
# Defines if the default input wrapper class should be included in radio
# collection wrappers.
config.include_default_input_wrapper_class = false
# CSS class to add for error notification helper.
config.error_notification_class = 'text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-400'
# Method used to tidy up errors. Specify any Rails Array method.
# :first lists the first message for each field.
# :to_sentence to list all errors for each field.
config.error_method = :to_sentence
# add validation classes to `input_field`
config.input_field_error_class = 'border-red-500'
config.input_field_valid_class = 'border-green-400'
config.label_class = 'text-sm font-medium text-gray-600'
# vertical forms
#
# vertical default_wrapper
config.wrappers :vertical_form, tag: 'div', class: 'mb-4' do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :minlength
b.optional :pattern
b.optional :min_max
b.optional :readonly
b.use :label, class: 'block', error_class: 'text-red-500'
b.use :input, class: 'shadow appearance-none border border-gray-300 rounded w-full py-2 px-3 bg-white focus:outline-none focus:ring-0 focus:border-blue-500 text-gray-400 leading-6 transition-colors duration-200 ease-in-out', error_class: 'border-red-500', valid_class: 'border-green-400'
b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-red-500 text-xs italic' }
b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-grey-700 text-xs italic' }
end
# vertical input for boolean (aka checkboxes)
config.wrappers :vertical_boolean, tag: 'div', class: 'mb-4 flex items-start', error_class: '' do |b|
b.use :html5
b.optional :readonly
b.wrapper tag: 'div', class: 'flex items-center h-5' do |ba|
ba.use :input, class: 'focus:ring-2 focus:ring-indigo-500 ring-offset-2 h-4 w-4 text-indigo-600 border-gray-300 rounded'
end
b.wrapper tag: 'div', class: 'ml-3 text-sm' do |bb|
bb.use :label, class: 'block', error_class: 'text-red-500'
bb.use :hint, wrap_with: { tag: 'p', class: 'block text-grey-700 text-xs italic' }
bb.use :full_error, wrap_with: { tag: 'p', class: 'block text-red-500 text-xs italic' }
end
end
# vertical input for radio buttons and check boxes
config.wrappers :vertical_collection, item_wrapper_class: 'flex items-center', item_label_class: 'my-1 ml-3 block text-sm font-medium text-gray-400', tag: 'div', class: 'my-4' do |b|
b.use :html5
b.optional :readonly
b.wrapper :legend_tag, tag: 'legend', class: 'text-sm font-medium text-gray-600', error_class: 'text-red-500' do |ba|
ba.use :label_text
end
b.use :input, class: 'focus:ring-2 focus:ring-indigo-500 ring-offset-2 h-4 w-4 text-indigo-600 border-gray-300 rounded', error_class: 'text-red-500', valid_class: 'text-green-400'
b.use :full_error, wrap_with: { tag: 'p', class: 'block mt-2 text-red-500 text-xs italic' }
b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-grey-700 text-xs italic' }
end
# vertical file input
config.wrappers :vertical_file, tag: 'div', class: 'mb-4' do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :minlength
b.optional :readonly
b.use :label, class: 'text-sm font-medium text-gray-600 block', error_class: 'text-red-500'
b.use :input, class: 'w-full text-gray-500 px-3 py-2', error_class: 'text-red-500 border-red-500', valid_class: 'text-green-400'
b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-red-500 text-xs italic' }
b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-grey-700 text-xs italic' }
end
# vertical multi select
config.wrappers :vertical_multi_select, tag: 'div', class: 'my-4', error_class: 'f', valid_class: '' do |b|
b.use :html5
b.optional :readonly
b.wrapper :legend_tag, tag: 'legend', class: 'text-sm font-medium text-gray-600', error_class: 'text-red-500' do |ba|
ba.use :label_text
end
b.wrapper tag: 'div', class: 'inline-flex space-x-1' do |ba|
# ba.use :input, class: 'flex w-auto w-auto text-gray-500 text-sm border-gray-300 rounded p-2', error_class: 'text-red-500', valid_class: 'text-green-400'
ba.use :input, class: 'flex w-auto w-auto shadow appearance-none border border-gray-300 rounded w-full p-2 bg-white focus:outline-none focus:border-blue-500 text-gray-400 leading-4 transition-colors duration-200 ease-in-out'
end
b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-red-500 text-xs italic' }
b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-grey-700 text-xs italic' }
end
# vertical range input
config.wrappers :vertical_range, tag: 'div', class: 'my-4', error_class: 'text-red-500', valid_class: 'text-green-400' do |b|
b.use :html5
b.use :placeholder
b.optional :readonly
b.optional :step
b.use :label, class: 'text-sm font-medium text-gray-600 block', error_class: 'text-red-500'
b.wrapper tag: 'div', class: 'flex items-center h-5' do |ba|
ba.use :input, class: 'rounded-lg overflow-hidden appearance-none bg-gray-400 h-3 w-full text-gray-300', error_class: 'text-red-500', valid_class: 'text-green-400'
end
b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-red-500 text-xs italic' }
b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-grey-700 text-xs italic' }
end
# The default wrapper to be used by the FormBuilder.
config.default_wrapper = :vertical_form
# Custom wrappers for input types. This should be a hash containing an input
# type as key and the wrapper that will be used for all inputs with specified type.
config.wrapper_mappings = {
boolean: :vertical_boolean,
check_boxes: :vertical_collection,
date: :vertical_multi_select,
datetime: :vertical_multi_select,
file: :vertical_file,
radio_buttons: :vertical_collection,
range: :vertical_range,
time: :vertical_multi_select
}
end
Restart the server and hit refresh, you should already notice some changes in the indentation and basic styling of the forms in new and edit paths.
Let's head towards fixing designs a little more.
Update the new.html.erb file with the following code
<h1 class="text-2xl mb-4 font-bold">New Post</h1>
<div class="md:w-[40%]">
<%= simple_form_for @post do |f| %>
<%= f.input :photo %>
<%= f.input :description, input_html: { rows: 8 } %>
<%= f.submit 'Post', class: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800' %>
<% end %>
</div>
Here, we have added classes and wrapper div to make the form look clean enough. There is no magic here, it is just simple tailwind classes to work.
Similarly, we can update the edit.html.erb to look similar to the new page as below
<h1 class="text-2xl mb-4 font-bold">Edit Post</h1>
<div class="md:w-[40%]">
<%= simple_form_for @post do |f| %>
<%= f.input :photo %>
<%= f.input :description, input_html: { rows: 8 } %>
<%= f.submit 'Update Post', class: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800' %>
<% end %>
</div>
We have implemented the same form as in the new.html.erb with few changes in text.
Let's do simple cleansing the design just to make the content clearly visible. Go ahead and add some div wrappers and a little bit of margins and padding around the content. We have a simple design following. You can work it out to make it as beautiful as possible.
<% @posts.each do |post| %>
<div class='pb-16'>
<div><%= image_tag post.user.photo if post.user.photo.attached? %></div>
<div class="font-bold text-xl mb-2"><%= post.user.email.split('@').first %></div>
<div><%= image_tag post.photo, class: 'md:max-w-[75%] mb-2' %></div>
<div class="px-2"><%= post.description %></div>
<% if post.user == current_user %>
<div class="mt-4">
<%= link_to 'Edit Post', edit_post_path(post.id), class: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800' %>
<%= link_to 'Delete Post', post_path(post.id), method: :delete, class: 'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800' %>
</div>
<% end %>
</div>
<% end %>