/ best free open source web resources /

Easily Start Responsive Websites with Sassaparilla

Sassaparilla is a set of default rules and style that starts everything we do at fffunction in a consistent manner. It’s not a boilerplate or a theme. Sarsaparilla on the other hand, is a nice refreshing root beer. Sassaparilla uses the power of Sass via SCSS and Compass to create flexible stylesheets that we can re-use and add to over time.

Compass is a library of common elements, equations and helper styles that is kept up-to-date by a community of developers and is useful for rapid development and leaner code. Both Sass and Compass are Ruby Gems and will need to be installed via command line or terminal. You can compile using a GUI like Codekit or go hardcore and just use command line. Either way it’s pretty easy to get up and running.

Requirements: Sass and Compass Library
Demo: http://sass.fffunction.co/
License: Creative Commons License

Taming the Scalable Vector Graphics (SVG) Beast

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer.

How to Create a Retina-ready Responsive Menu

Codrops has shared a tutorial: Responsive Retina-ready Menu that teach us how to create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game.

The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we use an icon font so that the icons of the menu won’t get pixelized on resize.

Requirements: jQuery Framework
Demo: http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/
License: License Free

Beautiful Animated Filtering & Sorting Ordered Content

MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It’s perfect for portfolios, galleries, blogs, or any categorized or ordered content.

MixItUp uses jQuery to decide which elements to hide, show or re-position based on your filters, and then applies the power of CSS3 transitions to smoothly animate these elements to their new locations. MixItUp is optimized for the current generation of modern, CSS3-ready browsers. Due to its light-weight and efficient approach, It works beautifully and smoothly on all modern devices including smartphones and tablets.

Requirements: jQuery Framework
Demo: http://mixitup.io/
License: Creative Commons 3.0 License

Pretty Neat jQuery Mobile Theme Based on Flat UI

Flat Design is a new trend labeled by the community as an interface striking similar to Windows 8 and Microsoft’s Metro UI because it leaves behind drop shadows, subtle textures and gradients in favour of solid colours, clean layouts and sharp typography. Here you will find an excellent theme for jQuery Mobile based on Flat-UI. It looks pretty clean and modern. It’s totally free, and I hope you will find it useful too.

Requirements: jQuery Framework
Demo: https://github.com/ququplay/jquery-mobile-flat-ui-theme
License: MIT License

An Open Source Self-hosted & Anti-social RSS Reader

Stringer is an open source self-hosted, anti-social RSS reader. Stringer has no external dependencies, no social recommendations/sharing, and no fancy machine learning algorithms. But it does have keyboard shortcuts and was made with love.

Stringer is written in Ruby and built on Sinatra with a PostgreSQL datastore. It deploys easily to Heroku and is a self-professed work-in-progress. The project is released under MIT licensed and hosted on GitHub.

Requirements: –
Demo: https://github.com/swanson/stringer
License: MIT License

Progressive Enhancement for Browser-based Games

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer.

200 Free Vector Map Icons for Google Maps API

Map Icons Designer is a set of 200 Map icons in PSD Vector Shape & PNG format. They can be used as Google Map Icons, Location Markers, Point of Interests (POI) on any Maps. It includes icons for tourism, sports, restaurants, hotels, transportation and etc. It’s sutiable to use them in Google Maps API.

There are 10 different type of location pins. They can be resized and can easily change colors. You can use the royalty-free map icons for any personal, commercial project including web design, software, application, advertising, film, video, computer game, gui design, illustration, for you or for your clients, without having to pay additional licensing fees.

Requirements: –
Demo: http://www.webiconset.com/map-icons/
License: License Free

Create Free Responsive Portfolio Websites with Dunked

Dunked is one of the simplest, easiest, and most versatile portfolio simple-to-use solution to allow creative folk to showcase their work. It’s Responsive, Retina & Ready to go. you can choose from a growing collection of professionally designed templates to reinvent your portfolio. Their pixel-perfect templates are customizable, easy to use, and focus on one thing only – your content.

Each template is fully responsive and will adapt itself to any mobile device. iPad, iPhone, Android, it doesn’t matter. Your work will always looks its absolute best. Upload images from your computer, embed your latest videos from YouTube or Vimeo, and add your mixes from SoundCloud. When you’re done, manage your content through a simple to use drag and drop admin interface.

Requirements: –
Demo: http://dunked.com/
License: License Free

A True Responsive jQuery Lightbox Plugin for Free

Magnific Popup is a free responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device. The majority of lightbox plugins require you to define size of it via JS option. Magnific Popup does not – you can use relative units like EM’s or resize lightbox with help of CSS media queries. Update content inside lightbox without worrying about how it’ll resize and center.

Plugin has an option to automatically switch to alternative mobile-friendly source on small screen size. Default controls are made with pure CSS, without external graphics. For the main image there is a built in way to provide appropriate source for different pixel density displays. Magnific Popup displays images before they’re completely loaded to take full advantage of progressive loading. For in and out transitions CSS3 is used instead of slow JavaScript animation.

Requirements: jQuery Framework
Demo: http://dimsemenov.com/plugins/magnific-popup/
License: MIT License