跳到主要内容

2月份最新的网页设计工具

+$The last few weeks have seen the release of a number of interesting tools, not least the new versions ofHTML5 Boilerplate+$, which is now at 5.0, andLaravel+$which is also now on 5 – click through to see the new features and fixes.

+$A bunch of brand new offerings have also been unleashed, including utilities for working with Google Fonts, style guides, SVGs, iOS animations and IE8 pitfalls.

01. +$Pattern Library

Anna Debenham's open source style guide

+$Anna Debenham's open source style guide

+$Style guides, in the words of布拉德弗罗斯特+$, are "essential tools for sanity maintenance and organisational success", and more and more of us are dealing with them as this fact is increasingly acknowleged.

+$Anyone who works with style guides will love this resource created by安娜德本汉姆+$; it's a Jekyll-based open source style guide/pattern library. New to杰奇+$? Try+$Debenham's Tutorial+$. For more style guide goodness, have a look at Debenham and Frost's+$new Podcast+$on the topic and their repository of useful+$style guide articles and resources

02. +$Web Font Load

All the Google Web Fonts on your machine with no extra software

+$All the Google Web Fonts on your machine with no extra software

+$Get all the Google Web Fonts installed on your Mac or Debian machine with this simple script – it's a quick and easy way to get the fonts without having to install any other software. Unlike the Google-approvedSkyFonts+$route, your fonts of course won't be updated automatically but this can be achieved by just running the script again.

03. +$Font Pair

Discover beautiful font pairings

+$Discover beautiful font pairings

+$Still on the subject of Google Web Fonts, here's a convenient tool for pairing them. First decide what types of fonts you want (a serif with a sans serif, a cursive with a serif etc.) then browse some combinations. When you see something you like, you can paste in your actual copy to see how it will look. Here are some+$tips on choosing good pairings+$from the creator of this tool, Hayden Mills.

04. +$is.js

is.js: a useful checking library

+$is.js: a useful checking library

+$Checking library is.js has received a fair amount of attention this month – it's useful for writing checks to verify types, times, dates and so on via a simple API. Its creator Aras Atasaygin tells us he's only been coding for 18 months and that the repo has become "very contribution-friendly".

05. 阴凉处

Make beautiful gradients with shade

+$Make beautiful gradients with shade

+$shade is a 'mathematically derived gradient explorer' that provides a neat interface for making the perfect background gradient. Adjust the colour and gradient spread with sliders for hue, saturation and lightness and get an instant preview of the results. The code you need to recreate your gradient is displayed at the bottom of the display area ready to be pasted into your own code.

06. 弹簧

Easier iOS animations in Swift

+$Easier iOS animations in Swift

+$Deftly-used animations can add meaning and personality to your interface, and this library simplifies the process of creating them for iOS. Swift is a new language for creating apps for iOS and OS X and Spring makes it easier to make animations with Swift. For detailed instructions on getting started with Spring, head to本教程+$and scroll down about two thirds.

07. +$memory-stats.js

Keep track of JavaScript Heap Size with memory-stats.js

+$Keep track of JavaScript Heap Size with memory-stats.js

+$Paul Irish has written this handy minimal monitor for JavaScript Heap Size that works inside the page. It's similar to mrdoob's+$stat.js+$, but for JavaScript memory. You can find it这里+$as a Rails gem, there's an+$Ember Add-on+$, and an Angular component on这一页

08. +$IE8 Linter

Check for IE8 compatibility and fix any problems

+$Check for IE8 compatibility and fix any problems

+$For those "special occasions", as he puts it, when IE8 compatibility is required, Danny Povolotski has created IE8 Linter which checks your site for things that might cause incompatibility and suggests solutions. It's在GitHub上+$. He's very keen on making this as comprehensive as possible and invites us all to contribute our "favourite" IE8 pitfalls.

09. SVGOMG

Get a preview of what SVGO will do before it does it

+$Get a preview of what SVGO will do before it does it

+$Optimising your SVG files is an essential step before adding them to your site, and+$SVG Optimizer+$is one of the best tools for the job. It will remove data you don't need such as comments, hidden elements, metadata and so on as well as other handy tweaks. It doesn't, however, provide a way to see the effects of running the optimisations, so Jake Archibald has created SVGO's Missing GUI which provides live previews and makes it easier to use. Sara Soueidan has written a useful+$article About It

10. CSS参考

A useful cheat sheet for CSS

+$A useful cheat sheet for CSS

+$This fantastic resource arranges the important bits of CSS on one page organised by pseudo-class, data type, property and so on. Find the thing you need guidance on and click through to an explainer file that gives you everything you need to know in a concise, digestible article.

Tanya Combrinck

Tanya Combrinck已经写了四年多的网络,互联网实际上是她与人类互动的首选方式。你可以在Twitter上找到她@tanyacombrinck

像这样?阅读这些:

话题



翻译字数超限