gistfile1.txt

FAQ for CSS Framework (http://gist.github.com/113972)

1. How are you using the "classes" var in JavaScript template?

Often, you need to make some manipulations with DOM objects. We almost don't use ids (#blabla) by our Law, only if this is really necessary for improving performance (if this is bottle-neck). But mostly, we use classes. I suggest to avoid using inline classes (because refactoring here is very often, and we often need to change name of classes), but use classes variable instead. E.g. use:
 
var classes = { some_class: 'b-something_some-class' };

    $('.' + classes.some_class).hide();
 
instead of
 
    $('.b-something_some-class').hide();
 
This way, if we change name of class, we won't need to look for every entry of this class in the code, but just need to change its value in 'classes' variable.


2. What does this syntax "$.fn.b_something" mean/do? Why use it?

We add functions ('b_something()' in this example) to jQuery.fn namespace by such way. Then, we can apply this function to jQuery object, e.g.:
 
    $('.b-something').b_something();


3. What does the function that you've assigned to it do? Can you explain line by line?

    // Contens of this passed anonymous function will be executed after loading
    // the page. In the anonymous function, we can use $ instead of jQuery.
    // Note semicolumn before jQuery - it guards us from any unclosed previous JS block.
    ;jQuery(function($) {
      // Apply $.fn.b_something() to $('b-something') jQuery object.
      $('.b-something').b_something();
    });
 
    // Start anonymous function. This function will be executed immediatly
    // after declaration, and we pass jQuery object to it as $. We use the function
    // for making all its contents private.
    (function($) {
 
      // classes object I mentioned above...
      var classes = {
        some_class: 'b-something_some-class'
        // Other classes
      };
 
      // Add b_something() function to jQuery.fn namespace (jQuery.fn functions can be applied to jQuery objects).
      $.fn.b_something = function(options) {
        // Add/override default options by user-defined options. In Ruby, this string could be looked like:
        // opts = $.fn.b_something.defaults.merge(options)
        var opts = $.extend({}, $.fn.b_something.defaults, options);
 
        // 'this' is equal to $('b-something') here. If there are 2 DOM elements with class 'b-something', 'this'
        // will contain two DOM elements in $('b-something') object. So, we need to iterate over every DOM element:
        return this.each(function() {
          // 'this' is equal to DOM element with class 'b-something' here. But this is more convenient to work with
          // jQuery objects, so create jQuery object with only one DOM element with 'b-something' class.
          var self = $(this);
          // Code of the JS logic
        });
      };
 
      // Default options that will be passed to b_something function.
      $.fn.b_something.defaults = {
        // Defaults
      };
 
    // Execute described function immediatly after declaration and pass jQuery object to it.
    })(jQuery);