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

Twitter Bootstrap & Dynamic CSS

BootStrap
This past week I took a look at BootStrap, Twitter's New(ish) RUI Framework.  Overall, I'm fairly satisfied with what I see.  Bootstraps similar enough to other RUI frameworks (like Skeleton, SimpleGrid, etc.) that it's easy to get into if you have prior experience, but offers a bunny-hill of a learning curve even if you haven't.  Being grid-based, it offers the usual flexibility of defining dimensions based on columns (the responsive grid offers 12 columns in a 960-pixel page), or fractions (one-third, one-fourth, etc).  It also offers basic alignment and in-lining class definitions, but nothing really special. 

 Aesthetically, BootStrap's default theme is very clean, with a color pallete of white, soft-greys, and bright blue accents.  This makes it great for quick mockups that still look professional.  Of course, these can all be overridden, and when combined with BootStrap's compliment of well-drawn icons, makes for a nice "grab-n-go" package.

Where BootStrap really comes into it's own is in it's Responsive package.  The elements scale very nicely, down to a certain point before jumping into a mobile-friendly, wikipedia-style format.  I also appreciate how navigation links collapse into a drop-down menu for easy access that doesn't take up a lot of screen space. 

The PM linked our group a nice little tutorial:
http://webdesign.tutsplus.com/series/twitter-bootstrap-101/

With respect to the Kukuicup site, it seems like moving to BootStrap would be fairly straight forward.  (Note I didn't say easy)  I'm thinking that the "widgets" can be migrated into the gird fairly easily.  The only obstacle I can foresee is that the widgets are different heights, and BootStrap probably wants divs to be the same height.  This might cause issues where the left side of a page is one long widget, but the right side has two shorter ones.  This might be overcome by using negative spacing to "stack" the two shorter divs on top of each-other.


LESS (and it's peers, SASS & CoffeScript)
The PM also raised concerns over the high-levels of repetition within the Kukuicup CSS files, and suggested LESS as a solution.  LESS is a Dynamic CSS language that lets you create methods and variables for CSS files.  For example, one could define a variable

@primarycolor: #FFF; 

and reference primarycolor anywhere in the CSS.  Additionally, LESS allows users to apply classes to other classes by adding the .class notation into another class definition.  For example, I define .shadow to have a drop shadow, I can add that shadow effect to a .box class by

.box {
      .shadow
}

Finally, LESS supports paramaterized methods, for example, letting you dump

     //radius defaults to 5px
.rounded-corners (@radius: 5px) {
      border-radius: @radius; 
}

#header {
      .rounded-corners(10px);
}

The downside to all this is that it requires compiling.  In a world where scripting languages run the web, this seems a bit odd.