Fresh Resources for Web Designers and Developers (October 2012)
Every month there are dozens of free stuff that are shared by very generous people in the web design and web development community; it’s almost impossible to keep up with all these new stuff. Nonetheless, you should not worry; in this post we have selected 10 useful ‘stuff’ ranging from code snippets to tools, frameworks to plugins to make your work and life as web designers and developers easier.
Let’s check them out.
Check out all our fresh resources (according to month):
CSSS
CSSS which stands for "CSS-based SlideShow System" is a framework created by Lea Verou (known as the CSS guru). In essence, this framework allows you to create presentation slides with HTML and CSS web standards. This slideshow supports keyboard shortcuts like ←, →, ↓ and ↑ to navigate through the slides.
If you do CSS and HTML, this framework is I think a (better) replacement for high-priced softwares like MS PowerPoint.
BonsaiJS
Bonsai is a lightweight JavaScript graphic library with an intuitive API. We can use this library to draw simple shapes such as a rectangle, triangle, circle, or a graphic with deep complexity. This library can also be used to deliver Scalable Vector Graphic (SVG) rendering in unsupported browsers as a fallback.
In addition, Bonsai also provides a few features including Animation, Event and Filters to make these graphics act more interactively.
Responsive Pattern
Responsive Patterns is a collection of patterns that you can use to build a responsive website. This collection includes some examples of responsive layout and navigation with a few other responsive patterns of common web components such as images, video, tables and forms.
Effin Toolsets
This probably is all you need to help develop your website. Effin Toolsets is a collection of a dozen useful tools for web developers, packed all in one place.
One of the tools in this collection that I personally find extremely useful is the Entifier, this tool will change these characters, < and >, into their HTML code so that your code snippet will render correctly inside the <pre> tag.
Susy
Susy is a responsive grid for Compass. Like any other responsive grid framework out there, it consists of several pre-defined styles but since it is built with Sass and Compass this framework is much more configurable.
Susy allows you to customize the column number, column width, gutter and the grid padding, making it your own grid that fits your website. Susy will do all the hard work: calculation. If you are a super-geek who enjoys working with Sass and Compass, this extension is definitely for you.
Infinite dropdown navigation
A dropdown menu is a common component we found on a website. Yet, creating a dropdown navigation is not as easy as it looks. Harry Roberts of CSS Wizardry, fortunately, has shared his “magic code” to create an infinite dropdown navigation (which is awesome).
Bourbon Neat
Neat is a responsive grid framework that helps you run a responsive website easily. It is built upon Sass and Bourbon, a collection of useful mixins for Sass. This framework is a Ruby gem, it can be installed through Terminal or Command Prompt with this command line gem install neat.
Typicons
There won’t be enough for icons. Typicons are a set of font icons that consist around 88 characters. You can add these icons through @font-face rule and apply them to your website with the CSS pseudo-elements or embed them directly with their HTML character.
By using webfont to deliver your icons, you can have the advantages of having no need to deploy CSS sprite and adjusting background position to display the icons, high-resolution screen ready and technically it reduces http requests and consumes lower bandwidth than bitmap icons.
Annotator
This library allows you to add comments, tags and markdowns to your web content and along with AnnotateIt you can store your annotations for free.
Airport
When you are at the airport, you wil see the flight information board with flipping text all over it. With this jQuery plugin, Airport, we are able to create the same filpping text effect.
Conclusion
That’s all for this month. Have you tried any of these stuff? Which one is your favourite? Did you find any other cool stuff for web designers/developers that we had missed from this list?.
Feel free to share them in the comment box below, and we would like to hear your thoughts as well.