Underappreciated frameworks part 1: Titon Toolkit

Many, many frameworks have been created since Bootstrap took off. It may not have been the first, but it sure made people start thinking about them.

People made them for the experience, for the fun of it, and to solve very specific needs. They made them for clients, for themselves; alone, and in teams. Some were sub-par, some were only usable in specific cases, and others were brilliant.

But very few got any serious recognition from the community. Eventually, you’d see a new framework or five every other week in some roundup post on the design blogs, and most would just pass them by.

I mean, sure, they had some cool ideas. Most designers and design teams, however, had already invested serious resources in adopting or creating one of their own. That’s a good thing. The sad part is that many fantastic ideas and concepts slipped through our fingers, and were never heard from again.

I’d like to bring some of those ideas back to your attention.

Titon Toolkit

Up first is Titon Toolkit. This framework is entirely based on the concept of modularity. Yes, many other frameworks, and indeed, all of the big ones have embraced this concept, but Titon Toolkit started out that way.

From the moment the 1.0 release landed in December 2013, it was all about picking and choosing your components, and not including any more code than you actually needed.

It’s designed to work with any design, any CMS, any build system. Where other frameworks will, to this day, kind of expect you to accommodate the way they do things, this one’s designed to let you do everything your way, as much as possible.

This does not happen enough.

The best parts

Before we get down to the technical specifications, let me tell you more about why Titon Toolkit deserves your attention.

Beyond the inherent flexibility, this framework is what the creator calls “style-agnostic”. You know how, at least for now, you can almost always tell which sites are Bootstrap sites? This won’t happen here.

I also recommend looking at the jQuery plugins. Most simply deal with the usual UI elements like accordions, tabs, and so on. Others are related to performance, like Lazy Load, which can be used to reduce the number of HTTP requests sent for any given page.

It doesn’t hurt that most of the JavaScript-based components seem to be as minimalist as possible, as opposed to all-in-one solutions. The idea is to combine them to create your own interfaces, after all.

Plus, it’s all Sass-based.


Titon Toolkit depends on normalize.css and jQuery. It’s interesting to note that it used to support MooTools as well, but I guess hardly anyone does that anymore.

Note: you only need jQuery if you’re going to use the jQuery plugins


Base styles and layouts

These are (usually) the most essential parts of the toolkit. At least, they’re the parts you’re most likely to actually use, along with some mixins, helper classes, and such.

  • Normalize
  • Base
  • Typography
  • Form
  • Code examples
  • The Grid
  • Flex (A grid implemented with Flexbox)
  • Responsive-specific classes


These are the bits that you could frankly build an entire website without. So you know, only include them if you need them.

  • Breadcrumb
  • Button
  • Button Group
  • Divider
  • Icon
  • Input Group
  • Label
  • Loader
  • Notice
  • Pagination
  • Progress bars
  • Step (for navigating through a process)
  • Switch
  • Table


This is the stuff that you’re actually going to need JavaScript for.

  • Accordion
  • Blackout
  • Carousel
  • Drop (dropdown plugin)
  • Flyout
  • Input
  • Lazy Load
  • Mask
  • Matrix (masonry grid)
  • Modal
  • Off Canvas
  • Pin
  • Popover
  • Showcase
  • Stalker (sticky headers and footers)
  • Tab
  • Toast (timed popups)
  • Tooltip
  • Type Ahead


Simple, flexible, designed to please. Use one component, or use them all. It’ll work either way. Titon Toolkit reminds me, in a way, of the old grid systems that only did one thing. Only in this case, the framework only does as much as you need.

I wish more framework creators would write their code with that in mind.

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he's not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy. More articles by Ezequiel Bruni
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress