This fall I released my first two JavaScript plugins on GitHub. They’re both rather simple, but I find them really helpful in my work and my hope is others will too.
Responsive Table Headers
My usual way of handling tables for narrow viewports in responsive layouts is to convert the cells into block elements. This is very easy to do with CSS and I find the table usually remains very readable, except when the table has a header.
Instead of being on top, the header cells now need to be repeated multiple times inline next to each of their respective body cells.
Responsive Table Headers is a jQuery plugin that automate this DOM manipulation on the browser side and keeps the markup cleaner and more semantic.
Check out the code, docs and demo at the GitHub repo.
Format SymbolSet Stars
I pre-ordered Symbolset as soon as I saw it. The idea to make a semantic symbol font for the web using OpenType ligatures was brilliant.
I quickly found myself using their star symbol in ratings systems. With Sybmolset, you literally put the word “star” in your markup when you want to show a star. For ratings, i would rather output the more semantic and backwards compatible “4 stars” for a rating instead of repeating the word star multiple times.
Format Symbolset Stars is a JavaScript plugin that automates this DOM manipulation on the browser side and keeps the markup cleaner and more semantic. If you have Modernizr installed, it checks for support of @font-face before making the manipulation.
Check out the code, docs and demo at the GitHub repo.