Raccoon Grid

A simple, fully responsive 16 column grid with a few extra nice features but no clutter.

Download: Raccoon Grid

See it live: Try it out (opens in new tab)

Fun fact: I built this sweet portfolio site using my Raccoon Grid.

Description: When helping students find a way to display their completed UX Design course projects online, we found tha the plethora of online portfolio building sites couldn't give them the simplicity and customization that they needed. I felt that teaching them HTML and CSS would be a great advantage to them while they were competing against hundreds of recent UX Design graduates, however, it was not a substantial part of the immersive course.

I spent some time creating an HTML, CSS and jQuery portfolio template from scratch for them to use as an alternative to the stress that they were going through trying desperately to give their incredible work credit by displying it in a way to show off the content rather than the branding or interactions that were heavily present in the common online templates. After completing the Raccoon Grid, I presented to to the class in a special workshop series that General Assembly graciously allowed as an extention to the curiculum.

Raccoon Grid - 16 column responsive portfolio template.

Presenting the Raccoon Grid to 24 students as co-instructor in General Assembly's UX Design Immersive 10 week course.

During the presentation, I walked the students through the basics of HTML and CSS coding while allowing them to use the Raccoon Grid as a platform to customize their portfolio. I believe that it solved a lot of problems for most of the students as it not only allowed them to have an advantage over other job seekers by being able to code but also allowed them to customize their portfolios to show off their individual work.

UX Theory

HTML and CSS

12 column, responsive grid.

The Raccoon Grid comes with a few different section layouts so that the students could have options of choosing an image gallery or static image while arranging paragraphs of text to support their work. The layouts are simple and the code is straighforward and easy to grasp. In less than a week students were customizing the page layouts to include Parallax scrolling, jQuery easing, full-screen images and other design elements.

The Raccoon Grid was well received and solved a much needed challenge that allowed students to get an advantage over others in the job seeking space while feeling in control of how they represented their work.

Download: Raccoon Grid

See it live: Try it out