50 užitočných Responsive Web Design Tools pre návrhárov
V posledných dňoch sme vám ukázali niektoré z najlepších WordPress a Joomla reaktívnych tém, ktoré môžete stiahnuť a používať na svojich stránkach. Dnes vám to dáme nástrojov. Zhrnutie rámcov, služieb a skriptov, ktoré si môžete stiahnuť, si myslíme, že budú veľmi nápomocné, pokiaľ ide o rýchly vývoj webových aplikácií.
Aby sme zjednodušili zostavenie celého zoznamu nástrojov, zaradili sme ich do nasledujúcich sekcií:
- Grid a rámce
- Skicové listy a skelety
- Zásuvné moduly JavaScriptu a jQuery
- Testovanie a ukážka
- posuvníky
- iní
Grid a rámce
[Späť na začiatok]
Columnal
Columnal je projekt Pulp + Pixels, ktorý bol vypožičaný z cssgrid.net, zatiaľ čo niektoré inšpirácie boli prevzaté z 960.gs. Columnal vám veľa prispieva k vášmu flexibilnému dizajnu webových stránok tým, že vaše gridy budú flexibilné, aby sa dynamicky zmenili po zmene veľkosti okna prehliadača.
kostra
Skelet je jednoduchý a výkonný rámec CSS, ktorý je pre jeho jednoduchosť a efektívnosť obľúbený hlavne vývojármi a dizajnérmi. Tu nie je ťažké zdvíhanie pomocou Javascriptu, iba dobré a čisté CSS s čistou dokumentáciou.
LessFramework 4
Menej rámca je viac-menej rámec, v mene jeho tvorcu. Jedná sa o adaptačný systém CSS grid založený na využívaní dotykových médií CSS, čo uľahčuje vývoj odpovedajúcich webových stránok.
Sémantický systém
Sémantický systém mriežky sa používa na navrhovanie odpovedajúcich usporiadaní mriežky. Používa predpripravené rozšírenia CSS, ako je LESS, SCSS alebo Stylus, aby priniesli maximálnu efektivitu. Môžete vybrať šírky stĺpcov a žľabov, zvoliť počet stĺpcov a prepínať medzi pixelmi a percentami.
Systém Golden Grid
Systém Golden Grid je systém kvapaliny, ktorý slúži ako východiskový bod Vášho webového dizajnu. Umožňuje webovému serveru slúžiť dobre vyzerajúcim stránkam v rozmedzí od 240 do 2560 pixelov.
320 a hore
320 a Up je CSS mediálne dotazy, ktoré slúžia ako štartovacia šablóna pre váš citlivý dizajn. Nasleduje úplne obrátený prístup, ako k dispozícii niekoľko ďalších dosiek kotla.
Inuit.css
Inuit.css je CSS framework, ktorý je extrémne jednoduchý na používanie, a to aj pre nováčikov. Má minimalistický prístup, takže je potrebné zaoberať sa len potrebnými vecami, ale v prípade potreby môže byť rozšírená o niekoľko dostupných doplnkov.
Gridless
Gridless je štítok pre vytváranie citlivých a cross-browserových webových stránok s krásnou typografiou. Tento nástroj sa zameriava na progresívny rozvoj projektu a slúži ako východisko pre akýkoľvek dizajn.
1140 CSS Grid
1140 CSS Grid je skvelý CSS gridový systém navrhnutý dizajnérom Melbourne Andy Taylor, ktorý umožňuje vášmu dizajnu dokonale zapadnúť do 1140px pre veľké monitory a vaše rozloženie tekutín sa bez problémov prispôsobí iným menším rozlíšením s veľmi malou mimoriadnou prácou.
1KBCSSGrid
1KB CSS Grid navrhnutá spoločnosťou Tyler Tate je jednoduchý a ľahký generátor CSS Grid. Umožní vám nastaviť počet stĺpcov, šírku stĺpcov a šírku žliabkov a môžete získať stiahnuteľný CSS pre svoju webovú stránku.
bootstrap
Bootstrap, vytvorený a udržiavaný Mark Otto a Jacob Thornton na Twitteri, je vynikajúca sada prvkov používateľského rozhrania, rozloženie a nástroje JavaScriptu, ktoré sú voľne dostupné na stiahnutie a používanie vo vašich projektoch web dizajnu.
Kalkulačka kvapalnej siete
Tento jednoduchý nástroj vám pomôže rýchlo uchopiť CSS dizajnu webovej stránky kvapaliny.
Mriežky kvapalín
Fluidná mriežka je jednoduchá, ale užitočná štruktúra mriežky, ktorá vytvára reagujúce rozloženia založené na stĺpcoch 6, 7, 8, 9, 10, 12 alebo 16.
Flurid
Flurid je jednoduchý a veľmi užitočný sieťový rám CSS s viac ako 16 stĺpcami. A navyše nezakrýva pixely do okrajov.
Gridset
Gridset je nástroj na vytváranie mriežok akéhokoľvek typu, ako je stĺpcový, asymetrický, pevný, pomer, zložený, citlivý a viac. Tento nástroj Mark Boulton je stále v beta verzii, ale je sľubný. A spomenul som, že je to jednoduché ako vloženie odkazu.
Gridpak
Gridpak je on-line reagujúci generátor mriežky, kde je možné meniť počet stĺpcov, výplň a žľab, a môžu sa pridať vlastné zarážky. CSS je vygenerovaný nástrojom a pripravený na prevzatie. Poskytuje tiež šablóny siete PNG, ktoré je možné použiť na navrhovanie vo Photoshope.
SimpleGrid
SimpleGrid, vyvinutý Michaelom Kuhnom, je veľmi jednoduchý a priamočiare CSS rámec pre vytváranie nekonečných rozložení na gridoch. Štandardne je SimpleGrid pripravený na 4 rozdielne veľkosti obrazoviek.
Susy
Susy Oddbird, je podobný v akcii Sémantickej siete. Nepoužíva žiadne ďalšie označenia ani iné špeciálne triedy, ale je určený len pre používateľov Saasu a jeho rozšírenia Compass.
Tiny Fluid Mriežka
Tiny Fluid Grid je úžasná webová aplikácia, ktorá vám pomôže určiť interaktívny systém mriežky vašich webových stránok. Môžete nastaviť počet stĺpcov, percentuálny podiel odkvapového žliabku, minimálnu a maximálnu šírku rozloženia webových stránok a preň môžete získať CSS na stiahnutie.
Systém premennej siete
Systém Variable Grid System je navrhnutý a vyvinutý spoločnosťou SprySoft a je založený na systéme 960 Grid. Umožňuje vývojárom a dizajnérom generovať vlastnú mriežku a potom si stiahnúť sprievodný súbor CSS založený na tejto mriežke.
Skicové listy a skelety
[Späť na začiatok]
Nápovedačný dizajn webových náčrtov
Tento nástroj je užitočný pri mapovaní umiestnenia rôznych prvkov v rozložení vašich webových stránok v rôznych zariadeniach. Pomocou tohto zariadenia môžete vytvoriť predstavu o tom, kde umiestniť potrebné prvky webových stránok pre rôzne veľkosti a rozlíšenie obrazovky.
Reakčné drátové rámčeky
Responsive Wireframes je experimentálny nástroj, ktorý vytvoril James Mellers spoločnosti Adobe. Je zostavený iba s HTML a CSS (neboli použité žiadne obrázky alebo JS), ktoré môžete použiť na zobrazenie toho, ako by váš vzhľad reagoval na skutočných prehliadačoch rôznych pracovných staníc a mobilných zariadení.
StyleTiles
Štýl dlaždice vám dáva možnosť vytvoriť predstavu o tom, ako bude vyzerať webová stránka, nezávisle od komplikovaných štýlov, ktoré prichádzajú do hry. To vám dáva príležitosť pre perfektné reagovanie dizajnu workflow a tiež schopnosť integrovať spätnú väzbu klienta.
Zásuvné moduly JavaScriptu a jQuery
[Späť na začiatok]
Adapt.Js
Adapt.js je riešenie pre Javascript a vynikajúcu alternatívu k otázkam médií CSS. Používanie prístupu @media je dobrá prax, ale to nefunguje pre všetky prehliadače. Nathan Smith, tvorca systému 960 Grid System, vydal Adapt.js, veľmi ľahkú knižnicu javascript na prekonanie tohto problému.
izotop
Izotop je úžasný doplnok jQuery, ktorý sa ukáže ako veľmi užitočný pri navrhovaní citlivého dizajnu. Pomôže to nielen pri usporiadaní prvkov stránky, keď je veľkosť okna prehliadača zmenšená alebo veľkosť obrazovky je menšia, ale pomáha aj pri filtrácii týchto prvkov.
murivo
Murivo je vynikajúci doplnok jQuery, ktorý sa používa na vytváranie dynamických a prispôsobivých rozvrhnutí. Tento doplnok pomáha usporiadať prvky vo svojom prispôsobivom dizajne, aby sa lepšie prispôsobili otvoreným miestam na mriežke.
Respond.js
Respond.js je rýchly a ľahký skript (3 Kb minimalizovaný a 1 kb gzipped), ktorého hlavným cieľom je umožniť rýchlejší dizajn webových stránok v tých, ktoré nepodporujú mediálne dopyty CSS3, ako sú IE prehliadače.
TinyNav.js
TinyNav.js je malý a ľahký plugin jQuery, iba 362 bajtov, ktorý konvertuje veľké navigačné zoznamy do menších rozbaľovacích ponúk pre menšie obrazovky.
Wookmark jQuery Plugin
Wookmark je doplnok jQuery, ktorý rozpozná veľkosť okna prehliadača a automaticky usporiada prvky stránky do stĺpcov. Môžete tiež vidieť živý náhľad v spodnej časti stránky.
Testovanie a ukážka
[Späť na začiatok]
ProtoFluid
ProtoFluid je webový prototypový nástroj, ktorý vám umožní otestovať prototypy webových stránok v rôznych veľkostiach a rozlíšeniach obrazovky. Stačí zadať adresu URL, vybrať zariadenie (alebo vlastné dimenzie) a stlačte tlačidlo spustenia. Keďže je to webový nástroj, umožňuje vám tiež používať aj iné rozšírenia, ako je FireBug.
Responsive.Is
Responsive.Is vytvorený TypeCast iným nástrojom emulátora prehliadača, ktorý môžete použiť na otestovanie vášho reagujúceho návrhu. Stačí zadať adresu URL a automaticky sa zmení jej veľkosť v závislosti od zvoleného zariadenia.
Responsivepx.Com
ResponsivePx je úžasný nástroj na testovanie vášho rýchleho dizajnu webových stránok. Hlavnou funkciou, ktorá ho odlišuje od ostatných, je jeho schopnosť zmeniť veľkosť webových stránok pixelov podľa pixelov. Táto úžasná funkcia vám umožní identifikovať body prerušenia a tiež testovať, ako na vašich stránkach pracujú dotazy médií CSS.
Nápoveda Web Design Testovací nástroj
Úžasný nástroj na testovanie, ktorý vám umožní zobraziť vaše citlivé webové stránky v rôznych veľkostiach obrazoviek súčasne na jednej obrazovke, zatiaľ čo ich vytvárate alebo navrhujete. Páči sa mi tento nástroj hlavne preto, že ukazuje všetky rozlíšenia obrazovky side-by-side, čo uľahčuje ladenie.
ReView.Js
ReView je dynamický výhľadový systém vyvinutý v čistom javisku, ktorý vám ponúka fantastický zážitok zo sledovania vášho webového dizajnu.
Screenfly
Screenfly od spoločnosti QuirkTools je úžasný nástroj, ktorý vám umožní zobraziť vaše citlivé webové stránky v rôznych zariadeniach: Desktop, Tablet, Mobile a TV. Má tiež možnosti zapnúť alebo vypnúť rolovanie alebo dokonca otočiť displej.
Screenqueri.es
Screenqueri.es je pixel-perfektne reagujúci dizajnový testovací nástroj. Jednoducho zadajte akúkoľvek webovú adresu, ktorú chcete skontrolovať, a tento nástroj vykoná, zobrazí webovú stránku v rôznych veľkostiach obrazovky podľa zariadenia. Môžete tiež ručne zmeniť veľkosť pixelov za pixel na identifikáciu bodov prerušenia.
The Responsinator
Otestujte svoje stránky v rôznych zariadeniach z telefónu iPhone a iPad, do zariadenia Kindle a na systém Android na zariadení Responsinator. Zobrazuje tiež vaše stránky v režime na výšku aj na šírku. Páči sa mi tento nástroj oveľa viac, pretože sú obrysy zariadení zobrazených na stránke, čo prináša väčší význam celému procesu.
posuvníky
[Späť na začiatok]
čučoriedka
Blueberry je fantastický slider jQuery s otvoreným zdrojovým kódom, ktorý je napísaný tak, aby pracoval špeciálne pre tekuté alebo citlivé rozloženie.
Elastislide
Chcete zmeniť koliesko, ktoré sa automaticky prispôsobí veľkosti obrazovky po zmene veľkosti okna prehliadača alebo keď sa nachádzate na menšej obrazovke? Elastislide je najvhodnejší doplnok jQuery pre vaše potreby.
Odozva CSS3 Posuvník
Jedná sa o čisto citlivý posuvník CSS3, ktorý sa ľahko prispôsobí akejkoľvek veľkosti obrazovky a rozlíšenia obrazovky. Pekné na tomto posúvači je to, že šípky idú vo vnútri boxu, keď je veľkosť obrazovky zariadenia dostatočne malá. Nie je potrebný žiadny jazyk JavaScript.
ResponsiveSlides.Js
ResponsiveSlides.Js je veľmi jednoduchý a extrémne ľahký (len 1Kb) jQuery plugin, ktorý vytvára reagujúce jazdca pomocou neusporiadaných zoznamov. Pracuje na širokej škále prehliadačov, tiež na IE6 a hore.
iní
[Späť na začiatok]
Adaptívne obrázky
Adaptive Images je on-line nástroj pre citlivý web dizajn, ktorý detekuje veľkosť obrazovky návštevníkov a vytvára, ukladá do vyrovnávacej pamäte a dodáva zmenené obrázky na základe veľkosti a rozlíšenia obrazovky.
FitText.Js
FitText.js je malý nástroj pre javascript, ktorý umožňuje automatické zmenenie veľkosti textu a nadpisov pri zmene veľkosti okna prehliadača. Žiadne ďalšie obavy z nesúladu veľkosti textu s týmto nástrojom na palube.
FitVid.Js
Chcete zmeni vložené videá po zmene veľkosti okna prehliadača alebo pri menšom rozlíšení? FitVid.Js vám môže pomôcť dosiahnuť to. Jedná sa o ľahký, jednoduchý, ľahko použiteľný doplnok jQuery, ktorý sa používa na dosiahnutie vložených videoklipov so šírkou tekutiny.
Retina obrázky
Retina Obrázky je úžasné riešenie javascript, ktoré sa automaticky zobrazia na obrázkoch s vysokým rozlíšením, keď sú zobrazené na displeji sietnice. Jediné, čo musíte urobiť, je dať verziu každého rozlíšenia vo vysokom rozlíšení a všetko ostatné zvládne.
Bezproblémová citlivá fotografická sieť
Bezproblémová citlivá fotografická mriežka zobrazuje obrázky v prehľadávači bez okrajov medzi obrázkami. Fotografie sú dlaždené a pochádzajú z ľavej strany po celej stránke v stĺpcoch. Počet stĺpcov sa upraví podľa toho, ako sa zmenší veľkosť okna prehliadača.
SlabText
SlabText je plugin jQuery alebo nástroj od Briana McAllistera založený na algoritme slabého textu, ktorý rozdeľuje titulky do riadkov pred zmenou veľkosti každého riadku tak, aby vyplnil dostupný priestor. Je to docela podobný plugin FitText.Js v akcii.
Zurb - odpovedajúce tabuľky
Už ste niekedy premýšľali o tom, ako sa vyrovnať s veľkými tabuľkami dát v uspokojivom dizajne? Zurb, kombinácia CSS / JS vám dáva odpoveď; preberá tabuľky s údajmi a upravuje ich tak, aby neporušovali uspokojivé usporiadanie na zariadeniach s menšou obrazovkou.
Categorizr
Categorizr je veľmi malý PHP skript, ktorý poskytuje návštevníkom viac cielený webový zážitok. Pomôže vám poskytnúť návrhy špecifické pre zariadenie pre Tablet, TV, Mobile alebo Desktop.
Media Query Bookmarklet
Media Query Záložka vám ukáže, akú veľkosť má aktuálny výrez a aký mediálny dotaz bol práve vypálený.
Reagujúca kalkulačka
Reagujúca kalkulačka je veľmi jednoduchý on-line nástroj, ktorý vám môže pomôcť premeniť pixely na percentá pri navrhovaní vašich citlivých webových stránok.
Hore Nasledujúci týždeň
V druhom týždni tejto série budeme robiť návody, ktoré vás naozaj dostanú do systému Responsive Web Design (RWD).
Nenechajte si ho ujsť.
