想學(xué)響應(yīng)式設(shè)計(jì)?來(lái)看史上最全的響應(yīng)式設(shè)計(jì)資源庫(kù)

2013-11-28    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   sillybuy.com  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請(qǐng)點(diǎn)這里

想學(xué)響應(yīng)式設(shè)計(jì)?來(lái)看史上最全的響應(yīng)式設(shè)計(jì)資源庫(kù)

響應(yīng)式設(shè)計(jì)起源:Ethan Marcotte在2010年寫了一篇響應(yīng)式的文章,宣揚(yáng)這種新式的網(wǎng)頁(yè)設(shè)計(jì)思想,經(jīng)過(guò)3年的發(fā)展,響應(yīng)式設(shè)計(jì)得到了眾多設(shè)計(jì)師的認(rèn)可。

本文的目的在于為大家集中推薦一些最有價(jià)值的響應(yīng)式設(shè)計(jì)資源。包含了CSS框架、在線工具、準(zhǔn)備階段的工具等等。

推薦閱讀:
《不要落伍!來(lái)和小伙伴一起學(xué)習(xí)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)》
《來(lái)試試響應(yīng)式設(shè)計(jì)!25例優(yōu)秀的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)賞析》
《年終特典!當(dāng)下最熱門的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)總結(jié)》

CSS 響應(yīng)式框架

這一部分主要介紹了一些的CSS響應(yīng)式框架,更輕量,而且兼容性也不差。(Foundation,Skeleton是較為老式的CSS響應(yīng)式框架)

Girder
Girder 使用了Sass silent classes (占位符,輸出時(shí)不會(huì)體現(xiàn))在HTML中組織內(nèi)容,標(biāo)記能夠額外處理一些表象類(presentational classes ),比如 “unit_1of4″, “small-2″, “grid4″.

responsive-design-1

Cardinal

Cardinal 是一個(gè)小型的、以”移動(dòng)優(yōu)先”為理念的CSS框架,默認(rèn)樣式很實(shí)用。靈活的字體和響應(yīng)式的柵格線系統(tǒng)。


responsive-design-2

Typeplate

Typeplate是一款”排版初學(xué)者工具”. 一款簡(jiǎn)約的Sass/CSS庫(kù),能夠采用合適的手段處理作品。


responsive-design-3

Furatto

Furatto 基于Sass,包含了JS插件,在Coffeescript中開(kāi)發(fā)的,因此很容易閱讀。交互性很強(qiáng),支持多種設(shè)備。


http://icalialabs.github.io/furatto

Kraken

輕量、移動(dòng)優(yōu)先為理念的模板,適合前端開(kāi)發(fā)者。


responsive-design-5

Gridism

Gridism 是一款簡(jiǎn)約的響應(yīng)式柵格線系統(tǒng),非常好用。


responsive-design-6

Sassaparilla

Sassaparilla 使用了Sass以及Compass技術(shù),讓響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)變得簡(jiǎn)單。注重于更好的版式布局,打造良好的閱讀節(jié)奏。讓編譯更加輕松。


responsive-design-7

Cool Kitten

Cool Kitten是一款滾動(dòng)視差響應(yīng)式框架(個(gè)人最愛(ài))


responsive-design-8

Responsive Boilerplate

Responsive Boilerplate 極度簡(jiǎn)約、非常輕量(2kb)的CSS柵格框架。易懂易用。


responsive-design-9

Javascript 響應(yīng)式插件

這些腳本要么是一小段代碼,要么是幾個(gè)文件,能夠?qū)崿F(xiàn)網(wǎng)頁(yè)設(shè)計(jì)作品的響應(yīng)式。大部分自動(dòng)注釋,因此很方便使用。

Responsive elements
Responsive Elements 小型JS庫(kù),能夠輕松實(shí)現(xiàn)元素的響應(yīng)式。

responsive-design-10

jPanelMenu

jPanelMenu 是一款jQuery插件,由一款面板式的菜單創(chuàng)建。保證CSS動(dòng)畫更好的實(shí)現(xiàn)。


responsive-design-11

SelectNav.js

SelectNav 是一款JS插件,能夠?qū)⒕W(wǎng)站的導(dǎo)航欄轉(zhuǎn)換為可選擇的下拉菜單。結(jié)合了Media Queries,能為移動(dòng)設(shè)備節(jié)約空間。


responsive-design-12

Adapt.js

Adapt.js 輕量級(jí)JS文件,在瀏覽器載入頁(yè)面前,能夠根據(jù)寬度,智能判定并載入CSS文件。


responsive-design-13

Masonry

Masonry 是一款優(yōu)秀的jQuery插件,能夠打造動(dòng)態(tài)、適應(yīng)性的布局。能夠幫助重新排列元素。


responsive-design-14

RoyalSlider ($12)

RoyalSlider 是一款很好用的jQuery圖庫(kù)或內(nèi)容滾動(dòng)插件,動(dòng)效、響應(yīng)式布局、支持觸控,很適合移動(dòng)端。無(wú)論是滾動(dòng)欄、幻燈片窗還是內(nèi)容滾動(dòng)欄、圖庫(kù)、視頻庫(kù)都能用其實(shí)現(xiàn)。


responsive-design-15

UberMenu – WordPress ($16)

UberMenu 是一款非常友好的、高度定制化的、響應(yīng)式的 Mega Menu WordPress插件。


responsive-design-16

Responsive Pricing Tables – WordPress ($15)

CSS3 Responsive Web Pricing Tables Grids For WordPress CSS3 價(jià)格表,兩種價(jià)格表樣式,20種可選顏色,可選項(xiàng)豐富。


responsive-design-17

響應(yīng)式設(shè)計(jì)——導(dǎo)航篇

響應(yīng)式設(shè)計(jì)中最難的部分大概就是導(dǎo)航了。即便你的導(dǎo)航菜單占地很小,但是移動(dòng)端的設(shè)計(jì)依然很困難。傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)總是把導(dǎo)航菜單放在頁(yè)頂,以便用戶瀏覽。而響應(yīng)式設(shè)計(jì)中,情況很復(fù)雜。這一環(huán)節(jié),將推薦幾種不錯(cuò)的解決方案。

Responsive menu patterns

responsive-design-18

A Responsive Design Approach for Navigation (文章)


responsive-design-19

Flexnav

FlexNav 是一款使用Media Queries和JS實(shí)現(xiàn)的多級(jí)菜單,支持觸控、懸停。符合”移動(dòng)優(yōu)先”理念。


responsive-design-20

Naver

Naver一款面向響應(yīng)式導(dǎo)航的jQuery插件


responsive-design-21

Navigataur

Navigataur 是一款簡(jiǎn)約的工具,幫助實(shí)現(xiàn)響應(yīng)式導(dǎo)航菜單。


responsive-design-22

響應(yīng)式設(shè)計(jì)——圖像

如何根據(jù)瀏覽器尺寸、加載速度選擇圖片尺寸?

CSS Fluid Image Techniques for Responsive Site Design (Article)
Dudley Storey 創(chuàng)作的一篇優(yōu)秀文章,闡述了該要如何打造”伸縮自如”的圖像

responsive-design-23

Clown Car Technique for Responsive Images

Estelle Weyl, 寫了一篇關(guān)于可縮放矢量圖形(SVG)的文章,生動(dòng)有趣。


responsive-design-24

Responsive Img

Responsive Img 是一款jQuery插件,能夠變換圖像的src屬性,主要根據(jù)的是容器的寬度。


responsive-design-25

響應(yīng)式設(shè)計(jì)工具

See your site responsive

responsive-design-26

Viewport Resizer

Viewport Resizer 是一款在線工具能夠測(cè)試網(wǎng)頁(yè)設(shè)計(jì)是否符合響應(yīng)式設(shè)計(jì)的標(biāo)準(zhǔn)。


responsive-design-27

Screenqueri.es

Screenqueri.es 是一款細(xì)膩的響應(yīng)式測(cè)試工具。能夠在30多種不同的設(shè)備上展示你的網(wǎng)頁(yè)設(shè)計(jì)。


responsive-design-28

Responsive Web CSS

Responsive Web CSS 讓響應(yīng)式網(wǎng)頁(yè)布局變得輕松。只需要添加div,設(shè)置一下不同設(shè)備上的大小即可。


responsive-design-29 

 

日歷

鏈接

個(gè)人資料

存檔