50 корисних адаптивних інструментів веб-дизайну для дизайнерів
За останні кілька днів, ми показали вам деякі з кращих WordPress і Joomla відповіді теми, які можна завантажити і використовувати на своєму сайті. Сьогодні ми дамо вам інструментів. Складаються з фреймворків, сервісів і скриптів для завантаження, ми вважаємо, що вони зможуть допомогти у реагуванні на веб-розробку.
Щоб полегшити перегляд усього списку інструментів, ми розставили їх за такими розділами:
- Grid & Frameworks
- Ескіз аркушів і каркасів
- Плагіни JavaScript і jQuery
- Тестування та попередній перегляд
- Повзунки
- Інші
Grid & Frameworks
[Повернутися до початку]
Колонний
Columnal - це проект Pulp + Pixels, який був запозичений у cssgrid.net, тоді як деякі коди натхнення були взяті з 960.gs. Columnal багато допомагає у реагуванні на веб-дизайн, роблячи гнучкі сітки динамічно змінюватися, коли змінюється розмір вікна веб-переглядача..
Скелет
Скелет - це простий і потужний CSS-фреймворк, який в основному сподобався розробникам і дизайнерам через його простоту і ефективність. Тут немає жодного важкого підйому з Javascript, тільки хороший і чистий CSS з чистою документацією.
LessFramework 4
Менше рамки більш-менш рамки, в ім'я її творця. Це адаптивна система CSS grid, заснована на використанні вбудованих CSS-медіа-запитів, що значно полегшує розробку адаптивних веб-сайтів..
Система семантичної сітки
Система Semantic Grid використовується для розробки адаптивних макетів сітки. Він використовує попередньо оброблені розширення CSS, такі як LESS, SCSS або Stylus, щоб забезпечити максимальну ефективність. Можна вибрати ширину стовпців і жолобів, вибрати кількість стовпців і переключитися між пікселями і відсотками.
Система "Золота сітка"
Система Golden Grid - це система рідинних сіток, яка служить відправною точкою вашого чуйного веб-дизайну. Це дає можливість веб-сайту розміщувати красиві сторінки розміром від 240 до 2560 пікселів.
320 і Вгору
320 і Up - це CSS-запити, що є початковим шаблоном для вашого чуйного дизайну. Звідси випливає зовсім зворотний підхід, ніж кілька інших доступних котлоагрегатів.
Inuit.css
Inuit.css - це CSS-фреймворк, який надзвичайно простий у використанні, навіть для новачків. Вона має мінімалістичний підхід, тому вам потрібно мати справу тільки з необхідними речами, але, якщо це необхідно, його можна розширити, використовуючи декілька доступних плагінів..
Gridless
Gridless - це шаблон для створення чуйних веб-сайтів із чудовим типографікою. Цей інструмент фокусується на прогресивному розвитку проекту, і він служить відправною точкою будь-якого дизайну.
1140 Сітка CSS
1140 CSS Grid - це чудова система сітки CSS, розроблена дизайнером Мельбурну Енді Тейлором, яка дозволяє вашій конструкції ідеально підходити під 1140px для великих моніторів, а макет вашої рідини буде легко пристосовуватися до інших менших дозволів з дуже невеликою додатковою роботою.
1KBCSSGrid
1KB Grid CSS, спроектований Тайлером Тейтом, є простим і легким генератором CSS Grid. Це дозволить вам встановити кількість стовпців, ширину стовпців і ширину жолоба, і ви можете отримати завантажуваний CSS для сітки веб-сайтів.
Bootstrap
Bootstrap, створений і підтримуваний Марком Отто і Джейкобом Торнтоном в Twitter, є відмінним набором елементів інтерфейсу користувача, макетів і інструментів JavaScript, вільно доступних для завантаження та використання у ваших проектах веб-дизайну..
Калькулятор рідинної сітки
Цей простий інструмент допоможе вам швидко захопити CSS вашого дизайну веб-сайту рідини.
Рідинні сітки
Fluid Grid - це простий, але корисний фреймворк, який створює відповідні макети на основі 6, 7, 8, 9, 10, 12 або 16 стовпців.
Flurid
Flurid є простим і дуже корисним крос-браузерним каркасом CSS з 16 колонками. Крім того, він не приховує пікселі в полях.
Gridset
Gridset - це інструмент для створення сіток будь-якого типу, таких як, стовпчасті, асиметричні, фіксовані, співвідношення, складні, чуйні і багато іншого. Цей інструмент Марка Болтона, як і раніше, знаходиться в бета-версії, але виявляється багатообіцяючим. І я згадав, що його використання настільки ж просте, як вбудовування посилання.
Gridpak
Gridpak є онлайн-реагує генератор сітки, де кількість стовпців, відступу і жолоб може бути змінена, і користувальницькі точки зупинки можуть бути додані. CSS створюється інструментом і готується до завантаження. Він також надає шаблони сітки PNG, які можна використовувати для розробки цілей у Photoshop.
SimpleGrid
SimpleGrid, розроблений Майклом Куном, є дуже простим і простим CSS-фреймворком для створення нескінченних макетів на основі сітки. За замовчуванням SimpleGrid готується до 4 різних діапазонів розмірів екрана.
Сусі
Susy від Oddbird, подібна за діями з системою Semantic Grid. Вона не використовує додаткової розмітки або будь-яких інших спеціальних класів, але призначена тільки для користувачів Saas та її розширення Compass.
Крихітна сітка рідини
Tiny Fluid Grid - чудова веб-програма, яка допоможе вам інтерактивно визначити систему сітки вашого сайту. Ви можете встановити кількість стовпців, відсоток жолобів, мінімальну та максимальну ширину макета вашого веб-сайту, а також отримати CSS для завантаження.
Змінна система сітки
Змінна система сітки розроблена і розроблена компанією SprySoft і заснована на системі Grid 960. \ t Це дозволяє розробникам і дизайнерам генерувати власну сітку, а потім завантажувати супровідний CSS-файл на основі цієї сітки.
Ескіз аркушів і каркасів
[Повернутися до початку]
Адаптивний веб-дизайн ескіз аркушів
Цей інструмент корисний для відображення розташувань різних елементів у макеті веб-сайту на різних пристроях. За допомогою цього пристрою можна сформувати уявлення про те, де розмістити необхідні елементи веб-сайту для різних розмірів екрану та дозволів.
Чуйний каркас
Responsive Wireframes є експериментальним інструментом, створеним Джеймсом Меллером з Adobe. Він побудований тільки з HTML і CSS (не використовувалися жодні зображення або JS), які можна використовувати для візуалізації того, як буде виглядати ваш адаптивний дизайн на реальних веб-переглядачах різних настільних комп'ютерів і мобільних пристроїв..
Стилістики
Стиль плитки дає вам можливість розробити уявлення про те, як буде виглядати веб-сайт, незалежно від складних стилів, які входять у гру. Це дає вам можливість досконало реагувати на робочий процес дизайну, а також можливість інтегрувати відгуки клієнтів.
Плагіни JavaScript і jQuery
[Повернутися до початку]
Adapt.Js
Adapt.js - це рішення Javascript і прекрасна альтернатива CSS-запитам. Використання підходу @media є гарною практикою, але це не працює для всіх браузерів. Натан Сміт, творець 960 Grid System, випустив Adapt.js, дуже легку JavaScript бібліотеку для подолання цієї проблеми.
Ізотоп
Isotope - дивовижний плагін jQuery, який виявляється дуже корисним при розробці адаптивного дизайну. Це не тільки допомагає перевпорядкувати елементи сторінки, коли змінюється розмір вікна веб-переглядача, або зменшується розмір екрану, але також допомагає фільтрувати ці елементи.
Масонство
Масонство - відмінний плагін jQuery, який використовується для створення динамічних і адаптивних макетів. Цей плагін допомагає перевпорядкувати елементи у своєму чутливому дизайні, щоб вони могли краще підходити до відкритих місць на сітці.
Respond.js
Respond.js - це швидкий і легкий скрипт (з розширеною 3 Кб і 1 Кб gzipped), головною метою якого є забезпечення швидкого веб-дизайну для тих, які не підтримують CSS3 Media Queries, як, наприклад, браузери IE.
TinyNav.js
TinyNav.js - це невеликий і легкий плагін jQuery, лише 362 байта, який перетворює великі списки навігації в невеликі меню, що випадають, для невеликих екранів.
Модуль Wookmark jQuery
Wookmark - це плагін jQuery, який визначає розмір вікна браузера та автоматично розміщує елементи сторінки в стовпці. Ви також можете побачити перегляд у прямому ефірі внизу сторінки.
Тестування та попередній перегляд
[Повернутися до початку]
ProtoFluid
ProtoFluid - це інструмент для створення прототипів на веб-сайті, який дозволяє протестувати прототипи вашого сайту в різних розмірах екранів і розділах. Просто введіть URL-адресу, виберіть пристрій (або будь-які користувацькі розміри) і натисніть запуск. Оскільки це веб-інструмент, він також дозволяє використовувати інші розширення, такі як FireBug.
Responsive.Is
Responsive.Is створюється іншим інструментом емулятора веб-переглядача TypeCast, який можна використовувати для перевірки відповідного дизайну. Просто введіть URL-адресу, і вона автоматично змінить її розмір залежно від вибраного пристрою.
Responsivepx.Com
ResponsivePx - це приголомшливий інструмент для тестування вашого чуйного дизайну сайту. Головною особливістю, що відрізняє її від інших, є її здатність змінювати розмір сайту піксель-за-пікселем. Ця чудова функція дозволить вам визначити точки зупину, а також перевірити роботу медіа-запитів CSS на вашому сайті.
Чуйний інструмент тестування веб-дизайну
Дивовижний інструмент тестування, який дозволяє вам одночасно переглядати веб-сайт, що відповідає, у різних розмірах екрану в одному екрані, під час їх створення або розробки. Мені подобається цей інструмент, головним чином тому, що він показує всі роздільну здатність екрана пліч-о-пліч, що полегшує налагодження.
ReView.Js
ReView - це динамічна система перегляду, розроблена в чистому JavaScript, що дає вам фантастичний досвід перегляду для вашого чуйного веб-дизайну.
Screenfly
Screenfly від QuirkTools, це дивовижний інструмент, який дозволить вам переглядати свій відгук на веб-сайті в різних пристроях: настільних, планшетних, мобільних і телевізійних. У ньому також є опції для вмикання або вимикання прокрутки або навіть для обертання дисплея.
Screenqueri.es
Screenqueri.es - це чудовий піксельний інструмент для тестування дизайну. Просто введіть будь-яку адресу веб-сайту, яку потрібно перевірити, і цей інструмент покаже веб-сайт у різних розмірах екрану відповідно до пристрою. Також можна вручну змінити розмір пікселя за пікселем, щоб визначити точки зупину.
Відповідач
Перевірте свій сайт в різних пристроях від iPhone і iPad, до Kindle і на Android на Responsinator. Він також показує ваш сайт як в портретному, так і в альбомному режимі. Мені подобається цей інструмент набагато більше через контури пристроїв, які відображаються на сторінці, що приносить більше значення всьому процесу.
Повзунки
[Повернутися до початку]
Чорниця
Blueberry - це фантастичний слайдер зображення з відкритим кодом jQuery, який написаний спеціально для роботи з текучими або чуйними макетами.
Еластичність
Потрібна карусель, яка автоматично змінюватиметься на розмір екрану, коли змінюватиметься розмір вікна браузера або коли ви знаходитесь на меншому екрані? Elastislide є найбільш підходящим плагіном jQuery для ваших потреб.
Чуйний повзунок CSS3
Це чистий повзунок CSS3, який з легкістю може адаптуватися до будь-якого розміру екрану та дозволу екрану. Хороша річ цього слайдера полягає в тому, що стрілки йдуть всередину вікна, коли розмір екрана пристрою досить малий. JavaScript не потрібний.
ResponsiveSlides.Js
ResponsiveSlides.Js є дуже простим і надзвичайно легким (тільки 1 Кб) плагіном jQuery, який створює слайдер, що відповідає за використання невпорядкованих списків..
Інші
[Повернутися до початку]
Адаптивні зображення
Адаптивні зображення - це онлайновий інструмент для реагування веб-дизайну, який визначає розмір екрану відвідувачів, створює, кешує та надає зображення, що повторюється, на основі розміру екрану та роздільної здатності.
FitText.Js
FitText.js - це невеликий інструмент JavaScript, який дозволяє автоматично змінювати розмір тексту та заголовків, коли змінюється розмір вікна браузера. Більше не турбуйтеся про невідповідність розміру тексту з цим інструментом на борту.
FitVid.Js
Хочете змінити розмір вбудованого відео, коли змінюється розмір вікна веб-переглядача, або пристрій має меншу роздільну здатність? FitVid.Js може допомогти вам досягти цього. Це легкий, простий, легкий у використанні плагін jQuery, що використовується для досягнення вбудованих відео з шириною рідини.
Зображення сітківки
Зображення сітківки - це чудове рішення JavaScript, яке автоматично подає @ 2X більші зображення з високою роздільною здатністю при перегляді на дисплеї сітківки. Все, що вам потрібно зробити, це поставити версію з високою роздільною здатністю кожного зображення, і вона буде керувати іншим.
Безшовної чуйним фото сітки
Безшовна реагуюча сітка фотографій відображає зображення від краю до краю в браузері без будь-яких проміжків між зображеннями. Фотографії викладені плиткою, і вони протікають зліва направо по всій сторінці у стовпцях. Кількість стовпців, відповідно, змінюється відповідно до розміру вікна веб-переглядача.
SlabText
SlabText - це плагін JQuery або інструмент від Брайана МакАллістера, заснований на алгоритмі slabText, який розбиває заголовки на рядки, перш ніж змінювати кожен рядок, щоб заповнити доступний простір. Це дуже схоже на дію плагіна FitText.Js.
Zurb - ResponsiveTables
Ви коли-небудь замислювалися, як мати справу з великими таблицями даних у реагувальному дизайні? Zurb, комбо CSS / JS дає вам відповідь; він приймає таблиці даних і модифікує їх так, щоб вони не порушували адаптивне компонування на пристроях з меншими екранами.
Категорія
Categorizr - це дуже маленький скрипт PHP, який надає відвідувачам більш цільовий веб-досвід. Це допоможе вам доставити спеціальні пристрої для планшетів, телевізорів, мобільних пристроїв або стільниць.
Медіа запит букмарклет
Закладка медіазапитів показує, який розмір поточного вікна перегляду та який медіа-запит було запущено.
Відповідний калькулятор
Responsive Calculator - це дуже простий онлайн-інструмент, який допоможе вам перетворити пікселі у відсотки при розробці вашого сайту.
На наступному тижні
У другий тиждень цієї серії, ми будемо бринінг вас підручники, які дійсно приведе вас в Responsive Web Design (RWD).
Не пропустіть.
