A Twitter Bootstrap Alternative

When launching a new project we have to decide which framework to use if any. As of now, the go to framework is Twitter’s Bootstrap. It’s quick to learn, provides an immense amount cookie-cutter markup that allows fast development & flight at the speed of light. There is a drawback, however, in that every Bootstrap-based project fundamentally looks the same. Theme modification is just not done often enough. At first this was totally okay but now the uniformity is becoming more noticeable. Time for a change.

How about pick a different UI Framework, then, if you don’t want to customize the look and feel of Bootstrap?

Introducing 99Lime

Looks slick, full-featured, and great documentation. 99Lime


I also came across two layout frameworks that look intriguing…

Foundation by Zurb

JavaScript, CoffeeScript, and Closures

I’ve really liked CoffeeScript because it mimics behaviors and syntax I’m used to in Ruby; thus the speed of development for me is skyrocketing as the context switch between Ruby & JS has been minimized. But when I first started mucking around with it a few weeks ago I hit some oddities that I wanted to share with other developers since I’ve seen the question asked a few times.

CoffeeScript can, if this feature is enabled, wrap your .coffee code inside of an anonymous function that acts as a closure. Rails 3.1 enables this by default. I am also using jQuery, so the $ -> is merely the wrapper that provides the jQuery namespace context.


$ ->
  show_dialog = (title,msg) ->
    dialog = $('#dialog')
  $('#about_us').click ->
    show_dialog('About Us', 'Pinning is fun!')



(function() {
  $(function() {
    show_dialog = function(title, msg) {
      dialog = $('#general_modal');
      return dialog.modal('show');
    return $('#about_d').click(function() {
      return show_dialog('About Us', 'Pinning is fun!');

Uh oh. This creates a problem: if you want your view to call one of the functions you have defined in a CoffeeScript file you’re SOL unless you make those functions globally available (I don’t encourage cluttering the global namespace). Causing further headache, when you realize your functions are not being called and try to debug things you find yourself looking at reference/undefined method errors. Solution: throw your functions (JS or CS) in a namespace and have globally accessibly, albeit scoped appropriately, JavaScript. And, for added benefit, have a cleaner code base :)

(Displaying actual code to give you more context of how I use this solution)


window.Pinned ||= {}
$ ->
  Pinned.handle_invite_request = (json) ->
    if json.status == 'success'
      $('#invite_success').html("We'll e-mail <b>"+json.email+"</b> when we're ready!").fadeIn('fast')
  Pinned.request_invite = () ->
    $.get("/welcome/request_invite",{'email':$('#invite_email').val()}, Pinned.handle_invite_request, "json")
  genModal = $('#general_modal')
  Pinned.show_dialog = (title,msg) ->
  $('#about_d').click -> 
    Pinned.show_dialog('GetPinned',"We believe there is a better way to encourage sharing, collaboration, and love for all things artsy and digital. Our passion is to help you share your passion.")



(function() {
  window.Pinned || (window.Pinned = {});
  $(function() {
    var genModal;
    Pinned.handle_invite_request = function(json) {
      if (json.status === 'success') {
        $('#invite_success').html("We'll e-mail <b>" + json.email + "</b> when we're ready!").fadeIn('fast');
        return $('#invite_request').slideUp('fast');
      } else {
        return $('#invite_error').html(json.message).show();
    Pinned.request_invite = function() {
      return $.get("/welcome/request_invite", {
        'email': $('#invite_email').val()
      }, Pinned.handle_invite_request, "json");
    genModal = $('#general_modal');
    Pinned.show_dialog = function(title, msg) {
      return genModal.modal('show');
    return $('#about_d').click(function() {
      return Pinned.show_dialog('GetPinned', "We believe there is a better way to encourage sharing, collaboration, and love for all things artsy and digital. Our passion is to help you share your passion.");

You can now reference your functions that have been defined anywhere in your code!