background preloader

Tools

Facebook Twitter

Foundation: Rapid Prototyping and Building Framework from ZURB. Wirefy. July 12th, 2012 Wirefy has been recently released by Christopher over at github. It’s a collection of functional responsive HTML snippets and templates which scale as you resize the browser (hence across devices). Hopefully beneficial to those who build HTML prototypes. Good work. Thanks a thousand for sharing. From the website description: Wirefy is a collection of CSS & JS files to help you rapidly experiment with responsive wireframes.

Credits: Chris Da Sie. Screenqueri.es | Pixel Perfect Responsive Design Testing Tool. Rapid Prototyping For Any Device With Foundation. Advertisement This article is the second piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community (the first article covered PrefixFree, a new tool be Lea Verou).

ZURB are well-known for their wireframing and prototyping tools and in this post they present their recent tool, Foundation, a framework to help you build prototypes and production code that’s truly responsive. You’ve probably already heard about responsive design, which is website design that responds to the device constraints of the person viewing it. It’s a hot topic right now, and with good reason: alternative devices outsell desktop PCs 4 to 1 already, and within three years more Internet traffic in the US will go through mobile devices than through laptops or desktops. The Problem with Global CSS The bigger problem was that it wasn’t designed to be responsive or mobile-friendly in any way. So, How Does Foundation Work? (al) 21 top tools for responsive web design.

Gridpak: The Responsive Grid Generator. Advertisement This article is the fifth in our new series that introduces the latest, useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree1; the second introduced Foundation2, a responsive framework; the third presented Sisyphus.js3, a library for Gmail-like client-side drafts and the fourth shared with us a free plugin called GuideGuide4. Today, we are happy to present Erskine’s responsive grid generator: Gridpak. In the near 18 months since A List Apart published Ethan Marcotte’s article Responsive Web Design5 much has changed in the way we approach our design process. The new responsive attitude described in the article embraces device agnostic design, flexibility and the undefined canvas. The Problem Challenges and problems inevitably arise when adopting new ideas and ways of working. Calculating percentage widths and writing CSS in order to make our website and grid responsive.