免费响应式框架和插件
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. 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. 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 推ter 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. 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 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 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. 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 非死book 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 非死book’s code will probably get you sued, this toolkit comes as free of charge. 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! 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 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. 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. 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. 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. 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. 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. 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 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. 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. 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. 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.WooThemes FlexSlider
Responsive Navigation
Flat UI
Responsive Slides
Bones
Sequence
jQuery Sidr
Golden Grid System
Antwort
Foundation
Pure
jQuery Menu Aim
Skeleton
Bootstrap Modal
Pick a date
Magnific Popup
Gumby
Susy
Bootstrap Image Gallery
Charisma
