Starting up SASS

SASS is a Ruby gem

I am using Windows 10 to play with SASS:

1. Install SASS from your Terminal:
$ gem install sass

2. Create a SASS file:
$ touch style.css.scss

3. Run this to compile your SASS into CSS file:
$ sass input.scss output.css

4. Watch changes to this file’s directory (optional):
$ sass –watch app/sass:public/stylesheets

5. Watch changes to the stylesheet files:
$ sass –watch input.scss:output.css

This is really great to keep running in a separate terminal so that your stylesheet.css file gets updated with your .scss changes automatically.

Some helpful links:
@mixins: http://www.sitepoint.com/sass-mixins-kickstart-project/

@media queries: http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32

Main site: http://sass-lang.com/

Advertisements

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

Integrating Bootstrap with Rails 4

Today’s project was incorporating Bootstrap into my Rails application.

To start, I redid this basic Ruby on Rails tutorial on Tech Talent South’s website. To make it more personal, I decided to make a list of movies instead of a list of random members. I followed this guide by Koren Leslie Cohen on how to change column names in a database. It’s a great, simple guide, but I found that when I changed  the :name and :age into :title and :release, respectively, they didn’t change across all my views so I still had to go in manually and change them, which to me, beats the purpose of using the rails g migration command. Not sure if there is a better way to do it, as I am still new to Rails, but will keep searching.

To incorporate Bootstrap, I downloaded Bootstrap and followed along with the Readme file included in the download package.

This is what I added to my Gemfile:

gem 'sprockets-rails', '>=3.0.0.beta1'
gem 'sass-rails', '>=5.0.3'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'autoprefixer-rails'
gem 'bootstrap-sass', '~> 3.3.1'

In the guide, they recommended to add these two gems for SASS:
gem ‘bootstrap-sass’, ‘~> 3.3.4’
gem ‘sass-rails’, ‘>= 3.2’

But I kept getting errors when running ‘bundle install’ so I’m thinking these two gems are outdated. Could be because I had downloaded Bootstrap a couple months ago and my version of Bootstrap is older. So I had to go in and manually change the versions. This is where I found the latest version number for sass-rails.

If you come across the following error:

Bundler could not find compatible versions for gem "sprockets-rails"

Then you can go here to double check and see if your version of ‘sprockets-rails’ is compatible with your version of Ruby and Rails.

This is a great step-by-step guide on how to integrate Bootstrap 3.3 with Rails 4.2. After step 7, you can pick and choose what code you want to integrate into your site. Also refer to the CSS page on the Bootstrap home.

This is my final product: https://tts-sunsplat.c9.io/members (still a work in progress!)

Need to:
1. Add errors if no text in form fields.
2. Add movie descriptions to the ‘view’ page. (Maybe API?)
3. Add color.
4. Add images.