Working with Styles in Rails


Not CompletedSection Introduction

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.

Not CompletedPortfolio Design Planning for Layout Specific Styles

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.

Not CompletedImplementing the Initial Homepage Design in Rails 5 with Bootstrap 4

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.

Not CompletedBuilding a Navigation Partial for the Master Application Layout with Rails and Bootstrap 4

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.

Not CompletedHow to Implement a Footer Along with Adding Method Arguments to a Rails View Helper

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.

Not CompletedHow to Embed a Google Map into a Rails Application

This guide walks through how to embed a basic HTML map into a Rails 5 application's contact page.

Not CompletedGuide to Updating the Styles for the Devise Edit Account Page in Rails

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.

Not CompletedHow to Override Default Bootstrap Styles for Text Alignment in the Card Class

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.

Not CompletedImplementing Styles for the Devise Registration Page with Bootstrap 4

Now that we have built out the initial design for the Devise views we will populate the design to the user registration view page.

Not CompletedHow to Design Devise Sign In and Password Reset Pages with Bootstrap 4 Form Styles

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.

Not CompletedHow to Set Default Values for View Helper Method Arguments in Rails 5

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.

Not CompletedIntegrating a Different Design for a Separate Blog Layout in Rails 5

Since our application has multiple layout options, this functionality gives our app the ability to have completely different designs on different pages.

Not CompletedHow to Use Bootstrap 4 to Add a Custom Nav Bar to a Blog Layout in Rails

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.

Not CompletedCustomizing the Design for the Blog Index Page with Bootstrap 4

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.

Not CompletedGuide to Adding Styles to the Blog Show and Form Pages with Bootstrap 4 Components

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.

Not CompletedImplementing Partials, Pagination, and Font Awesome Icons into a Rails 5 Application

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.

Not CompletedImplementing the Initial Design for the Portfolio Index Page with Bootstrap 4's Album Template

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.

Not CompletedIntegrating the Portfolio Animated Navigation Slider, Footer, and Final Index Components

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.

Not CompletedUsing the Bootstrap 4 Grid Layout to Style the Portfolio Show Page in Rails

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.

Not CompletedImplementing Bootstrap 4 Forms for the Portfolio Form Pages

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.

Quizzes


Styling in Rails
    Unsupported Browser

    devCamp does not support ancient browsers.
    Install a modern version for best experience.