Icons | Gradients | Asset Pipeline

I’ve just completed the first part of Part VII of Rob Dey’s Codermanual course! He recommended some great resources for styling your website and improving site loading speed.

This is what my Rails app looks like so far, after completing the first part of Part VII:
codermanual saas


Font Awesome

If you want to add icons to your website, you can go to Font Awesome where there are tons of free pre-made icons. You can resize the icons, add them to a drop-down menu, and also add animations to the icons.

You can read their Getting Started page here to learn how to integrate it into your Rails app.


UIGradients

UI Gradients Color Design
A great website for getting CSS codes for pre-made color gradients. The website has a beautiful layout, with easy navigation. Click on the gradient you fancy and check out the CSS code. Simply copy and paste into your project!


Asset Pipeline

The asset pipeline in Ruby on Rails combines all your CSS files into one file, and all your JavaScript files into one file. Compressing them for faster loading speeds. In Rails 4, the asset pipeline is automatically added in your Gemfile under:

gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'

If you don’t want your Rails application to automatically load the asset pipeline feature, you can just type this when creating a new Rails app:

$ rails new appname --skip-sprockets

Read more here: http://guides.rubyonrails.org/asset_pipeline.html


PageSpeed Insights

Enter your website URL here to check how fast your site loads on both mobile and desktop. Google will recommend what improvements you should make as well as let you know what you are doing right.
pageinsights google

Advertisements

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s