gumby

Remove indentation for Gumby Fancy Tiles

A great feature of the Gumby Framework is its ability to easilycreate responsive tiles. They call those Fancy Tiles. For example you can use the following mixin to create a equally distributed grid with 5 columns on a desktop, 3 on a tablet and 2 on a mobile screen.

ul.fancy { 
  @include fancytiles (5,3,2);
}

What kept bugging me with that is that each tile gets a padding on both its left and the right side. This makes the entire Fancy Tiles show up indented compared to the columns of Gumby's regular grid system.

Customizing the Drupal Search Form to make use of Gumby's UI Kit

Yesterday I had a hard time modifying the output of the Search Form of Drupal 7. I needed to modify its HTML, adding wrappers, changing the input to a <button> tag, adding classes and additional markup to insert a font based icon into the button. I'm using the awesome Gumbyframework and took code from travisc's sandbox project, which itself seems to be heavily based on the Bootstrap theme for Drupal.

However, I like to start my themes from scratch with minimal overhead, so here's the stuff I extracted from above mentioned projects and changed a bit to make it work with my current setup (using Gumby 2.6.3).

Everything is inside the template.php of my theme (MYTHEME), so change that to your theme name.

This will change the search block form as well as the search form on the search page itself. If you only want it to affect one of those just change the implementation of hook_form_alter() accordingly.