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.
Dependencies
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
Features
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
Elements
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
Modules
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
Conclusion
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.
