This section explains how to work with custom styles in a Rails application, including: how to incorporate professional styles for the app's design, how to work with the asset pipeline, and much more.
Before we can start implementing designs we need to plan out the basic component structure for each of our layouts. In this guide we'll pick out designs for each of our application's layouts using Bootstrap 4 components.
This guide will examine how to install a Bootstrap 4 template into a Rails 5 application. Specifically, we'll analyze how to properly integrate the HTML and CSS files so that Rails will render them properly on the site.
This guide walks through how to build a new partial in Rails 5 that will contain the specific masthead styles needed for the application layout.
As we continue implementing a design into the Rails application, in this guide we'll implement footer styles along with updating the Rails view helper method to add styles to our dynamic login links.
This guide walks through how to embed a basic HTML map into a Rails 5 application's contact page.
This lesson examines how to integrate the Bootstrap 4 styles into a Devise Account Update form. Additionally, we'll walk through how the Bootstrap grid system works and how you can use it to implement columns.
This guide examines how to override the default text alignment styles provided by Bootstrap 4's Card class in order to finish up the styles for the Devise User registration edit page.
Now that we have built out the initial design for the Devise views we will populate the design to the user registration view page.
This guide gives a step by step approach for how to customize the design for the Devise sign in and password reset view pages while using the Bootstrap 4 form style components.
Fixing bugs is a key component to development. And in this guide we're going to walk through how to fix a bug in our view pages by setting a default argument value for the login_helper method.
Since our application has multiple layout options, this functionality gives our app the ability to have completely different designs on different pages.
With the application's blog layout implemented, in this guide we'll start to integrate the live data coming from the Rails system. Specifically in this lesson we'll implement the nav bar.
This guide focuses on how to integrate real data from the database in the new blog index page, including how to transition the design from a table into using custom classes.
As we continue building out the styles for the blog layout, in this guide we will focus on customizing the design for the blog's show and form pages.
This is going to be a fast moving guide and we're going to implement some helpful features for our blog. In this lesson we'll walk through how to organize our code into additional partials, implement Font Awesome icons, and integrate Kaminari based pagination.
Now that we've completed the other two layouts, we're ready to start working on the Portfolio section of the application. In this guide we're going to implement the initial design for the portfolio layout, including integrating the HTML/CSS assets provided by Bootstrap 4.
This guide will focus on how to implement the design for the Bootstrap 4 animated navigation component, along with moving view files into shared partials on the Portfolio index page.
This guide will finish up the design for the front facing components for the application. In this guide we'll walk through how to utilize the Bootstrap grid layout system to finalize the Portfolio show page design.
As we close out the initial design implementation for the application we will finish up styling the forms for the portfolio form pages by leveraging Bootstrap 4 styles.
devCamp does not support ancient browsers.
Install a modern version for best experience.