Initializr - HTML5 Boilerplates WhatFont Tool ← Back to Chengyin's main page 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. Hence I wrote WhatFont, with which you can easily get font information about the text you are hovering on. To embrace the new web font era, WhatFont also detects services used for serving the font. Font name? Want to know more? Want the font? Want to share your discovery? ← Drag this to your bookmark bar to install On any webpage, click your WhatFont bookmark to use the tool. Full support: Firefox 3.6+, Chrome 9+, Safari 4+, Internet Explorer 9. Limited support: Internet Explorer 8. ↑Install the extension from Chrome Web Store. On any webpage, click WhatFont button to use the tool. Download Now After downloading, open the extension file to install. The quick brown fox jumps over the lazy dog. Email chengyin.liu@gmail.com Twitter @chengyinliu The tool should auto-update itself. Hosted on Github
Initializr: With Great Templates Comes Great Responsivity! | @verekia's blog Today I'm proud to announce that a "Responsive template" is now available on Initializr! It will help you dealing with all the various devices used to display your site. Mobiles, tablets, netbooks, laptops, desktop monitors, HUGE desktop monitors... Making your site work correctly on all these devices is a real nightmare. About responsive web design For those who have been living in a cave for the last few months (understand: for those who have a life and don’t spend days reading tweets and blogs) you probably need a short update about what a "responsive" design is. To design a responsive layout, we have to forget about the usual static 960px width layouts and go fluid with percentage widths and media queries. A fluid layout with percentage widths The first thing our page needs is a "fluid" layout. Mobile-first approach media queries Media queries are a cool way to specify different styles depending on the device used (by aiming particular screen resolutions or orientations for example).
Tagxedo Less: CSS Pre-Processor dafont.com DomainTools Graph words Sass: CSS Pre-Processsor Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. PreprocessingPreprocessing permalink CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. You can also watch individual files or directories with the --watch flag. sass --watch input.scss output.css You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. sass --watch app/sass:public/stylesheets Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder. 💡 Fun fact: Sass has two syntaxes! VariablesVariables permalink
VisuWords Visuwords™ online graphical dictionary — Look up words to find their meanings and associations with other words and concepts. Produce diagrams reminiscent of a neural net. Learn how words associate. Enter words into the search box to look them up or double-click a node to expand the tree. It's a dictionary! Visuwords™ uses Princeton University’s WordNet, an opensource database built by University students and language researchers. The Visuwords™ Interface To use the applet you only need to type a word into the search query at the top of the page and press 'Enter'. You can zoom the model in and out by rolling the wheel on your mouse.
Sassaparilla: Sass & Compass Grid System