Підбірка корисних інструменту для створення адаптивних сайтів


Підбірка корисних інструменту для створення адаптивних сайтів

Традиційний дизайн з фіксованою шириною вже не в моді, багато хто хоче, щоб сайт відображався однаково на всіх пристроях: мобільних телефонах, планшетах, смартфонах і т.д? Сьогодні, як ніколи, популярна технологія адаптивного веб-дизайну (responsive web design), Тому ми пропонуємо Вашій увазі підбірку корисних інструментів, які значно спростять створення «універсального» сайту. Сподіваємося, Ви знайдете тут щось потрібне.

 

Якщо коротко, основними состaвляющімі створення responsive web design є:

1. Використання гумового типу макета;

2. Гумові зображення і відео;

3. Використання media queries;

4. Підхід Mobile First – «Спершу мобільні».

Отже, ось деякі інструменти, які допоможуть Вам у створенні адаптивного дизайну.

Інструменти для створення гумового типу макета

1. Golden Grid System – модульна сітка, яка використовує правила «золотого перетину». Змінює кількість колонок (від 4 до 18) в залежності від розміру екрана (від 240px до 2560px). Завантажити її можна тут.

2. Tiny Fluid Grid – генератор CSS-файлів для гратчастої розмітки сторінки. Недолік його в тому, що він має деякі обмеження.
Щоб завантажити сітку, встановіть кількість колонок, відстань між колонками, максимальну і мінімальну ширину і натисніть «Download».

3. 1140 CSS Grid – ще один сервіс для генерації адаптивної сітки. Підходить як для мобільних пристроїв,
так і для екранів з великою розширенням (за замовчуванням максимальна ширина сітки-1140px).

4. Columnal – є «реміксом» інших сіток з деякими змінами. Ідея адаптивної сітки взята з 1 140 CSS Grid, а ідея побудови колонок – з 960.gs. дивіться ДЕМО

 

5. Fluid 960 Grid System – гумовий шаблон, зроблений за допомогою системи 960 Grid. Завантажити його можна тут.

6. SimpleGrid – простий і зручний адаптивний шаблон CSS для побудови модульної сітки. Містить різні таблиці стилів для різних розмірів екрану (менше 720px, більше 720px, 985px, більше 985px, і більше 1235px).

7. BluCSS Framework – бібіліотека стилів CSS для адаптивного шаблону. Адаптується під екрани настільних комп’ютерів, ноутбуків, планшетів і мобільних пристроїв. За замовчуванням має ширину 1000px (її можна змінювати на потрібне значення)
За допомогою цієї бібліотеки можна створювати адаптивні зображення: для цього потрібно додати до зображення клас «blu_».

Інструменти для створення гумових зображень, відео, шрифту

8. Adaptive Images- дозволяє змінити розмір зображення в залежності від розміру екрана. 

9. Sencha –  дозволяє динамічно змінювати розмір зображення в залежності від
розміри екранів мобільних пристроїв (не збільшує розмір зображень!).

10. Seamless Responsive Photo Grid – еластична сітка для фотографій, які прилягають одна до одної. Дивіться демо.

11. Photo Swipe – це адаптивна галерея, яка була створена з метою забезпечення мобільних і сенсорних пристроїв.

12. Blueberry – це безкоштовний jQuer-слайдер, написаний спеціально для роботи адаптивним дизайном

13. Responsive jQuery Slider Plugin Flexslider – адаптивний слайдер. Простий у використанні, підтримується всіма основними браузерами.

14. FitVidJS – зручний плагін для створення еластичного відео.

15. PXtoEM.com – дуже зручний інструмент для конвертації пікселів в em

16. FitText – плагін, який робить шрифти гумовими.

17. Lettering.js – невеликий плагін для створення радикальної веб-типографіки.

Використання media queries;

18. Hardboiled CSS3 Media Queries – містить готові рішення css-стилів для пристроїв з різним розмірів екрану.

19.  Respond.js – допомагає Media Queries працювати в IE 6-8.

20. CSS3-mediaqueries-js – невеликий плагін, який допомагає Media Queries працювати у всіх браузерах

21. Mobile Boilerplate – одне з кращих рішень для побудови складних веб-додатків. Ви отримуєте не тільки крос-браузерні шаблон, сумісний з мобільними пристроями, а й підтримку старих Blackberry, Symbian і Windows Mobile.

Ссылка на основную публикацию