<-- IE錯誤修正 --> 50 Useful Libraries and Resources for Responsive Web Design - RiS社群 | FileMaker 跨平台企業應用



快速發表主題
返回   RiS社群 | FileMaker 跨平台企業應用 > PHP / ASP.NET / HTML5 / jQuery > HTML5 = TAG + CSS3 + JavaScript APIs > jQuery 討論區 (jQuery 豐富資源)

jQuery 討論區 (jQuery 豐富資源) 包含 jQuery 有關學習、教學、Frameworks 使用、程式與應用範例等,將集中於此。


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2015-01-08
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
預設 50 Useful Libraries and Resources for Responsive Web Design

Click the image to open in full size.
Let’s talk about responsive web design. People are increasingly dependent on their smart mobile devices, and chances are that a large portion of the visitors of your website have used their phone or tablet to get to it. In this article you will find 50 articles, tools and resources, which will help you learn what responsiveness is, and how to apply these techniques to your current website. Happy learning!

Basics

Let’s start with these articles which explain the basic ideas of responsiveness.

1. Make it Responsive

Google’s “Make it Responsive” is a great introduction in the topic. It will get you into the responsive web-designs. During this course, you will be building a site that works across multiple screen sizes and device types. They also have other useful guides which we recommend.
Click the image to open in full size.Make it Responsive




2. MDN’s Responsive Web design Tutorial

This is a nice MDN article about some of the basic strategies people use to achieve responsiveness, such as liquid or fluid layouts, media queries and fluid images. They have also highlighted useful links to external resources on responsive web design.
Click the image to open in full size.MDN’s Responsive Web design Tutorial




3. 5 Really Useful Responsive Web Design Patterns

DesignShack’s awesome article features lots of example patterns which can help you plan your own page layout. Some of the examples are really simple and others provide more imaginative ideas on how to arrange HTML elements.
Click the image to open in full size.5 Really Useful Responsive Web Design Patterns




4. Responsive Web Design Tutorial

Shayhowe presents an excellent series of lessons on web design. One of them teaches you how to make any page mobile-friendly. They start from the foundation of responsiveness and move up to different ways of making any page perfectly viewable in different screen sizes.
Click the image to open in full size.Responsive Web Design Tutorial




5. 9 Basic Principles of Responsive Web Design

Froont made this strange article that shows us the difference between divergent strategies used in making responsive web apps. They get bonus points for using cool animations to present the advantages of each technique. This is a very fun way to learn new things.
Click the image to open in full size.9 Basic Principles of Responsive Web Design




6. A List Apart’s Responsive Web Design Tutorial

An in-depth article on responsive design that covers topics such as fluid design and media queries. You’ll find something to learn in this great resource whether you are new to web developing mobile-friendly apps or you’ve already done a few responsive projects.
Click the image to open in full size.A List Apart’s Responsive Web Design Tutorial




7. Responsive design in 3 steps

This tutorial is intended to show you the basics of responsive design. It’s short and focuses only on the most important aspects. It features a helpful section on the viewport meta tag so that your sites can fit on screens perfectly.
Click the image to open in full size.Responsive design in 3 steps




8. Interface Sketch

This is not a guide, but is useful nonetheless. This is a collection of free sketch templates for web, mobile and tablet platforms. The templates are in PDF and contain multiple pages and layouts. Simply download a template, print out the pages you need and start sketching your next responsive design.
Click the image to open in full size.Interface Sketch




CSS frameworks

Writing responsive CSS by hand takes a lot of experience and most times you will be better off by using a framework. Here is a list of some of the best.

9. Ink

Quickly create responsive HTML emails that work on any device & client. Even Outlook. Email anywhere. On any device. How HTML email was meant to be read.
Click the image to open in full size.Ink




10. Skeleton

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, from desktop to mobile. This framework consists of a base html page that includes the necessary initial markup, some stylesheets which can help you with styling your page and an included icon-set.
Click the image to open in full size.Skeleton




11. Columnal

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. It makes responsive prototyping a little easier. It is 1140px wide, but since it is fluid, it will respond to the width of most browsers.
Click the image to open in full size.Columnal




12. Bootstrap

Bootstrap is the most popular and maybe the most powerful from the frameworks presented here. It is made for folks of all skill levels, devices of all shapes, and projects of all sizes. There is also a large number of bootstrap plugins which you can use to extend it.
Click the image to open in full size.Bootstrap




13. Less Framework

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts (Default, Tablet, Mobile and Wide Mobile) and 3 sets of typography presets, all based on a single grid. The only measures that change from layout to layout are the amount of columns and the width of the outer margins.
Click the image to open in full size.Less Framework




14. Entomic’s Responsive CSS

Layout your pages in minutes for beautifully responsive web sites on desktops, tablets and smartphones. A service that provides the option to create the layout of the page based on popular screen sizes. Simply create boxes and set their width, export the layout and just start using it.
Click the image to open in full size.Entomic’s Responsive CSS




15. Susy

In a world of agile development and super-tablet-multi-magic-laptop-phones, the best layouts can’t be contained in a single framework or technique. CSS Libraries are a bloated mess of opinions about how to do your job. Why let the table-saw tell you where to put the kitchen?
Click the image to open in full size.Susy




16. Simple Grid

Simple Grid is another CSS grid framework. It strives for simplicity, so if you don’t need all the extra features of something like bootstrap, this framework is a good choice.
Click the image to open in full size.Simple Grid




17. Furatto

Lightweight & friendly front-end framework to get the job done. Whether you are using Scss or CSS, it is really easy to start a project and get things done in no time.
Click the image to open in full size.Furatto




JavaScript and jQuery Libraries

There is also a number of useful jQuery libraries and plugins that can give your website the extra responsive magic that it needs.

18. Intention

Intention.js offers a light-weight and clear way to dynamically restructure HTML in a responsive manner. What should an element’s classes be on mobile vs tablet? Where should advertising markup be placed when viewed on a desktop browser? Does the page require an alternate slideshow widget on touch-enabled devices? These are all scenarios that Intention.js can handle, altering the page based on users’ devices.
Click the image to open in full size.Intention




19. JResponsive

JResponsive will organize your content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will arrange its children in a layout that makes optimal use of screen space, by “packing” them in tightly.
Click the image to open in full size.JResponsive




20. ReStable

jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.
Click the image to open in full size.ReStable




21. Responsive Elements

Responsive elements makes it possible for any element to adapt and respond to the area they occupy. It’s a tiny javascript library that you can drop into your projects today.
Click the image to open in full size.Responsive Elements




22. Restive

Restive.JS is a jQuery Plugin that helps you quickly and easily add features to your Web Site to enable it respond and adapt to virtually every Web-enabled Device. Using a combination of Device Detection, Advanced Breakpoints Management, and Orientation Management, Restive.JS will give your Web site an uncanny ability to stay robust in the face of a constantly changing device landscape.
Click the image to open in full size.Restive




23. Fit Text

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. Oh, and don’t you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!
Click the image to open in full size.Fit Text




24. Collage Plus

This plugin for jQuery will arrange your images to fit exactly within a container. This creates an effect similar to Flickr’s profile pages or Google+ Albums. This plugin for jQuery will arrange your images to fit exactly within a container. This creates an effect similar to Flickr’s profile pages or Google+ Albums.
Click the image to open in full size.Collage Plus




25. Chartist

You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included.
Click the image to open in full size.Chartist




26. OWL Carousel

Touch enabled jQuery plugin that lets you create beautiful responsive carousel sliders. You can add an unlimited amount of images which can be slided with a butter-smooth animation.
Click the image to open in full size.OWL Carousel




27. Swipebox

Swipebox is a jQuery “lightbox” plugin for desktop, mobile and tablet.
Click the image to open in full size.Swipebox




28. Slides

SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions.
Click the image to open in full size.Slides




29. Glide

Glide.js is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with JS fallback for older browsers. It’s simple, lightweight and fast. Designed to slide, no less, no more.
Click the image to open in full size.Glide




30. FlickerPlate

A cool jQuery plugin that lets you flick through content. It is also fully responsive and touch enabled.
Click the image to open in full size.FlickerPlate




31. One Page Scroll

Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin.
Click the image to open in full size.One Page Scroll




32. FlexSlider

FlexSlider is an awesome, fully responsive jQuery slider toolkit.
Click the image to open in full size.FlexSlider




33. Royal Slider

RoyalSlider is an image gallery and content slider plugin.
Click the image to open in full size.Royal Slider




34. Camera

Camera slideshow is an open source project, based on Diapo slideshow, but improved a lot.
Click the image to open in full size.Camera




35. PhotoSwipe

PhotoSwipe is a self contained JavaScript library that can be easily integrated into your mobile websites.
Click the image to open in full size.PhotoSwipe




36. Responsive Slides

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container.
Click the image to open in full size.Responsive Slides




37. MasterSlider

Everything you ever wanted in an animated content and image slider, all packaged up into one awesome plugin!
Click the image to open in full size.MasterSlider




38. Magnific Popup

Magnific Popup is a responsive lightbox & dialog script with a focus on performance and providing best experience for a user on any device.
Click the image to open in full size.Magnific Popup




39. Justified

This is a jQuery plugin which arranges photos in a perfectly spaced grid, compensating for the different sizes of the photos. See a live demo here.
Click the image to open in full size.Justified




40. Double Tap To Go

This is a concept for a multi-level navigation menu which works on mobile devices. To compensate the lack of a real hover event, the menu options get activated on double tap.
Click the image to open in full size.Double Tap To Go




41. Menu-Aim

Menu-Aim is a jQuery plugin for dropdown menus that can differentiate between a user hovering over a dropdown item and trying to navigate into a submenu’s contents.
Click the image to open in full size.Menu-Aim




42. Menutron

Menutron transforms your navigation menus from a list to a select menu when resizing your browser. This is especially useful for navigation menu with lots of options.
Click the image to open in full size.Menutron




43. SlickNav

SlickNav transforms your navigation menus into a hamburger menu when resizing your browser.
Click the image to open in full size.SlickNav




44. Sidr

jQuery plugin for creating responsive side menus. They can be shown from the left or right side.
Click the image to open in full size.Sidr




45. Big Slide

BigSlide is a teeny tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel navigation.
Click the image to open in full size.Big Slide




46. FitVids

A lightweight, easy-to-use jQuery plugin for fluid width video embeds. FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design and it’s really ease to use.
Click the image to open in full size.FitVids




47. Adobe Edge

Testing mobile layouts is a pain. To help you, Adobe has created Edge Inspect. It is an essential application for web developers and designers who need to preview their content across multiple mobile devices.
Click the image to open in full size.Adobe Edge




48. Can I use …?

Not all CSS features are available on mobile devices. To make sure that no pieces of functionality are missing on mobile devices, you can use caniuse, which is the go-to web site for up-to-date browser support tables.

Click the image to open in full size.Can I use…?


49. Am I Responsive?

“Am I Responsive?” helps you to see if your website is a responsive one or not. It is also a great way to take a quick screenshot with your page in a number of devices at once.
Click the image to open in full size.Am I Responsive?




50. Device Mode & Mobile Emulation

Google has also developed a way for testing mobile layouts. If you use Google Chrome, you can try Device mode & Mobile emulation right from your developer tools, or even try remote debugging on an android smartphone connected to your computer.
Click the image to open in full size.Device Mode & Mobile Emulation




Conclusion

We hope that you find all these responsive plugins and resources useful! They will give you a great start into responsive design, and a lot of tools for creating your next awesome design. Did we miss anything? Tell us in the comment section :)

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.
Click the image to open in full size.


來源...

回覆時引用此篇文章
回覆

主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +8。現在的時間是 09:23 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2019,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝明易資訊有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2