FontFriend – Soma Design FontFriend is a bookmarklet for typographically obsessed web designers. It enables rapid checking of fonts and font styles directly in the browser without editing code and refreshing pages, making it the ideal companion for creating CSS font stacks. 2.0’s killer feature is instant drag-and-drop font previewing right in the browser (Firefox 3.6+, Chrome 7+), in any document you’re currently viewing. Version 2.5 and 3.0 introduced some new features that aren’t documented here yet. Click the version numbers to see the release announcements for each. How To Begin First, drag the following link to your browser toolbar: Then, view the following screencast, as any information new to v2.0 is in it. How To Use A CSS selector is chosen from the Selector column—body by default. Additional Usage Click the large F to show or hide the overlayClick the faint S in the lower right corner to reset all styles (Caution: this is an intensive operation that could take down your browser on a very complex site.
css-x-fire - Allows editing CSS properties in the IDE from Firebug CSS editor Installation - Screenshots - FAQ - About Many front-end web developers use Firebug for pixelpushing and style tweaking since it has an excellent live view CSS editor. It allows the developer to concentrate on CSS styling without having to refresh the browser. Unfortunately Firebug does not know about your source files. The changes made in the CSS editor are in-memory only. And when refreshing the page all changes are lost. What if the web IDE - which knows about the source files - could record the changes made in Firebug and apply them on the source code? See it in action - watch this video (thanks to "goyocode"). Grab the plugin with the plugin manager or from Style with pleasure! This plugin is no longer under development. Source code still available at
The Web's biggest Vector Icons Pack: 1500 icons for Wireframes and Interface Design 1500 vector icons for webdesign A few icons previewed at 48 pixels Select, modify, delete Tag, bookmark, vote Graphic tools Communication, mails, discussions Users, personas Commerce, business, delivery Places, maps, pins Programs, code, databases Multimedia, photos, videos Content, documents, organization Object, clothes Download, upload, transfer Files, folders Text, editor, layouts Interface, GUI elements Validate, cancel Settings, time, keyboard Food, leisure, weather, transportation Health, hospital, medecine Arrows, direction Social icons, social logos - Free Bonus by Alex Peattie Included in your Pack License agreement Minicons is created by an Interface Designer for other professionals. You can use these icons for any Web or Graphic templates that you resell. You can use them in your application, and even in templates embedded in your application, with a limit of 100 icons per application You cannot make the icons downloadable, give them away or resell them (even if you modify them).
mgeraci/Less-Boilerplate .gradientV4(#F2F1CB, #F0CED6, 33, #CED3F0, 66, #D2F0CE); hover to see compiled code background: #e2f1cd; background-image: -moz-linear-gradient(top, #f2f1cb, #f0ced6 33%, #ced3f0 66%, #d2f0ce); background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f1cb), color-stop(0.33, #f0ced6), color-stop(0.66, #ced3f0), to(#d2f0ce)); background-image: -webkit-linear-gradient(top, from(#f2f1cb), color-stop(0.33, #f0ced6), color-stop(0.66, #ced3f0), to(#d2f0ce)); background-image: -o-linear-gradient(top, #f2f1cb 0%, #f0ced6 33%, #ced3f0 66%, #d2f0ce 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f1cb, endColorstr=#d2f0ce); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f1cb, endColorstr=#d2f0ce); background-image: linear-gradient(top, #f2f1cb 0%, #f0ced6 33%, #ced3f0 66%, #d2f0ce 100%); .gradientH4(#F2F1CB, #F0CED6, 33, #CED3F0, 66, #D2F0CE);
The mess of web font services Over the last year, we have seen a mass adoption of the @font-face property by all of the major browser vendors. Most type foundries won't license their typefaces to be used on the web because there is no openly supported closed font file type. They all fear that their files will be widely distributed for free and their licensing system will fail. Typekit As the major player in the market, they've set a standards for delivering fonts online. Their engineers have done a ton to eliminate FOUT (flash of unstyled text) to deliver your fonts as fast as possible. Their Browser Samples tool lets you see the typeface rendered in different sizes, in different browsers, in different operating systems. Their yearly rate might be hard for you to sell to your client or boss and many designers are used to paying for a font license upfront and are hesitant to have a yearly font cost. Font Squirrel & Font Spring Font Squirrel promotes 100% free fonts for @font-face embedding. Fontdeck Typotheque Kernest
Needle: Automated tests for your CSS — Needle 0.1a1 documentation Needle is a tool for testing your CSS with Selenium and nose. It checks that CSS renders correctly by taking screenshots of portions of a website and comparing them against known good screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements. Installation If you haven’t got pip installed: As root, or in a virtualenv: Getting started Create test_bbc.py in an empty directory: from needle.cases import NeedleTestCase class BBCNewsTest(NeedleTestCase): def test_masthead(self): self.driver.get(' self.assertScreenshot('#blq-mast', 'bbc-masthead') This is a test case which tells the Selenium web driver (by default Firefox) to open BBC News and check the bar across the top of the page looks correct. assertScreenshot() take two arguments: a CSS selector for the element we are capturing and a filename for the image. To create an initial screenshot of the logo, we need to run Needle in ‘baseline saving’ mode: Selecting a WebDriver
Initializr - Start an HTML5 Boilerplate project in 15 seconds! holmes.css - CSS Markup Detective What does it do? 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, such as name attributes on inputs (lots of these) Potentially improvable markup, such as links with href="#" Deprecated and Non-W3C Elements - see W3C.org's article on obselete tags Non-W3C Attributes - as above, just the most important ones since there are MANY Thanks to Anthony Mann, holmes now displays an informative error message when you hover over the element. How do I use it? Simply download a version of the CSS, minified or normal (with docs), and include a stylesheet link to it on your page. In terms of configuration, such as changing the flag colours: go nuts! Why should I use it? Remember too that these are just guidelines: if something is flagged but you can't change it for a good reason, don't worry about it :) Also use a validator if you want to be 100% sure. Browser Support
CSS Stress Testing and Performance Profiling / Andy Edinborough Now let me explain: I have been losing my sanity over the oddest issue. The project I’m working on right now has a fairly complex stylesheet. Performance for the site is absolutely critical. I’ve done my best to squeeze and optimize every line I can. In all browsers, it runs like a champion. Something specific to IE9 was causing a serious performance glitch. Sadly, no one had an answer So, as I lay there in the corner of the closet, weeping bitterly, I realized that writing my own CSS stress tester wouldn’t be that difficult. Of course it took a while to work out the exact implementation. My first implementation was written synchronously. Instead of: var time0 = new Date().getTime(); window.scrollBy(0,100);var delta = (new Date().getTime()) - time0; I needed to add an event handler to window.scroll, scroll the page, then capture time in the event. (this isn’t how the code is actually written—just showing some insight into the how it works) Fast forward a several weeks. Was it box-shadow?