As always, my collection of recently discovered links, tools, resources and libraries keeps growing. To archive these for my own purposes, and to share them in bulk, here is a list of CSS, HTML, and related tools that might be of interest to readers.
CSS Font Stack
A simple tool to let you choose what CSS font stack to use. Also gives you Mac and Windows compatibility for each stack and includes stacks for serif, sans-serif, and monospaced fonts.
FFFFALLBACK
FFFFALLBACK is a bookmarklet that lets you easily find fallback fonts for your web fonts to ensure that your designs degrade gracefully.
Hoodie
“Hoodie aims to combine the best of the best frameworks into a single package to speed your development.” Includes portions of Twitter Bootstrap, Meyer reset, Normalize.css, Selectivzr, HTML5 Boilerplate, and more.
HTML5 Elements Quiz
Pretty simple. A game to test how many valid HTML5 elements you can name. This isn’t just the new elements, but any element that’s valid with an HTML5 doctype.
simurai’s CSS lab
Simurai is a web developer based in Amsterdam. He’s one of these somewhat mysterious and quiet front-end geniuses that you see make an appearance in various places online. His site has a “lab” section with some neat CSS3 demos and experiments that are worth poking around.
Video.js
A cool HTML video player that boasts “same HTML/CSS skin and JavaScript API for HTML5 and Flash Video” plus additional fullscreen and subtitle support. Definitely an option to consider for those looking for bulletproof HTML5 video.
CSSrefresh
“CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.”
CSS Arrow Please
You probably know that arrows and other shapes can be created with pure CSS using pseudo-elements. Well, this is a simple app that lets you create a CSS tooltip-like box with an arrow. You can modify the color, size, and location of the “arrow” and see it change in real time along with the code that produces it.
CSS3 Responsive Slider
This is a responsive, pure CSS3 image slider that uses a combination of CSS3 transitions and radio buttons to create functionality similar to that of a JavaScript-based slider.
More Tools/Sources Welcome
I don’t do these types of lists too often, but if you have any tools or resources that would be of interest to front-end developers, feel free to tweet me, contact me or post a comment here.
Very helpful—thanks.
“lovely stuff” … not my word but the words of Shakin Stevens
good stuff
Cool, keep ’em commin’
I just found this CSS browser support site, so perhaps you haven’t seen it yet either. I particularly like it because it provides support info for individual media features (orientation, resolution, etc) rather than just media queries as a whole. http://www.browsersupport.net/
Nice. I haven’t seen that one before. I’m not crazy about the support output. It’s not as readable as “When can I use..” But thanks for the link.
Thanks,
found some really useful.