bootstrap

Creating Rows with ExpressionEngine and a Grid

Below is an image from my digital library that I developed to help me organize my research for an upcoming book. It uses a responsive grid, and I’ll show you how to create it using Bootstrap and methods available within ExpressionEngine (no modulo!).

image

Let’s take a look at how Bootstrap implements their grid (knowing other grid systems are similar), and in particular, a 4-column grid.

<div class="row"> <div class="span3"></div> <div class="span3"></div> <div class="span3"></div> <div class="span3"></div> </div>

The only complexity within ExpressionEngine you face is that you have repeating elements for the “span3” class, but the rows also need to repeat as the page continues! The switch statement comes to the rescue in a somewhat unexpected way.

<div class="row"> {exp:channel:entries channel="books" orderby="title" sort="asc" dynamic="no"} <div class="span3"></div> <div class="span3"></div> <div class="span3"></div> <div class="span3"></div> {switch='|||</div><div class="row">'} {/exp:channel:entries} </div>

Why is this a little tricky? Well, even though the entire EE channel loop appears to be wrapped by a row element, it’s not. The closing (and opening) of the first, and all subsequent rows, is handled in the switch statement. The last and final closing “</div>” is actually closing a row that came from the switch statement.

If you are used to hardcoding this type of stuff in PHP, your mind may instantly jump to using some type of modulo plugin to do this, but fortunately you can scratch that complexity right out. Here is what my entire page looks like, using Assets for the image.

{embed="partials/_head"} <h2>Books</h2> <div class="row"> {exp:channel:entries

channel="books" orderby="title" sort="asc" dynamic="no"

disable="custom_fields | member_data | pagination | trackbacks"}

{if no_results} <div class="span12"><p>No entries yet.</p></div> {/if} <div class="span3"> {research_cover} <a href="{path='book/entry/{url_title}'}"><img class="img-polaroid img-rounded" src="{url:tall}" alt="{alt_text}"/></a> {/research_cover} <h5><a href="{path='book/entry/{url_title}'}">{title}</a></h5> <p class="center"><small>{if book_bought}✓ you own this{/if}</small></p> </div> {switch='|||</div><div class="row">'} {/exp:channel:entries} </div> {embed="partials/_foot"}

Git Video - Supplementing Github Commits with Video!

Ever come back to a project and completely forget how all the pieces fit together? Supplement your commits with Git Video.

image

That half-sentence you throw into the commit message usually does no help when you have walked away from a project for more than a day. Projects take major evolutions— architecture, ideologies, and approaches to problems are constantly changing, and documenting them becomes hard. A short video connected to each commit on Github is perfect, and lets you use gestures, inflection, and visuals to help you remember what state the project is in at that point in time.

image

Doing this once a day will help you battle that incessant, twenty-minute, “back into the groove” you usually have to entertain when switching between projects. It was created in a night on Rails, uses Github’s API, designed with Bootstrap, launched on Heroku, monitored with New Relic, and relies on Nimbb for the video embedding. Special thanks to the team over at Nimbb for sponsoring this project with some free video space. A company willing to go out of the way for independent developers deserves a look— so check them out.