The Grid

As the semester draws to an end, so too does this project.  PM gave us notice that this would be the last week we work on our sites.  I'm a little sad to see it be over, there have been some really neat ideas, awesome designs, and creative solutions.  It was fun to see what everyone else was doing from week to week.  Plus, have multiple people working on the same problem made the project a whole lot less stressful.  It took away a lot of the burden and mediocrity of what otherwise would have been a belly flop into a sea of endless divs . 

My goals for the last week were to finish cleaning up the site (the energy, prizes, & activities pages).  I also wanted to integrate Elton's Epic Grid.  I'll simply point to Elton's blog, and leave it up to the reader to educate themselves.  Elton's Grid is pretty slick.  At the last meeting, Elton pulls out his phone, brings up his Grid, and the group is wowed.  He pulled it off.  He made a hulking 9X12 interactive grid fit on a mobile screen. 

So of course I had to beat him... of course.  But the fact is, I can't.  Elton did a bang up job, the only small thing I could add was to fix a small issue where the title boxes for each row overflowed.  I did so by rotating the titles sideways, and elongating the divs.  The result is that the gird fits nicely on a 290px wide screen, which is just about any phone screen in portrait mode. 

Desktop View

Mobile view

Back to Square One

So after a pair of meetings on Friday, the PM lays out the following requirements for the Homepage:
1.  It should be in a list (and wrap freely)
2.  Elements should always be centered.
3.  By default, 3 elements per row.
4.  Flexible enough for 6-8 elements.
5.  It should be responsive.

The list seems simple enough, but in reality, items 1 and 5 are contradictory.

The original homepage had two rows of three elements (there were only 6 elements at the time), which were responsive, but overflowed their rows.  The result was that each row of three elements rendered as two elements pushed to the left, and one lone element wrapped on the next line.

My fix for this was to throw all the elements in a list, so that they wrapped freely, maximizing the number of elements in a row.  But this caused difficulties in centering elements.

The (lame) solution was to simply fix the over-flow problem, and have two rows of responsive elements.  However this looks strange on a very wide monitor, as you have three super long elements in each row.

The ultimate solution would probably to use jQuery or MVC-templating to dynamically determine how many elements to put in each row based on the screen size, and handle margins accordingly.  However, I felt like the PM might view this as "hackish" or too time-consuming, and so avoided it.

The Latest Build

Mobile view

Anyway, back to the meeting.  The PM tells us to ignore the larger screens for the moment, and try to get something that works well at a width of 1050px (his laptop resolution) and lower.  My latest bid goes back to square one: fixing the responsive rows to keep them from overflowing.  I did however integrate the multi-column mobile view from last week. 


A cool trick that I picked up this week was the use CSS selectors

:nth-child({ number expression | odd | even })
and

:nth-of-type({ number expression | odd | even })

I'll direct you here for a more detailed explanation and some nice samples:
http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

But essentially they let you (in CSS) select elements of a parent using values and expressions.  Notably, they let you select every other, every third, or every nth element.  In my case, I used them to select the seventh element and give it a margin-left: 20%.  This essentially centers the last row of elements.  Neat right?

Link to the file in question:
http://kukuicup-rui.googlecode.com/svn/trunk/Bloggable/4-17-2012/home.html

and the CSS file:
http://kukuicup-rui.googlecode.com/svn/trunk/Bloggable/4-17-2012/css/home.css

Sometimes the Best kind of Responsiveness is no Responsiveness

After playing around with the HTML, and exploring Twitter Bootstrap's CSS, I've finally found the difference between class="row-fluid" and class="row".  Both containers scale with the page size, but row-fluid will also scale the components within that fluid row.  A plain row will keep the items a static size, and wrap them when there's not enough room.  After this week, I can appreciate having both options. 
  When doing my news page, I had the choice of either letting my elements flow and wrap as the page re-sized by using rows or making them stay put simply scale using row-fluid.  I would have opted for the standard row, but there's still a little bit of glitchyness caused by the overrides to the Bootstrap codebase made by senior developers.  So I ended up going with the fluid rows to keep things from hopping around excessively.



  Speaking of trouble with jumping elements, I had an issue in my homepage.  The homepage normally features several large icons-links with accompanying text.  Originally these icons were centered above the text, but I felt that this took up too much room, and so pushed the images inline with the text, and pushed them over a static number of pixels. 






This caused chaos when the divs were re-sized, images and text boxes went flying ever which way.  To rectify this, I had to make sure that the divs stayed a static width.  This effectively meant I couldn't use Bootstrap's built in responsiveness (but that didn't prevent me from trying for several hours).  Anyway, after a hard-fought but pointless battle, I realized I had a simmiliar issue weeks before.  The news page features a widget called "Lounge Members" which is made up of a div containing imagelinks that don't scale, and arrange themselves to fit within a scaling div.  Bingo.  After looking through the source, it turned out that the widget was an unordered-list (<ul>), with each imagelink being a list item (<li>).  To fix my homepage, I did the following:

<div class="dynamicallyResizingDiv">
    <ul>
          <li>
              <imageicon goes here>
          </li>

         <li>
              <imageicon goes here>
         </li>
        ....
   </ul>
</div>

 Of course I messed around with the margins on the li elements to make things look pretty.  And now that's sorted.


links:
news page: http://kukuicup-rui.googlecode.com/svn/trunk/Bloggable/news.html
home page: http://kukuicup-rui.googlecode.com/svn/trunk/Bloggable/home.html