Media Temple Hosting

CSS/HTML Tools and Resources Worth Checking Out

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

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
FFFFALLBACK is a bookmarklet that lets you easily find fallback fonts for your web fonts to ensure that your designs degrade gracefully.

Hoodie

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

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'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

simurai's CSS lab
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
“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

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

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.

7 Responses

  1. ak:

    Very helpful—thanks.

  2. Steven Cook:

    “lovely stuff” … not my word but the words of Shakin Stevens

  3. Barsum:

    Cool, keep ‘em commin’

  4. 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.

  5. Simon:

    Thanks,

    found some really useful.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.