Full-width panels in Foundation

Image

When I first started with Foundation, one of the things I had to figure out was how to create, or colour, a full width panel as shown in the image above. Rows, by default, are only 1000px wide, so how do I make the background colour go the entire width of the screen. There is a very simple solution to this.

The trick is to enclose your row in a div and apply the background image or background colour to that div instead of the row. Here is the HTML:

And here is the CSS:

Learning to Hack – Part 5: After 1 Month at Bitmaker Labs

Kerry Mui is a new graduate from the March cohort of the Web Development Immersive program. This article was originally posted on his blog. It is Part Five of his ongoing series documenting the Bitmaker Labs experience.

It was my birthday this past week.

With that, I spent time reflecting. This week’s post is about programming, and some personal reflections. We’ll get back to our regular material next week. Here’s what I learned.

Knowledge = Read + Apply + Learn

This week, many new concepts were layered onto our previous Rails imgur application. We built a simplified Amazon website and learned these new features (among others):

  • create a user account using a login page
  • authenticate & authorize a user with a password
  • validate user behavior by providing feedback with error notices

I experienced a steep ramp-up and realized the order that I consume new material significantly impacts my ability to learn.

Last week I followed my preferred method of learning: read concepts before class, apply them to a silo exercise and learn the material. This week, I jumbled the order because I didn’t think re-reading the technical documents was necessary. Big mistake.

Reading fills the gap between learning and applying. Technical documents can’t be read like a language where you skim and use context to fill in the knowledge gaps. That’s why re-reading is so important. Your increased knowledge base lets you read and understand the parts that were previously skimmed. Continue Reading →

Intro to Foundation 5 and Rails

One of the fastest ways to add some style and to streamline your CSS is to use one of the many CSS frameworks. This article will look at what you need to know to add Foundation 5 to a Ruby on Rails application.

Foundation 5

Why use Foundation 5

Foundation is my favourite CSS framework. There are several reasons for this:

  • Foundation 5 doesn’t try to replace everything, instead it creates a foundation on which you can build everything else
  • It works amazingly well with Rails (Zurb, the makers of Foundation, is a Rails shop).
  • There is a very nice gem that installs everything for you
  • Foundation is built on top of SASS, so it works with Rails and its asset pipeline
  • The Foundation team has gone to insane lengths to make Foundation incredibly extensible and customizable.
  • It is very newbie friendly, unlike other frameworks, you don’t need to be a CSS master to work with it

Installation

Whether you have an existing Rails application or a new one, Foundation is incredibly easy to install and get started with. To start with, installing Foundation is as easy as installing a gem. The only thing you really need to remember is that the installation process will overwrite your application.html.erb file.

1. Gemfile

Like any gem, to install Foundation, the first thing to do is to add it to your Gemfile.

gem 'foundation-rails'

Then run bundle install and restart your Rails server.

2. Installing Foundation 5

The next step is to run the Foundation generator to install the needed files and setup your application.html.erb file. Remember to copy everything between the body tags in the file to someplace safe. This setup is going to overwrite everything in the file. Once you have copied the content from the template file (application.html.erb), run the following command to install Foundation.

rails generator foundation:install

4. Installation Complete

Your done. You now have everything you need to start laying out your site using Foundation.

Grid System

At the heart of Foundation is a grid system composed of rows and columns. Rows delineate a horizontal section of your page while columns let you split the row up vertically. Foundation defaults to a 12 column grid. This means that each row must contain 12 columns. If you have less, Foundation starts to do odd things.

Foundation 5 Grid Sample

As you can see from the example above, it is really easy to create a multi-column layout for your site. In addition, rows and columns are infinitely compose-able. If you have a column that you would like to split into two rows with a few columns in each row, you can nest rows inside of columns.

Resources

Here are some resources to further help you get up to speed with Foundation.

Think Thursday with Chris Carder at Bitmaker Labs

Kerry Mui is a student participating in the March cohort of the Web Development program. This article was originally posted on his blog.

I had the pleasure of listening to Chris Carder speak on Thursday evening at Bitmaker Labs. He’s a co-founder of Kinetic Café, along with David Dougherty, former Principal of Innovation at Trapeze, and Gary Fung, founder of PING!

Kinetic Café is a Design and Technology Lab that helps Presidents, Founders and Founding Families tackle the biggest opportunities and challenges facing their business. Previously, Chris was the Co-Founder and President of ThinData, Canada’s largest email marketing firm, which sold to Transcontinental Inc. in 2008.

I’ll speak more about the lessons I learned, rather than exact details. That way, it’s still suspenseful for when you have the opportunity to see him in person yourself.

Winning As A Team

A theme throughout the night was the importance of teamwork and choosing amazing partners. David and Gary, at Kinetic Café, fit the bill perfectly. Kinetic Café’s success thus far comes from a mutual trust amongst co-founders, and having each other’s backs. They love challenges. They love pushing boundaries. They love to win. Continue Reading →

Learning to Hack – Part 4: End of Week 3

Kerry Mui is a student participating in the March cohort of the Web Development Immersive program. This article was originally posted on his blog. It is Part Four of his ongoing series documenting the Bitmaker Labs experience.

This week, we built our first web application using Ruby on Rails. The application was a simpler version of imgur, and allowed for basic functionality with photos: view, upload, edit details, and delete. Here are the things I learned this week.

Layers of Complexity

I was speaking with a classmate and we were amazed at how far we’ve come along. Concepts from a few weeks ago are now applied abstractly. It’s exhilarating to realize how quickly your mind can learn a new concept, then use it properly in a wider context. It’s a testament to the course material structure, by layering concepts carefully, so that the weekly climb is smooth. For example:

  • first, we focused on functions individually: what is this function?
  • next, we studied each function, learned its rules, and practiced in exercises: how do I use this function?
  • now, each function plays an individual role in the bigger picture of a web application: what can I do with this function?

In addition, understanding individual functions’ frees me to learn the Rails structure more holistically. I’m a visual learner  and learn best by understanding how concepts work in relation to each other, how a function “flows” through code, resulting in a program. It’s similar to how I no longer stop and think about each word when writing  a sentence; I focus on whether a sentence provides function and flow, resulting in a paragraph. Continue Reading →

Announcing Canada’s first UX/UI Bootcamp in partnership with tailoredUX!

We’re happy to announce Canada’s first 12-week, bootcamp-style user experience (UX) and interface design course in partnership with tailoredUX, called User Experience & Interface Design. By partnering with a leading Toronto design firm, we are providing a career-focused education using learning strategies and techniques proven by our full-time Web Development offering.

With the first cohort of students starting on June 16, User Experience & Interface Design will be our second full-time course offering. “Toronto in particular needs UX/UI talent that has been trained in and understands the perspective of design from both development and business perspectives,” says tailoredUX founder and lead instructor Mustefa Jo’shen, “By offering that focus, our students will be able to join the growing workforce in roles that impact organizations from day one.”

User Experience & Interface Design has been built from the ground up to help passionate people gain the required workplace-ready skills to become a product designer with front-end web development knowledge. Like our signature Web Development course, this new course features an intensive bootcamp style of teaching.

Classes will be held Monday to Friday for 12 weeks, informing students with lectures and challenging them with hands-on assignments. Students will examine the fundamentals of user-centred design, including user research, information architecture, interaction design, UI design, and usability testing. By the end of the course students will be able to build and develop prototypes using Adobe Illustrator, HTML, CSS, basic JavaScript, and jQuery. Developed and taught by industry professionals from tailoredUX, the curriculum is in sync with the demands of the growing Toronto UX job market. Continue Reading →

Episode 2 of the Bit by Bit podcast – hosted by March 2014 Students

In this episode of Bit by Bit, the gang discusses the importance of networking, as well as their experience with Ruby and Rails to date. At the time of recording, our Bitmakers wrapped up Ruby and Rails, and were just starting the JavaScript portion of the course.

Sanborn talks about building his first web app, a tool for helping manage and track draft picks for his hockey pool, Taha reinforces following up with the contacts you meet while networking, and the whole team pitches in their two cents on the magic of Rails. The gang also shares many great tips on completing in-class assignments and building on the fundamentals that you learn throughout the course.

To hear more about what our Bitmakers have been up to, and what have to say about what’s been going on in and out the classroom, tune in below!

Community Partner Spotlight: Meaghan Bent, General Director & Co-founder of CoderDojoTo

Who:Meaghan Bent

What: General Director & Co-founder of CoderDojoTo and Lead Front-End Developer at Filemobile

Our community partner spotlight today falls on Meaghan Bent, General Director & Co-founder of CoderDojoTo. Meaghan graduated from Fanshawe College with a Multimedia Design and Production diploma, as well as a Computer Electronics diploma from Westervelt College in London, ON. Meaghan hails from rural Niagara and became serious about coding to facilitate the creation of a music community in her small town.

Bent got started in as a developer for Honeycomb Worldwide and then with Canoe.ca and maintains a freelance consultation role with The Variables Company. Since joining Filemobile – a Toronto SaaS start-up dealing with content acquisition and UGC – in late 2011, Meaghan has become the Lead Front-End Developer and is currently leading her team through a large-scale platform software re-architecture project. Continue Reading →

Learning to Hack – Part 3: Review of Week 2

Kerry Mui is a student participating in the March cohort of the Web Development Immersive program. This article was originally posted on his blog. It is Part Three of his ongoing series documenting the Bitmaker Labs experience.

This week we converted our command-line CRM into a locally hosted web app. The days are long, but the work and positive environment make it satisfying. Here are the things I learned this week.

1) Fear Of Failure

 Courage is only the accumulation of small steps.  -György Konrád 

A character trait I’ve improved upon since starting is managing my psychology. At times, it’s easy to become intimidated by my classmates, many whom are more experienced. They pick things up quickly.

It can be deflating when I spend hours de-bugging my program, only to see a classmate already done the assignment. There are days that I fear falling behind the pace of the program. This fear largely stems from an insecurity of not being good enough and, specifically, failing. Continue Reading →

Learning to Hack – Part 2: Review of Week 1

Kerry Mui is a student participating in the March cohort of the Web Development Immersive program. This article was originally posted on his blog. It is Part Two of his series documenting the Bitmaker Labs experience.

Wow, this week flew by.

I can say I’m fully immersed in a challenging, new world. Here are the things that I learned this week.

1) Always Be Producing

I was challenged mentally all week. The learning curve got steep quickly. We started with reviewing Ruby basics and ended by building a basic customer-relationship management (CRM) system. The only way to get better at any craft, be it athletics, design, writing, music, or programming: painful practice. You learn the pitfalls and build your muscle memory; whereas, learning by lectures or reading books just doesn’t cut it. Continue Reading →