The holmes.css is useful for checking the quality of your code (up to W3C HTML5 standards), nitpicking over ensuring markup is valid and semantic and accessility guidelines are met, and when you are tasked to fix up and debug an old, OLD website.
The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as: Missing required attributes on tags, Potentially improvable markup, Deprecated and Non-W3C Elements and Non-W3C Attributes.
Requirements: –
Demo: http://www.red-root.com/sandbox/holmes/
License: License Free
Laker is a compendium of files, styles and tips for designing digital publications in HTML5. This development guide shall help you solving some of the common problems when designing and building a digital publication with HTML5. It provides you with all information about files, scripts, styles etc. used in Laker.
Laker uses a customized version of the “Baker ebook framework†for producing an iOS app. It basically reads a bunch of HTML files and displays them one after another. Designing pages and adding interactivity is all done in HTML5. That makes it more accessible and cheap to develop, because you do not need any proprietary software.
Requirements: –
Demo: http://www.lakercompendium.com/
License: License Free
What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.
WhatFont Tool can easily get font information about the text you are hovering on. There is a Bookmarklet and Chrome Extension available for download. I am sure it will make web designer’s life much easier.
Requirements: –
Demo: http://chengyinliu.com/whatfont.html
License: License Free
Do you need some tasty, high quality website background patterns for your next web project? Atle Mo from Subtle Patterns made us 12 beautiful subtle patterns free for download.
You can also check the result of each pattern by clicking the “Preview” button. They are all licensed under a Creative Commons Attribution 3.0 Unported License.
Requirements: –
Demo: http://subtlepatterns.com/
License: Creative Commons License
Peity is a simple jQuery plugin that converts an element’s content into a simple mini canvas pie, line or bar chart. It works on any browser that supports <canvas>: Chrome, Firefox, Opera, Safari. Peity also adds a “change” event trigger to your graph elements, so if you update their data your can regenerate one or more charts by triggering change() on them.
Requirements: jQuery Framework
Demo: http://benpickles.github.com/peity/
License: MIT License
With the increasing demand for unique mid-screen devices, it is becoming an even more arduous task to keep all of the device resolutions and screen sizes straight. So Punchcut has packaged up their Toolset For Managing Screen Resolutions, that help them stay current and they are offering it for download.
It contains a collection of Photoshop CS5 marquee-tool presets for common screen resolutions. These cover both fixed-screen resolution sizes and ratios for less common resolutions that fall within standard ratios. It also contains a collection of layered Photoshop CS5 PSDs each providing common devices for comping and design presentations.
Requirements: –
Demo: http://punchcut.com/perspectives/expanding-universe-toolset…
License: License Free
Box-shadow is a pretty powerful property in modern browsers. With just six little values, you can make some really neat stuff. How much neat stuff, you ask? The result is 39 Ridiculous Things To Do With CSS3 Box Shadows that, due to whatever issues, can only be viewed in Chrome 11 or better.
You can navigate with the arrow keys, and he has moved the CSS for each object into the object HTML, which should make it easier to look at particular effects.
Requirements: Chrome Browser
Demo: http://www.viget.com/uploads/file/boxshadows/
License: License Free
Speakker is a crossbrowser Audio solution featuring HTML5. It comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors and two different button sets for light and dark themes. Easy to set up. Just a few lines of Javascript and a quantum CSS.
You can also check out HTML5 Music Portfolio Template with jQuery. The idea is to create an artist portfolio with a discography line up and HTML5 audio player jPlayer. The artist albums are shown using the jCarousel plugin and the user can add song samples to the play list and reorder the songs by dragging them.
Requirements: jQuery Framework
Demo: http://www.speakker.com/demo/
License: GPL License
Demo: http://tympanus.net/Development/MusicPortfolioTemplate/
License: License Free
Having been inspired to get ‘Hardboiled’, Tom Kenny has started playing around with a few cool techniques and exploring how to make the content accessible in less capable browsers while giving the best possible experiences to the ones that support the latest advancements in CSS.
He has Create a CSS3 Image Gallery with a 3D Lightbox Animation by taking Benjamin’s CSS lightbox gallery and built upon by adding a few hover effects for the gallery grid itself and a 3D rotation for the lightbox content, all with the use of CSS.
Requirements: jQuery Framework
Demo: http://inspectelement.com/demos/css3/3dgallery/
License: License Free
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.
It works perfectly in Chrome, Safari, Firefox, IE7 & IE8. And it has been tested on MacBooks, an iMac, a PC laptop, an old PC, an Eee PC, an iPad, an iPhone 3G, an iPhone 4, a few Android phones, a Samsung Galaxy Tab, a BlackBerry and an older Nokia.
Requirements: –
Demo: http://cssgrid.net/
License: Creative Commons License
