Free Responsive Plugins and Frameworks for your Projects
WooThemes FlexSlider
This great slider is built with jQuery and has a very simple,
semantic markup, so if you have some knowledge of jQuery, you will be
able to customize it quite easily. The plugin is supported in all major
browsers (yes, in IE as well – what a surprise) and it comes with lots
of effects, both horizontal and vertical slide and fade animations.
Because the toolkit is responsive, which means it works on the iPad
and iPhone (both devices are driven by touch gestures), this toolkit
comes with hardware accelerated touch swipe support, so you will not
experience delays when swiping on portable devices. In case you make use
of WordPress as a content management system, the guys from WooThemes
developed a plugin as well, so you can download it for free and use it
in your custom theme.
Responsive Navigation
We often find ourselves in the middle of a situation where we don’t
really know what is the right way to implement navigation on mobile and
tablets. While menus can look really nice on desktop, make use of
negative space, good typography and big font sizes, the guidelines
change when we work with smaller screens.
This plugin will definitely sort out some of your problems. Actually,
more and more responsive themes implement the same style of navigation
because it is very usable and saves a lot of space on small screens.
The plugin is based on JavaScript, but it is not heavy at all,
weighing only 1KB. In order to make sure it works well on mobile, the
toolkit uses touch events and CSS3 transitions for best performance and
works very well in all major browsers, including all from IE6 and on.
Flat UI
Here at Designmodo we are huge fans of both responsive web design and
flat design, so we combined both of them into this amazing toolkit that
you can download for free.
The kit is built on Twitter Bootstrap, ensuring fast performance and
amazing support in all browsers. All the elements in our kit are
responsive down to mobile screens and look amazing both on portable and
desktop devices. We doubt you didn’t try them out yet – but if you
didn’t, we don’t understand what you are waiting for.
Responsive Slides
Another responsive slider coming in lightweight version is this one.
It only weighs 1.4KB and is a plugin creating a responsive slide using
elements from a container. There is a lot of love for Internet Explorer
from this plugin, as well as support for all other major browsers.
The toolkit comes with two different modes. The one is starting to
play the images automatically, allowing them to fade-in and fade-out,
while the other one operates as a responsive image container featuring
pagination and/or navigation for the user to fade between the slides on
his own.
Bones
Bones is a great WordPress theme, designed as simple as possible,
coming in as a fully responsive layout. The theme comes totally free of
charge and is supposed to work as a normal theme, so it is in no way a
child theme that you have to build on.
Although everything should be responsive, I am quite confused about
the slider on the home page, which doesn’t seem to respond well to
browser resizing, but I assume this is a bug that the developers are
aware of.
Bones is built using the mobile-first approach, which prioritizes the
mobile context to create a better user experience for the visitors,
instead of just using a framework that resizes from desktop to mobile.
Sequence
Sequence is another responsive slider that will work amazingly fast
on mobile platforms and tablets because it is entirely based on CSS3
transitions.
All modern browsers support it (when speaking Internet Explorer, only after the 10th
version) and it is very easy to add effects and transitions. However,
even for Internet Explorer 7, 8 and 9, this responsive slider comes with
a fallback theme, as these versions of IE do not support CSS3
transitions. You can use move, scale, rotate, fade and several others
action, so there should be no limit to your creativity.
jQuery Sidr
This jQuery based plugin will facilitate creating side menus much
quicker than if you would have to code them on your own. Moreover, these
side menus will be totally responsive, down to mobile, so all your
visitors will enjoy a good experience regardless which device they
browse on.
If you know how Facebook implements its menu on mobile, and are a fan
of it, you should take a closer look at this plugin, because it
basically does the same. The only difference might be that while using
Facebook’s code will probably get you sued, this toolkit comes as free
of charge.
Golden Grid System
I have always been a big fan of websites built on grid systems and
therefore I am showcasing this amazing toolkit today. Golden Grid System
is a free-of-charge grid system splitting the screen in 16 columns.
Nothing special until here. But what is really impressive is the fact
that when resizing the browser, some of the columns disappear.
The 16 columns will fold down to 8 for tablets and to 4 on mobile
devices. This grid can easily cover screen sizes from 240 to 2560 pixels
wide. Now don’t understand this tool wrong. It will not just strip you
down of your content when you resize the browser; it will just arrange
it on a four-column grid. This will also make it easier for the browser
to load the site. Great tool!
Antwort
The name of the tool is German – and we all know how much quality
Germany stands for. Although this is not a product of the German
government, it is still an amazing piece of work. Antwort will be golden
to you if you are sending e-mail newsletters, because this is what it
basically is: a responsive e-mail newsletter template.
Not only the templates sizes down after the screen size, but they
also look different in several e-mail clients on Windows Phone, Android
and desktop. I can imagine a lot of work has been put into this tool and
I believe you should take a look at it, as it is indeed high quality.
Foundation
Foundation is one of the most amazing responsive frameworks on the
web and it is also really popular. Thousands of websites are built on
Foundation and the developers couldn’t be more proud of their work.
The framework also allows the mobile first approach, which means that
you will be able to built your website when it is small, and then, as
the screen size gets bigger, you will be able to add more and more to
it. The grid is flexible and therefore it allows you to create quick
prototypes, which can be previewed on all kinds of devices.
Zurb, the company that developed the framework, calls it the most
advanced front-end framework in the world. Now I’ve been on the web for
quite some time and I have to say that their description is not far from
the truth.
Pure
We continue with another responsive resource, only this time coming
with several responsive modules included. Pure is very simple, but
offers developers and designers lots of modules (such as menus, buttons,
text formatting and tables) that can be used for free.
Pure is not the most popular project in the world, but downloading
these modules will definitely speed up the process of creating
responsive designs. You can use many of these resources in combination
with Foundation, so you will be able to create working prototypes much
quicker than ever before.
jQuery Menu Aim
If you’ve been on Amazon at least once (let’s face it, who hasn’t
been?), then you are probably already aware of the cool dropdown
secondary navigation they are using to browse through their categories.
This jQuery plugin will allow you to implement exactly the same concept
in your own websites.
What it does is actually quite simple. It is basically a dropdown
menu based on a jQuery plugin that fires events when the users aim with
the cursor at particular menu items. I don’t even want to start thinking
of how many projects you could implement this dropdown navigation in,
as I am quite sure I would fall asleep before drawing a conclusion.
Skeleton
Some of you might have heard of Skeleton before. It is basically a
responsive framework that does the same as the other do, while being
extremely simple to use, customize and style.
The framework is responsive down to mobile and it is important to
know that this is not a user interface framework. This is only a kit
that provides the most basic styles as a foundation that you can
continue to build on with your own style.
Skeleton is tested and supported in lots of browsers, including some older versions of Internet Explorer, such as 7, 8 and 9.
Bootstrap Modal
This next framework can also be very useful in different projects.
Modal makes it possible to have input forms and scale them down whenever
the size of the screen is lower. In the preview below you can see two
columns of input fields. If the screen size had been smaller, all the
input fields would stack upon each other.
Pick a date
We had lots of responsive frameworks but the one that I am showcasing
now is something quite new. While working with media queries on your
own is something many can do, the thing that I am showing you now is
simply amazing.
In case you have a situation in which your users need to select a
date, this plugin would be amazing. This lightweight jQuery date input
picker is totally responsive, so you will be able to select the date on
mobile, tablets and desktop. Great plugin.
Magnific Popup
This is another responsive lightbox working perfectly with images at
small screen sizes. Another good thing about it is that no only the
image thumbnails will be resized, but also the image preview when
clicking on the image, as you can see in the screenshot below.
While many plugins resize image thumbnails, some of them are quite
poor at resizing their preview, so I believe this is one of the best
examples that there is.
Gumby
Gumby is another responsive framework, this time built on Sass, and
comes as an open-source project. It is not very different than some of
the other responsive frameworks, but you might prefer this one if you
are a fan on Sass.
If you’ve never heard of it, Sass is an auto-named “awesome
stylesheet language” based on CSS. It is something you might want to
take a look at, it works great and if you get used to it, I am sure you
will not go back to plain CSS anymore.
Susy
Our next example is another responsive framework, this time built on a
plain CSS grid system. The good feature of this framework is that it
doesn’t make your site look the same, only in different sizes. I like
about it the fact that the framework only “does the math” and creates
the grid, so you will be able to build your website as you want, at
different sizes. The plugin comes with some documentation, so you will
be able to use it right away, as the learning curve seems to be very
quick.
Bootstrap Image Gallery
This next example is also an image gallery responsive framework, but I
am showcasing it here because it also works for video, not only for
graphics. I think this is quite cool and I can see that resizing the
video preview window down happens right away, without any kind of delay.
This means that the plugin will be really quick to load on mobile,
even if it contains video (which normally is very heavy). This must be
this plugin’s selling point and if you work with video, think twice
before going to the next example without taking a look at this one.
Charisma
Charsima is a one-of-a-kind example in today’s showcase, featuring a
great HTML5 admin template, which is responsive down to mobile. Now
you’ve probably seen lots of HTML5 themes that are responsive, but there
are not many out there that can be used as admin panels or dashboards.
This example is, however, one of the best works that I have seen on the
internet in a while in this category, so make sure you take a look at
it.
With Charisma we end our showcase for today and we hope that the free
responsive frameworks that we have showed you above are something you
are going to take a look at (or already have, for that matter). We
believe that the resources above are high quality, therefore we think
it’s important to give credit back to the authors in case you make use
of their work.
No comments:
Post a Comment