Friday, March 23, 2012

BootStrap Take-2

So after playing around with bootstrap for the past week, I've come to the conclusion that it's pretty smart.  I mentioned last week a potential problem regarding the arrangement of divs of varying heights.  Well, it was a non-problem, I just threw the divs in question into another div and gave that div a span6 class (which makes that div dynamic).  I also gave a row three span6 divs (the sum of spans in a row should not exceed 12), and it handled them nicely, aligning two on the same row, and throwing the third to the next row, left justified.  The biggest challenge in this project is that the senior development team overwrote the auto-sizing/dynamic placements with media queries so that the navbar and infobar (the two strange looking bars) would span the entire width of the page.  This means that I have to handle my own margins, and that some of the custom-defined scaling parameters cause bad/awkward placements at some browser widths.  I've been trying to deal with these oddities on a case-by-case basis, but I've ended up writing a long series of media queries for very small,specific ranges of width.  Not very dynamic at all.  I think the solution in this case is to ditch the screen-spanning nav and info bars (plus the overridden CSS), and maybe use a hero-unit (one of BootStrap's features) instead. 

"A difference that makes no difference is no difference".
At the last meeting, I had a discussion about using rows vs fluid rows (class="row-fluid") .  It was advised that I use fluid rows, but from what I've seen so far, the difference is negligible.   This might stem from the fact that some of the CSS was overridden. It may end up being of some significance down the line, but I'll deal with it when I get there.  In the mean time, I can't complain about the performance of standard rows.

LESS is GREAT!
Last entry, I griped about how it had to be compiled, but honestly, it isn't that bad.  But after getting to play around with it, I found that "LESS-ifying" my CSS files was a simple matter.

<link rel="stylesheet/less" type="text/css" href="your-theme.less">
<script src="less-1.3.0.min.js" type="text/javascript"></script>

The above snippet is all that's needed to "compile on the fly".  Essentially there's a .js file that compiles the .less file on demand.  Pretty nifty.  My biggest fear was having to compile a LESS file every time I made changes, but this approach is just wonderful :).  For performance, once the LESS file is perfected, it can be compiled to a straight CSS file for faster page loads.
 
Here's the link to the .js file: http://lesscss.googlecode.com/files/less-1.3.0.min.js

No comments:

Post a Comment