50 Полезни Отзивчиви инструменти за уеб дизайн за дизайнери
През последните няколко дни ви показахме някои от най-добрите отзиви на WordPress и Joomla, които можете да изтеглите и използвате на сайта си. Днес ще ви дадем инструментите. Представлява рамки, услуги и скриптове за изтегляне, смятаме, че те ще бъдат от голяма полза, когато става въпрос за отзивчиво уеб програмиране.
За да направим по-лесно спускането на целия списък с инструменти, ние ги категоризираме в следните секции:
- Мрежи и рамки
- Листове за скици и каркаси
- Приставки за JavaScript и jQuery
- Тестване и предварителен преглед
- плъзгачи
- Други
Мрежи и рамки
[Върнете се в началото]
Columnal
Columnal е проект на Pulp + Pixels, който е заимстван от cssgrid.net, а някои вдъхновения за код са взети от 960.gs. Columnal ви помага много в отзивчивия ви уеб дизайн, като ги прави гъвкави, за да се променят динамично, когато размерът на прозореца на браузъра се промени.
скелет
Скелетът е проста и мощна CSS рамка, която се харесва предимно от разработчиците и дизайнерите, поради своята простота и ефективност. Тук няма никакво тежко повдигане с Javascript, само добър и чист CSS с чиста документация.
LessFramework 4
Less Framework е повече или по-малко рамка, в името на неговия създател. Това е адаптивна CSS мрежова система, базирана на използване на вградени CSS медийни запитвания, което прави разработването на отзивчиви сайтове много по-лесно..
Система за семантична мрежа
Системата за семантична мрежа се използва за проектиране на адаптивни мрежови оформления. Той използва предварително обработени CSS разширения като LESS, SCSS или Stylus, за да осигури максимална ефективност. Можете да изберете ширини на колони и канали, да изберете броя на колоните и да превключите между пикселите и процентите.
Златна система
Golden Grid System е система от флуидни мрежи, която служи за отправна точка на вашия отзивчив уеб дизайн. Тя дава възможност на сайта да обслужва добре изглеждащи страници с размери от 240 до 2560 пиксела.
320 и нагоре
320 и Up е CSS медийна заявка, която служи като начален шаблон за вашия отзивчив дизайн. Той следва напълно обратен подход, отколкото няколко други налични бойлери.
Inuit.css
Inuit.css е CSS рамка, която е изключително лесна за използване, дори и за начинаещи. Той има минималистичен подход, така че трябва да се справяте само с неща, които са необходими, но ако е необходимо, може да се разшири с няколко налични приставки..
Gridless
Gridless е шаблон за създаване на отзивчиви и крос-браузър уебсайтове с красива типография. Този инструмент се фокусира върху прогресивното развитие на проекта и служи като отправна точка за всеки проект.
1140 CSS Grid
1140 CSS Grid е страхотна CSS мрежа, проектирана от дизайнера на Мелбърн Анди Тейлър, която позволява на вашия дизайн да пасва идеално на 1140px за големи монитори, а оформлението на течността ще се адаптира безпроблемно към други по-малки резолюции с много малко работа.
1KBCSSGrid
1KB CSS грид, проектиран от Tyler Tate, е прост и лек генератор на CSS грид. Тя ще ви позволи да зададете броя на колоните, ширината на колоните и ширината на канавката и можете да получите CSS за изтегляне на мрежата от уебсайтове..
за първоначално зареждане
Bootstrap, създаден и поддържан от Марк Ото и Джейкъб Торнтън в Twitter, е отличен набор от елементи на потребителския интерфейс, оформления и javascript инструменти, които са свободно достъпни за изтегляне и използване във вашите проекти за уеб дизайн..
Калкулатор за флуидна мрежа
Този прост инструмент ще ви помогне бързо да вземете CSS на вашия уеб дизайн на течната мрежа.
Течни решетки
Fluid Grid е проста, но полезна рамка за флуидна мрежа, която създава отзивчиви оформления, базирани на 6, 7, 8, 9, 10, 12 или 16 колони.
Flurid
Flurid е прост и много полезен крос-браузър CSS мрежова рамка с до 16 колони. Освен това не скрива пикселите в полетата.
Gridset
Gridset е инструмент за изработване на решетки от всякакъв тип, като например колонен, асиметричен, фиксиран, съотношение, състав, отзивчив и др. Този инструмент от Mark Boulton, все още е в бета версия, но се оказва обещаващ. И споменах ли, че използването му е толкова просто, колкото вграждането на връзка.
Gridpak
Gridpak е онлайн реагиращ генератор на мрежи, където броят на колоните, подложката и канавката могат да бъдат променяни и могат да се добавят потребителски точки на прекъсване. CSS се генерира от инструмента и е готов за изтегляне. Той също така предоставя PNG решетъчни шаблони, които могат да бъдат използвани за целите на проектирането в Photoshop.
SimpleGrid
SimpleGrid, разработен от Майкъл Кун, е много проста и ясна CSS рамка за създаване на безкрайни базирани на мрежата оформления. По подразбиране SimpleGrid е подготвен за 4 различни диапазона на размери на екрана.
Сузи
Susy от Oddbird, е подобна на действието на системата за семантична мрежа. Той не използва допълнителна маркировка или други специални класове, а е предназначена само за потребителите на Saas и нейното разширение Compass.
Малка течна решетка
Tiny Fluid Grid е страхотно уеб приложение, което може да ви помогне да определите мрежовата система на уебсайта си по интерактивен начин. Можете да зададете броя на колоните, процента на каналите, минималната и максималната ширина на оформлението на уебсайта си и да получите CSS за изтегляне за него.
Система с променлива мрежа
Системата за променлива мрежа е проектирана и разработена от SprySoft и е базирана на системата 960 Grid. Тя позволява на разработчиците и дизайнерите да генерират персонализирана мрежа и след това да изтеглят придружаващия CSS файл, базиран на тази мрежа.
Листове за скици и каркаси
[Върнете се в началото]
Отзивчиви скици за уеб дизайн
Този инструмент е полезен при определяне на разположенията на различни елементи в оформлението на уебсайта Ви в различни устройства. С помощта на това устройство можете да създадете представа за това къде да поставите необходимите елементи на уебсайт за различни размери на екрана и резолюции.
Отзивчиви Wireframes
Responsive Wireframes е експериментален инструмент, създаден от Джеймс Мелер от Adobe. Той е изграден само с HTML и CSS (без изображения или с JS), които можете да използвате, за да визуализирате как ще изглежда вашият отзивчив дизайн на действителните браузъри на различни настолни и мобилни устройства.
StyleTiles
Style Tiles ви дава възможност да развиете представа за това как да изглежда един уебсайт, независимо от сложните стилове, които влизат в игра. Тя ви дава възможност за перфектно реагиране на работния процес и способността да интегрирате обратните връзки на клиентите.
Приставки за JavaScript и jQuery
[Върнете се в началото]
Adapt.Js
Adapt.js е решение на Javascript и отлична алтернатива на медийните заявки на CSS. Използването на @media подход е добра практика, но това не работи за всички браузъри. Nathan Smith, създателят на 960 Grid System, пусна Adapt.js, много лека JavaScript библиотека, за да преодолее този проблем.
изотоп
Isotope е удивителен jQuery плъгин, който се оказва много полезен при проектирането на отзивчив дизайн. Тя не само помага да се пренареждат елементите на страницата, когато се променя размерът на прозореца на браузъра или размерът на екрана е по-малък, но също така помага да се филтрират тези елементи.
зидария
Масонството е отличен jQuery плъгин, който се използва за създаване на динамични и адаптивни оформления. Този плъгин помага за пренареждане на елементите във вашия отзивчив дизайн, така че те могат да се впишат по-добре в отворените точки на мрежата.
Respond.js
Respond.js е бърз и лек скрипт (3 Kb, подсилен и 1 Kb gzipped), чиято основна цел е да даде възможност за отзивчив уеб дизайн в тези, които не поддържат CSS3 Media Queries, като IE браузъри.
TinyNav.js
TinyNav.js е малък и лек плъгин jQuery, само 362 байта, който преобразува големите списъци за навигация в малки падащи менюта за по-малки екрани.
Плъгин за уикинг
Wookmark е плъгин на jQuery, който открива размера на прозореца на браузъра и автоматично подрежда елементите на страницата в колони. Можете също да видите преглед на живо в долната част на самата страница.
Тестване и предварителен преглед
[Върнете се в началото]
ProtoFluid
ProtoFluid е уеб-базирано средство за създаване на прототипи, което ви позволява да тествате прототипите на вашия уебсайт в различни размери на екрана и резолюции. Просто напишете URL адреса, изберете устройството (или всички потребителски размери) и натиснете старта. Тъй като той е уеб-базиран инструмент, той също ви позволява да използвате други разширения като FireBug.
Responsive.Is
Responsive.Is е създаден от TypeCast друг инструмент за емулатор на браузър, който можете да използвате, за да тествате отзивчивия си дизайн. Просто напишете URL и той автоматично ще промени размера му в зависимост от устройството, което изберете.
Responsivepx.Com
ResponsivePx е страхотно средство за тестване на отзивчивия ви уеб сайт. Основната характеристика, която я отличава от другите, е способността му да преоразмерява уебсайта. Тази невероятна функция ще ви позволи да идентифицирате точките на прекъсване, както и да тествате как работят медийните заявки на CSS във вашия сайт.
Отзивчиви инструменти за тестване на уеб дизайна
Страхотен инструмент за тестване, който може да ви позволи да разглеждате отзивчивия си уебсайт в различни размери на екрана едновременно в един екран, докато ги изграждате или проектирате. Харесва ми този инструмент главно, защото той показва всички резолюции на екрана рамо до рамо, което го прави по-лесно за отстраняване на грешки.
ReView.Js
ReView е динамична визуална система, разработена в чист JavaScript, което ви дава фантастично изживяване при гледане за вашия отзивчив уеб дизайн.
Screenfly
Screenfly от QuirkTools е невероятен инструмент, който ще ви позволи да преглеждате отзивчивия си уебсайт в различни устройства: Desktop, Tablet, Mobile и TV. Също така има опции за включване или изключване на превъртането или дори за завъртане на дисплея.
Screenqueri.es
Screenqueri.es е пиксел-перфектен инструмент за тестване на дизайн. Просто въведете адреса на уебсайта, който искате да проверите, и този инструмент ще покаже уебсайта в различни размери на екрана според устройството. Можете също така ръчно да промените размера на пиксела по пиксел, за да идентифицирате точките на прекъсване.
Отговорникът
Тествайте сайта си в различни устройства - от iPhone и iPad, до Kindle и от Android в Responsinator. Той показва и сайта ви в портретен и пейзажен режим. Този инструмент ми харесва много повече поради очертанията на устройствата, показани на страницата, което носи повече смисъл на целия процес.
плъзгачи
[Върнете се в началото]
Боровинка
Blueberry е фантастичен jQuery слайдер с отворен код, който е написан специално за работа с течни или отзивчиви оформления.
Elastislide
Искате ли карусел, който автоматично ще се приспособи към размера на екрана при промяна на размера на прозореца на браузъра или когато сте на по-малък екран? Elastislide е най-подходящият плъгин jQuery за вашите нужди.
Отзивчиви плъзгачи на CSS3
Това е чист CSS3 плъзгач, който може лесно да се адаптира към всеки размер на екрана и резолюция на екрана. Хубавото на този плъзгач е, че стрелките влизат в кутията, когато размерът на екрана на устройството е достатъчно малък. Не е необходим JavaScript.
ResponsiveSlides.Js
ResponsiveSlides.Js е много прост и изключително лек (само 1Kb) плъгин jQuery, който създава отзивчив плъзгач, използвайки неупоменати списъци. Той работи на широк кръг браузъри, също и на IE6 и.
Други
[Върнете се в началото]
Адаптивни изображения
Адаптивните изображения са онлайн инструмент за отзивчив уеб дизайн, който открива размера на екрана на посетителите и създава, кешира и доставя изображения с мащаб, въз основа на размера и резолюцията на екрана.
FitText.Js
FitText.js е малък инструмент на JavaScript, който позволява автоматично преоразмеряване на текст и заглавия при промяна на размера на прозореца на браузъра. Няма повече притеснения относно несъответствието на размера на текста с този инструмент на борда.
FitVid.Js
Искате ли да промените размера на вградените видеоклипове, когато размерът на прозореца на браузъра се промени или устройството е с по-малка разделителна способност? FitVid.Js може да ви помогне да постигнете това. Това е лек, прост, лесен за използване плъгин jQuery, използван за постигане на вградени видеофилми за ширина на флуида.
Изображения в ретината
Изображенията на ретината са страхотно решение за javascript, което автоматично ще показва @ 2 пъти по-големи изображения с висока резолюция, когато се гледа на дисплея на ретината. Всичко, което трябва да направите, е да поставите версия с висока резолюция на всяко едно изображение и тя ще управлява останалото.
Безшевни отзивчиви фото грид
Безпроблемната отзивчива фотографска решетка показва изображенията от край до край в браузъра, без никакви пропуски между изображенията. Снимките са облицовани и текат от ляво на дясно по цялата страница в колони. Броят на колоните се коригира съответно при промяна на размера на прозореца на браузъра.
SlabText
SlabText е jQuery плъгин или инструмент от Brian McAllister, базиран на алгоритъма на slabText, който разделя заглавията на редове преди да преоразмерява всеки ред, за да запълни наличното пространство. Тя е доста подобна на приставката FitText.Js в действие.
Zurb - ResponsiveTables
Чудили ли сте се как да се справите с големите таблици с данни в реагиращ дизайн? Zurb, CSS / JS комбо дава отговор; тя взема таблиците с данни и ги променя, така че да не прекъсва отзивчивото оформление на устройства с по-малък екран.
Categorizr
Categorizr е много малък PHP скрипт, който осигурява на посетителите ви по-целенасочено уеб изживяване. Тя ще ви помогне да доставите специфични за устройството модели за таблети, телевизори, мобилни устройства или настолни компютри.
Media Query Bookmarklet
Media Query Bookmarklet показва какъв е размерът на текущия изглед и коя медийна заявка е била уволнена.
Отзивният калкулатор
Отзивният калкулатор е много прост онлайн инструмент, който може да ви помогне да превърнете пикселите в проценти, докато проектирате вашия отзивчив уебсайт.
Нагоре Следващата седмица
През втората седмица на тази серия ще ви подготвим уроци, които наистина ще ви вкарат в Responsive Web Design (RWD).
Не го пропускайте.
