50 Alat Reka Bentuk Web Responsif Berguna Untuk Pereka
Untuk beberapa hari yang lalu, kami telah menunjukkan kepada anda beberapa tema responsif WordPress dan Joomla yang terbaik yang boleh anda muat turun dan gunakan di laman web anda. Hari ini, kami akan memberikan anda alat. Merangkumi rangka kerja, perkhidmatan, dan skrip muat turun, kami fikir ia akan menjadi satu pertolongan yang sangat baik ketika datang ke pembangunan web yang responsif.
Untuk memudahkan turun senarai keseluruhan alat, kami telah mengkategorikannya ke bahagian berikut:
- Grid & Rangka Kerja
- Helaian & Skrin Lakaran
- Plugin JavaScript & jQuery
- Ujian & Pratonton
- Slider
- Lain-lain
Grid & Rangka Kerja
[Kembali ke atas]
Kolom
Columnal adalah projek Pulp + Pixels, yang telah dipinjam dari cssgrid.net sementara beberapa inspirasi kod telah diambil dari 960.gs. Columnal membantu anda dalam reka bentuk web responsif anda, dengan menjadikan grid anda fleksibel untuk berubah secara dinamik apabila tetingkap penyemak imbas diubah ukurannya.
Rangka
Skeleton adalah rangka kerja CSS yang mudah dan kuat, yang terutama disukai oleh pemaju dan pereka kerana kesederhanaan dan kecekapannya. Tiada pengangkat berat dengan Javascript di sini, hanya CSS yang baik dan tulen dengan dokumentasi bersih.
LessFramework 4
Rangka Kerja Kurang lebih kerangka, dengan nama penciptanya. Ia adalah sistem grid CSS adaptif berdasarkan penggunaan pertanyaan media CSS dalam talian, yang menjadikan pembangunan laman web responsif lebih mudah.
Sistem Grid Semantik
Sistem Semantik Grid digunakan untuk reka bentuk susun atur grid responsif. Ia menggunakan sambungan CSS pra-diproses seperti LESS, SCSS atau Stylus untuk memberikan kecekapan maksimum. Anda boleh memilih lebar lajur dan longkang, pilih bilangan lajur dan beralih antara piksel dan peratusan.
Sistem Grid Emas
Golden Grid System adalah sistem grid-grid yang berfungsi sebagai titik permulaan dari reka bentuk web responsif anda. Ia membolehkan laman web untuk melayani halaman tampan yang berkisar antara 240 hingga 2560px.
320 dan Up
320 dan Up adalah pertanyaan media boilerplate CSS, yang berfungsi sebagai template permulaan untuk reka bentuk responsif anda. Ia mengikuti pendekatan sebaliknya berbanding dengan beberapa boilerplates yang lain.
Inuit.css
Inuit.css adalah rangka kerja CSS, yang sangat mudah digunakan, walaupun untuk orang baru. Ia mempunyai pendekatan minimalis, oleh itu anda perlu menangani hanya perkara yang diperlukan, tetapi jika perlu, ia juga boleh dilanjutkan dengan segelintir plugin yang tersedia.
Gridless
Gridless adalah boilerplate untuk membuat laman web responsif dan silang-pelayar dengan tipografi yang indah. Alat ini memberi tumpuan kepada pembangunan projek yang progresif, dan ia berfungsi sebagai titik permulaan bagi sebarang reka bentuk.
1140 CSS Grid
1140 CSS Grid adalah sistem grid CSS yang hebat yang direka oleh pelukis Melbourne Andy Taylor, yang membolehkan reka bentuk anda sesuai dengan sempurna pada 1140px untuk monitor besar dan susun atur bendalir anda akan menyesuaikan dengan lancar ke resolusi yang lebih kecil dengan kerja tambahan yang sangat sedikit.
1KBCSSGrid
CSS Grid 1KB yang direka oleh Tyler Tate, adalah penjana CSS Grid yang mudah dan ringan. Ia akan membolehkan anda menetapkan bilangan lajur, lebar lajur dan lebar saluran, dan anda boleh mendapatkan CSS yang boleh dimuat turun untuk grid laman web anda.
Bootstrap
Bootstrap, dicipta dan diselenggara, oleh Mark Otto dan Jacob Thornton di Twitter, adalah satu set elemen elemen, susun atur dan alat javascript yang sangat baik, tersedia secara percuma untuk anda memuat turun dan menggunakan dalam projek reka bentuk web anda.
Kalkulator Grid Bendalir
Alat mudah ini akan membantu anda dengan cepat merebut CSS reka bentuk laman web grid cecair anda.
Grid Bendalir
Grid Bendalir adalah rangka kerja grid cecair mudah namun berguna, yang membuat susun atur responsif berdasarkan 6, 7, 8, 9, 10, 12 atau 16 tiang.
Flurid
Flurid adalah rangka kerja grid CSS pelayar yang mudah dan sangat berguna dengan sehingga 16 ruangan. Dan selain itu ia tidak menyembunyikan piksel menjadi margin.
Gridset
Gridset adalah alat untuk membuat grid jenis mana-mana, seperti, kolumnar, asimetri, tetap, nisbah, kompaun, responsif dan banyak lagi. Alat ini oleh Mark Boulton, masih dalam versi beta, tetapi terbukti menjanjikan. Dan adakah saya menyebutkan, menggunakannya semudah mencantumkan pautan.
Gridpak
Gridpak adalah penjana grid responsif dalam talian, di mana bilangan lajur, padding, dan longkang boleh diubah, dan titik break custom boleh ditambah. CSS dihasilkan oleh alat dan disediakan untuk muat turun. Ia juga menyediakan templat grid PNG, yang boleh digunakan untuk tujuan merancang di Photoshop.
SimpleGrid
SimpleGrid, yang dibangunkan oleh Michael Kuhn, adalah rangka kerja CSS yang sangat mudah dan mudah untuk mewujudkan susunan berasaskan grid tanpa had. Secara lalai, SimpleGrid disediakan untuk 4 saiz skrin yang berbeza.
Susy
Susy oleh Oddbird, adalah sama dalam tindakan untuk Sistem Semantik Grid. Ia tidak menggunakan markup tambahan atau mana-mana kelas istimewa lain, tetapi hanya bertujuan untuk pengguna Saas dan Kompas lanjutannya.
Grid Cecair Tiny
Grid Cecair Tiny adalah aplikasi web yang hebat, yang dapat membantu anda menentukan sistem grid laman web anda secara interaktif. Anda boleh menetapkan bilangan lajur, peratusan panjang, lebar minimum dan lebar susun atur laman web anda, dan boleh mendapatkan CSS yang boleh dimuat turun untuknya.
Sistem Grid Variabel
Sistem Grid Variabel direka dan dibangunkan oleh SprySoft dan berdasarkan Sistem Grid 960. Ia membolehkan pemaju dan pereka untuk menghasilkan grid tersuai dan kemudian memuat turun fail CSS yang disertakan berdasarkan grid itu.
Helaian & Skrin Lakaran
[Kembali ke atas]
Helaian Lakaran Rekabentuk Web Responsif
Alat ini berguna dalam memetakan peletakan pelbagai unsur dalam susun atur laman web anda di pelbagai peranti. Dengan bantuan peranti ini, anda boleh membuat idea tentang tempat untuk meletakkan elemen tapak web yang diperlukan untuk saiz dan resolusi skrin yang berbeza.
Wireframes responsif
Wireframes responsif adalah alat percubaan yang dibuat oleh James Mellers dari Adobe. Ia dibina dengan hanya HTML dan CSS (tiada imej atau JS digunakan) yang boleh anda gunakan untuk memvisualisasikan bagaimana reka bentuk responsif anda akan kelihatan seperti pada penyemak imbas sebenar pelbagai komputer dan peranti mudah alih.
StyleTiles
Ubin Gaya memberikan anda cara untuk membangunkan idea tentang bagaimana sebuah laman web kelihatan seperti, bergantung kepada gaya rumit yang dimainkan. Ia memberikan anda peluang untuk aliran kerja reka bentuk responsif yang sempurna dan juga keupayaan untuk mengintegrasikan maklum balas pelanggan.
Plugin JavaScript & jQuery
[Kembali ke atas]
Adapt.Js
Adapt.js adalah penyelesaian Javascript dan alternatif yang sangat baik untuk pertanyaan media CSS. Menggunakan pendekatan @media adalah amalan yang baik, tetapi ini tidak berfungsi untuk semua pelayar. Nathan Smith, pencipta Sistem Grid 960, mengeluarkan Adapt.js, perpustakaan javascript yang sangat ringan untuk mengatasi masalah ini.
Isotop
Isotop adalah plugin jQuery yang menakjubkan, yang membuktikan sangat berguna semasa merancang reka bentuk responsif. Ia bukan sahaja membantu menyusun semula elemen halaman apabila tetingkap penyemak imbas saiznya atau saiz skrin lebih kecil, tetapi ia juga membantu menapis unsur-unsur tersebut.
Masonry
Masonry adalah plugin jQuery yang sangat baik, yang digunakan untuk membuat susunan yang dinamik dan adaptif. Plugin ini membantu menyusun semula unsur-unsur dalam reka bentuk responsif anda, supaya mereka boleh lebih baik di tempat terbuka di grid.
Respond.js
Respond.js adalah skrip cepat dan ringan (3 Kb minified dan 1 Kb gzipped), yang tujuan utamanya adalah untuk membolehkan reka bentuk web responsif pada mereka yang tidak menyokong CSS3 Media Queries, seperti pelayar IE.
TinyNav.js
TinyNav.js adalah plugin jQuery kecil dan ringan, hanya 362 bait, yang menukar senarai navigasi besar ke dalam menu dropdown kecil untuk skrin yang lebih kecil.
Plugin jQuery Wookmark
Wookmark adalah plugin jQuery yang mengesan saiz tetingkap penyemak imbas dan secara automatik menyusun unsur-unsur halaman menjadi lajur. Anda juga boleh melihat pratonton langsung di bahagian bawah halaman itu sendiri.
Ujian & Pratonton
[Kembali ke atas]
ProtoFluid
ProtoFluid adalah alat prototaip berasaskan web yang membolehkan anda menguji prototaip laman web anda dalam pelbagai saiz dan resolusi skrin. Taipkan URL, pilih peranti (atau mana-mana dimensi khusus) dan tekan pelancaran. Oleh kerana ia adalah alat berasaskan web, ia juga membolehkan anda menggunakan sambungan lain seperti FireBug.
Responsif
Responsive.Is dibuat oleh TypeCast alat emulator pelayar lain, yang boleh anda gunakan untuk menguji reka bentuk responsif anda. Hanya taip URL, dan ia akan menukar saiznya secara automatik bergantung pada peranti yang anda pilih.
Responsivepx.Com
ResponsivePx adalah alat yang hebat untuk menguji reka bentuk laman web responsif anda. Ciri utama yang membezakannya daripada orang lain, ialah keupayaan untuk mengubah saiz pixel-by-pixel laman web. Ciri hebat ini, akan membolehkan anda mengenal pasti titik putus dan juga menguji bagaimana pertanyaan media CSS berfungsi di laman web anda.
Alat Pengujian Reka Bentuk Web Responsif
Alat penguji yang hebat, yang membolehkan anda melihat laman web responsif anda dalam pelbagai saiz skrin serentak dalam satu skrin, semasa anda membina atau merekabentuknya. Saya suka alat ini terutamanya kerana ia menunjukkan semua resolusi skrin bersebelahan yang menjadikannya lebih mudah untuk debug.
ReView.Js
ReView adalah sistem viewport yang dinamik, dibangunkan dalam JavaScript tulen, yang memberi anda pengalaman tontonan hebat untuk reka bentuk Web responsif anda.
Screenfly
Screenfly oleh QuirkTools, adalah alat yang menakjubkan yang membolehkan anda melihat laman web responsif anda dalam pelbagai peranti: Desktop, Tablet, Mobile dan TV. Ia juga mempunyai pilihan untuk membolehkan atau melumpuhkan menatal atau bahkan untuk memutar paparan.
Screenqueri.es
Screenqueri.es adalah alat uji reka bentuk responsif piksel sempurna. Hanya masukkan alamat laman web yang ingin anda periksa, dan alat ini akan menunjukkan tapak web dalam pelbagai saiz skrin mengikut peranti. Anda juga boleh mengubah saiz saiz pixel demi pixel secara manual untuk mengenal pasti titik putus.
The Responseator
Uji tapak anda dalam pelbagai peranti dari iPhone dan iPad, ke Kindle dan pada Android pada Responsif. Ia juga menunjukkan laman web anda dalam mod potret dan landskap. Saya suka alat ini lebih banyak kerana garis besar peranti yang dipaparkan pada halaman, yang membawa lebih banyak makna kepada keseluruhan proses.
Slider
[Kembali ke atas]
Blueberry
Blueberry adalah slaid imej jQuery sumber terbuka yang hebat, yang ditulis khusus untuk susun atur cecair atau responsif.
Elastislide
Mahu karusel yang secara automatik akan menyesuaikan diri dengan saiz skrin apabila tetingkap penyemak imbas saiznya atau apabila anda berada dalam skrin yang lebih kecil? Elastislide adalah plugin jQuery yang paling sesuai untuk keperluan anda.
Slider CSS3 Responsif
Ini adalah gelangsar CSS3 responsif tulen yang boleh menyesuaikan diri dengan saiz skrin dan resolusi skrin dengan mudah. Perkara yang bagus tentang gelangsar ini ialah, anak panah masuk ke dalam kotak apabila saiz skrin peranti cukup kecil. Tidak diperlukan JavaScript.
ResponsiveSlides.Js
ResponsiveSlides.Js adalah plugin jQuery yang sangat mudah dan sangat ringan (hanya 1Kb) yang mencipta gelangsar responsif menggunakan senarai yang tidak disusun.Ia berfungsi pada pelbagai pelayar, juga pada IE6 dan ke atas.
Lain-lain
[Kembali ke atas]
Imej Adaptif
Imej Adaptif adalah alat dalam talian untuk reka bentuk web responsif, yang mengesan saiz skrin pelawat dan mencipta, cache dan menyampaikan imej yang diselaraskan berdasarkan saiz dan resolusi skrin.
FitText.Js
FitText.js adalah alat javascript kecil, yang membolehkan saiz semula teks dan tajuk utama automatik apabila tetingkap penyemak imbas diubah saiznya. Tidak ada lagi kebimbangan mengenai saiz teks yang tidak sepadan dengan alat ini.
FitVid.Js
Mahu mempertahankan semula video terbenam apabila tetingkap penyemak imbas diubah saiz atau peranti mempunyai resolusi yang lebih kecil? FitVid.Js boleh membantu anda menyalin ini. Ia adalah plugin jQuery ringan, mudah, mudah digunakan yang digunakan untuk mencapai video terbenam cecair lancar.
Retina Images
Imej Retina adalah penyelesaian javascript yang hebat, yang secara automatik akan berfungsi @ 2X lebih besar, imej resolusi tinggi apabila dilihat pada paparan retina. Apa yang perlu anda lakukan ialah meletakkan versi resolusi tinggi setiap imej dan setiap imej, dan ia akan menguruskan yang lain.
Grid Foto Responsif Lancar
Grid Foto Responsif Lancar memaparkan imej ke tepi di tepi pelayar, tanpa sebarang jurang di antara imej. Foto-foto itu berjubin dan mereka mengalir dari kiri ke kanan sepanjang halaman dalam lajur. Bilangan lajur menyesuaikan dengan sewajarnya apabila tetingkap pelayar diubah saiznya.
SlabText
SlabText adalah plugin atau alat jQuery oleh Brian McAllister berdasarkan algoritma slabText, yang memisahkan tajuk utama ke dalam baris sebelum mengubah saiz setiap baris untuk mengisi ruang yang ada. Ia agak serupa dengan plugin FitText.Js dalam tindakan.
Zurb - ResponsiveTables
Pernahkah anda tertanya-tanya bagaimana menangani jadual data besar dalam reka bentuk responsif? Zurb, combo CSS / JS memberi anda jawapan; ia mengambil jadual data dan mengubahnya supaya mereka tidak memecahkan susun atur responsif pada peranti skrin kecil.
Categorizr
Categorizr adalah skrip PHP yang sangat kecil, memberikan pelawat anda dengan pengalaman web yang lebih disasarkan. Ia akan membantu anda menyampaikan reka bentuk khusus peranti untuk Tablet, TV, Mudah Alih atau Desktop.
Bookmarklet Kueri Media
Bookmarklet Kueri Media menunjukkan kepada anda apa saiz paparan viewport semasa dan pertanyaan media yang dipecat hanya untuknya.
Kalkulator Responsif
Kalkulator Responsif adalah alat dalam talian yang sangat mudah yang dapat membantu anda mengubah pixel ke dalam peratusan sambil merancang laman web responsif anda.
Up Next week
Dalam minggu kedua siri ini, kami akan mengharungi tutorial anda yang akan membawa anda ke Reka Bentuk Web Responsif (RWD).
Jangan ketinggalan.
