The post in which I discover Bootstrap

So, now I have this little website but it’s pretty barebones and ugly and now I’m just super excited when the instructor tells me that it’s time to improve the look and feel.  Apparently we’re going to do that with a little Gem called Bootstrap that was started by two guys from Twitter and has changed the way people style websites forever. I’ve already heard from a few people that it’s a good way to make a website that “looks like every other site” but as long as it’s a starting place, I’m happy.  Plus, this course taught me how to use the bootstrap sass gem to make some extra scss modifications to make my site look a little bit different.

To add bootstrap-sass I just needed to add this into my Gemfile (in the project root folder).

  gem 'bootstrap-sass', '~> 2.2.2.0'

After you add that to the gemfile, you have to tell the project to install that particular gem by running this in Terminal:

$ bundle install

After that, you have to restart your server otherwise the new bundled gems won’t work.  You can quit out of it and then enter ‘rails server’ in Terminal to do that.

Now, I have the bootstrap bundle installed but I’m not actually using it in my project.  To start using it I have to go into my app/assets/stylesheets/styles.css.scss file and add the following lines:

@import 'bootstrap';
@import 'bootstrap-responsive';

Next in app/assets/javascripts/application.js I need to actually make sure to require bootstrap.  I add the bolded line in the location below:

.
.
.
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

Then, we started styling. Most of this was all done by looking at code snippets on the Bootstrap website.  The first thing we did was put some of the content on the front page into a container so that it separates it from the rest of the site and looks good.  This was done by going into app/views/layouts/application.html.erb and adding <div class=”container”> around my <%= yield %> section.  Like so:

.
<div class="container">
    <%= yield %>
    <%= render 'layouts/footer' %>
</div>
.
Next I added a navbar in the app/views/layouts/_header.html.erb file:
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
             <a class="brand" href="/">OMRails</a>

                <div class="nav-collapse">
                    <ul class="nav">
                        <li>
                            <%= link_to 'Home',  root_path %>
                        </li>
                        <li>    
                            <%= link_to 'About',  about_path %>
                        </li>
                    </ul>
                    <ul class="nav pull-right">
                                <li><%= link_to 'Login',  '#' %></li>
                    </ul>
                </div>
        </div>
    </div>
</div>

Next we added some colors to app/assets/stylesheets/styles.css.scss like making the footer text gray, changing the navbar background, and removing the shadow below the navbar:

$navbarBackgroundHighlight: white;
$navbarBackground: white;
$btnPrimaryBackground: purple;

@import 'bootstrap';
body{
    padding-top: 60px;
}

@import 'bootstrap-responsive';

.navbar-inner{
    @include box-shadow(none !important);
    border: 0;
}

.footer{
    margin-top: 50px;
    color: $grayLight;
    a{
        color: $gray;
    }
}

Lastly, we added one of those fancy “Hero Units” that just about every website on the internet has nowadays.  All I had to do was wrap my home page text in:

<div class="center hero-unit"> INSERT HOME PAGE TEXT HERE
</div>

Finally, I saved and uploaded to Git and Heroku.  Voila!

git add .
git commit -am 'Add Bootstrap'
git push
git push heroku master
 This was a lot of fun because it started to give me the building blocks I need with Bootstrap to build neat things.  It looks like Bootstrap is pretty capable and should be a fun way to learn by trial and error which is exactly what I need in order to teach myself. 🙂

 

 

 

Creating Pages in Rails

The starter site that I created and uploaded is just a default root page with no additional pages. It’s not much of a website yet. ^_^  The next class in One Month Rails had me creating pages and learning how to set one as root.  It also created a navigation bar that allowed me to go from one page to another.  It was a little difficult to understand at first because I’m used to just clicking “new post” on some various GUI to get new pages to appear.  But it made sense after a little bit of noodling. 🙂

How to set up the first page:

$ rails generate controller Pages home  # Create a Pages controller with a home action
$ rm public/index.html # public/index.html will automatically override any root route set

It was still important to set up that new Home page that I created above to make it the root page when my site is first loaded.  This is done in the /config/routes.rb file by adding the following:

root :to => 'pages#home'

I also added another page there by doing:

get 'about' => 'pages#about'

However, that won’t really work because there isn’t an about page actually created yet.  Creating the page was as easy as making a new file, about.html.erb in app/views/pages.  

Both pages have to also be in the controller, otherwise they won’t be controlled, I guess.

class PagesController < ApplicationController
  def home
  end

  def about
  end
end

 I also learned about the applications.html.erb file which apparently is called by every page on the site and comes along with every Rails project.  The only thing that actually changes what content is shown on each page is the <%= yield %> section.  Originally, I edited this file to put the HTML content for my header and footer, but then the course had me create two separate files for these under app/views/layouts called _header.html.erb and _footer.html.erb.  Then, instead of actually typing out all their contents in the applications.html.erb file, I used ‘render’ to pull these things in above (for the header) and below (for the footer) the <%= yield %> section.  Here’s the code for how to render contents from another file in the project:

<%= render 'layouts/footer' %>
<%= render 'layouts/header' %>

Linking to another page:

Here is the syntax:

<%= link_to "Home", root_path %>
<%= link_to "About", about_path %>

So that was it for my page!  I also ended up with pushing it up to Git and Heroku so I could see it live in the world.

Git & Heroku set up

The One Month Rails project starts me out by installing Ruby & Rails, starting a new local project by adding a new project in Rails, getting it in version control with Git (including setting up my account, my repo and my SSH keys for deployment) and then pushing my local project up to Heroku.

It took about an hour of time to get the project created and pushed, but it’s pretty awesome to see the project live on Heroku with its own URL that anyone can access.  Of course, it’s just a default Ruby on Rails project right now with very little changed except for the README file, but it feels like a pretty big step.

There’s a couple of commands I wanted to save here so that I have them for the future.

$ rails new omrails  # Create a new Rails application in the folder omrails
$ rails server  # Run a local server (defaults to localhost:3000)
$ git init          # Set up Git on your project
$ git status    # See tracked, untracked, and staged files
$ git add .     # Add new files to Git
$ git commit -am "Initial commit"   # Save your project files to Git
$ git remote add origin git@github.com/yourusername/omrails.git     # Set up git to push to your Github repository
$ git push -u origin master    # Push your code to Github (sets the upstream the first time)
$ git push              # Push your code to Github
$ ssh -T git@github.com             # Attempt to ssh to Github
$ mv README.rdoc README.md          # Rename the file README.rdoc to README.md
$ heroku create         # Set up an application on Heroku
$ git push heroku master     # Push your code to Heroku
$ sublime .          # Open the current directory in Sublime Text

Chronicling my coding adventures

I’ve been dabbling in trying to learn how to program off and on for a few months now, and I know that starting a site and keeping track of my progress to share with my others will be a motivator for me.  Here’s to a new beginning!

My experience with programming:

I’ve been doing editing of HTML and CSS with WordPress sites (and even earlier with Geocities and Tripod) for many years.  I’m fairly good at editing existing code but not great at authoring new things.  I created my first website at 14, which was an anti-horse slaughter website.  From there, I’ve made blogs and various sites and mostly Googled my way around anything code-related, but have never been someone who “knows how to code”.  In 2007 I landed my first job in the video game industry as a Community Manager for a startup that allowed anyone to build their own virtual world or game.  I taught myself a little bit of scripting by trial and error along with using code snippets from our developer wiki.  The script was based on Lua and was the first time I’d done anything aside from editing web code.  Since then, I’ve been dabbling in HTML editing off and on in various jobs and I’ve gone through some of the JavaScript and Python courses on Codecademy, but I need more.  I’m not able to quit my job and move to another city for 8-12 weeks to do a programming bootcamp, so I’m going to learn via various online means.

Getting started:

Tonight I signed up for a Skillshare class called Teach Yourself to Code: One Month Rails that sounds really interesting.  I like that it’s project oriented and that the very first project involves me getting the terminal all set up and downloading and installing Ruby and Sublime Text.  This already makes this feel more practical than learning syntax at Codecademy.  I’m excited to see where this takes me, and hope to get as far as I can with this course this weekend.