50 Užitečné nástroje pro návrh webových aplikací pro projektanty
Za posledních pár dní jsme vám ukázali některé z nejlepších WordPress a Joomla citlivé témata si můžete stáhnout a používat na svých stránkách. Dnes vám to dáme nástroje. Představujeme rámce, služby a stahovatelné skripty a myslíme si, že to bude skvělá pomoc, pokud jde o citlivý vývoj webu.
Abychom usnadnili procházení celého seznamu nástrojů, zařadili jsme je do následujících sekcí:
- Mřížka a rámce
- Skica listy a drátové modely
- JavaScript a jQuery Pluginy
- Testování a náhled
- Posuvníky
- Ostatní
Mřížka a rámce
[Zpět na začátek]
Sloupec
Columnal je Pulp + Pixels projekt, který byl vypůjčen z cssgrid.net, zatímco některé inspirace kódu byly převzaty z 960.gs. Columnal vám hodně pomáhá při práci s webovým designem, díky čemuž se vaše mřížky mohou měnit dynamicky při změně velikosti okna prohlížeče..
Kostra
Skeleton je jednoduchý a výkonný CSS framework, který je hlavně pro vývojáře a designéry oblíbený díky své jednoduchosti a efektivnosti. Neexistuje žádný těžký-zvedání s Javascript tady, jen dobrý a čistý CSS s čistou dokumentací.
MéněRámec 4
Méně Framework je více či méně rámec, ve jménu jeho tvůrce. Jedná se o adaptivní CSS grid systém založený na použití inline CSS media dotazů, což usnadňuje vývoj responzivních webů.
Systém sémantických sítí
Systém sémantické mřížky slouží k návrhu rozvržení citlivé sítě. Používá předzpracované rozšíření CSS jako LESS, SCSS nebo Stylus pro dosažení maximální efektivity. Můžete vybrat šířku sloupu a okapu, zvolit počet sloupců a přepínat mezi pixely a procenty.
Systém Golden Grid
Systém Golden Grid je systém s tekutinovou mřížkou, který slouží jako výchozí bod pro vaše citlivé webové stránky. To umožňuje webové stránky sloužit dobře vypadající stránky v rozmezí od 240 do 2560px.
320 a nahoru
320 a Up je CSS media queries kotle, která slouží jako výchozí šablona pro váš citlivý design. To následuje zcela opačný přístup, než několik dalších kotlů k dispozici.
Inuit.css
Inuit.css je CSS framework, který se velmi snadno používá i pro začátečníky. Má minimalistický přístup, takže je třeba se zabývat pouze potřebnými věcmi, ale v případě potřeby je lze rozšířit o několik dostupných pluginů..
Gridless
Gridless je varná deska pro vytváření responzivních a cross-browser webových stránek s krásnou typografií. Tento nástroj se zaměřuje na postupný vývoj projektu a slouží jako výchozí bod pro jakýkoli návrh.
1140 CSS Grid
1140 CSS Grid je skvělý CSS grid systém navržený návrhářem Melbourne Andy Taylorem, který umožňuje vašemu designu dokonale zapadnout na 1140px pro velké monitory a vaše uspořádání tekutin se bude plynule přizpůsobovat dalším menším rozlišením s velmi malou prací navíc.
1KBCSSGrid
1KB CSS Grid navržený Tyler Tate je jednoduchý a lehký CSS Grid generátor. To vám umožní nastavit počet sloupců, šířku sloupce a šířku okapu a můžete si stáhnout CSS pro vaše webové stránky mřížky.
Bootstrap
Bootstrap, vytvořený a udržovaný Markem Ottem a Jacobem Thorntonem na Twitteru, je vynikající sadou prvků uživatelského rozhraní, rozvržení a nástrojů JavaScriptu, které jsou volně dostupné ke stažení a použití ve vašich projektech webového designu..
Fluidní mřížka kalkulačka
Tento jednoduchý nástroj vám pomůže rychle chytit CSS vašich webových stránek tekutin mřížky.
Fluidní mřížky
Fluidní mřížka je jednoduchá, ale užitečná struktura mřížky, která vytváří citlivé rozložení založené na 6, 7, 8, 9, 10, 12 nebo 16 sloupcích..
Flurid
Flurid je jednoduchý a velmi užitečný cross-browser CSS grid framework s až 16 sloupci. A navíc neskrývá pixely do okrajů.
Gridset
Gridset je nástroj pro výrobu mřížek jakéhokoliv typu, jako jsou sloupcové, asymetrické, pevné, poměrové, složené, citlivé a více. Tento nástroj Marka Boultona je stále v beta verzi, ale ukazuje se, že je slibný. A zmínil jsem se, že použití je stejně jednoduché jako vložení odkazu.
Gridpak
Gridpak je on-line responzivní generátor mřížek, kde lze měnit počet sloupců, výplň a žlábek a přidávat vlastní zarážky. Nástroj CSS generuje nástroj a je připraven ke stažení. Poskytuje také šablony šablon PNG, které lze použít pro účely návrhu ve Photoshopu.
SimpleGrid
SimpleGrid, vyvinutý Michaelem Kuhnem, je velmi jednoduchý a přímočarý CSS rámec pro vytváření nekonečných rozvržení založených na mřížce. Standardně je SimpleGrid připraven pro 4 různé rozsahy velikostí obrazovky.
Zaneprázdněný
Susy by Oddbird, je podobná jako u systému sémantických sítí. Využívá žádné další značky nebo jiné speciální třídy, ale je určen pouze pro uživatele Saas a jeho rozšíření Compass.
Tiny Fluid Grid
Tiny Fluid Grid je úžasná webová aplikace, která vám může pomoci určit systém mřížky vašich webových stránek interaktivním způsobem. Můžete nastavit počet sloupců, procento žlábků, minimální a maximální šířku rozvržení webových stránek a pro něj můžete stáhnout soubor CSS ke stažení.
Systém s proměnnou sítí
Systém variabilních sítí je navržen a vyvinut společností SprySoft a je založen na systému 960 Grid. To umožňuje vývojářům a návrhářům vytvářet vlastní mřížku a poté stáhnout doprovodný soubor CSS založený na této mřížce.
Skica listy a drátové modely
[Zpět na začátek]
Reagovat Web Design skici listy
Tento nástroj je užitečný při mapování umístění různých prvků v rozložení webových stránek napříč různými zařízeními. Pomocí tohoto zařízení můžete vytvořit představu o tom, kam umístit nezbytné prvky webové stránky pro různé velikosti a rozlišení obrazovky.
Reagující drátové modely
Responsive Wireframes je experimentální nástroj vytvořený Jamesem Mellersem z Adobe. Je postaven pouze s HTML a CSS (nebyly použity žádné obrázky nebo JS), které můžete použít k vizualizaci, jak bude vypadat váš responzivní design na aktuálních prohlížečích různých stolních počítačů a mobilních zařízení..
StyleTiles
Styl dlaždice vám způsob, jak rozvíjet představu o tom, jak by webové stránky vypadat, nezávisle na složité styly, které přicházejí do hry. To vám dává možnost dokonale reagovat na pracovní postup a také schopnost integrovat zpětné vazby klientů.
JavaScript a jQuery Pluginy
[Zpět na začátek]
Adapt.Js
Adapt.js je řešení Javascript a vynikající alternativa k CSS mediálním dotazům. Použití přístupu @media je dobrá praxe, ale to nefunguje pro všechny prohlížeče. Nathan Smith, tvůrce 960 Grid systému, vydal Adapt.js, velmi lehkou knihovnu javascriptu, aby tento problém překonal.
Izotop
Isotope je úžasný plugin jQuery, který se ukáže jako velmi užitečný při navrhování citlivého designu. Pomáhá nejen přeskupit prvky stránky, když je okno prohlížeče změněno nebo velikost obrazovky je menší, ale také pomáhá filtrovat tyto prvky.
Zdivo
Masonry je vynikající plugin jQuery, který se používá k vytváření dynamických a adaptivních rozvržení. Tento plugin pomáhá změnit uspořádání prvků v responzivním designu, takže se mohou lépe přizpůsobit otevřeným bodům na mřížce.
Respond.js
Respond.js je rychlý a lehký (3 Kb minified a 1 Kb gzipped) skript, jehož hlavním cílem je umožnit citlivý web design v těch, které nepodporují CSS3 Media Queries, jako jsou prohlížeče IE.
TinyNav.js
TinyNav.js je malý a lehký plugin jQuery, pouze 362 bytů, který převádí velké navigační seznamy do malých rozbalovacích nabídek pro menší obrazovky.
Wookmark jQuery Plugin
Wookmark je plugin jQuery, který detekuje velikost okna prohlížeče a automaticky uspořádá prvky stránky do sloupců. V dolní části stránky můžete také zobrazit živý náhled.
Testování a náhled
[Zpět na začátek]
ProtoFluid
ProtoFluid je webový prototypovací nástroj, který vám umožní otestovat vaše prototypy webových stránek v různých velikostech a rozlišeních. Stačí zadat adresu URL, vybrat zařízení (nebo libovolné vlastní kóty) a stisknout tlačítko Spustit. Vzhledem k tomu, že se jedná o webový nástroj, umožňuje také používat další rozšíření, například FireBug.
Responsive.Is
Responsive.Is je vytvořen nástrojem TypeCast pro další prohlížeč, který můžete použít k otestování citlivého designu. Stačí zadat adresu URL a automaticky se změní její velikost v závislosti na zvoleném zařízení.
Responsivepx.Com
ResponsivePx je úžasný nástroj pro testování vaší citlivé webové stránky designu. Hlavním rysem, který ji odlišuje od ostatních, je její schopnost měnit velikost webových stránek pixel-by-pixel. Tato úžasná funkce vám umožní identifikovat zarážky a také otestovat, jak CSS mediální dotazy pracují na vašem webu.
Reagovat Web Design Testovací nástroj
Skvělý testovací nástroj, který vám umožní zobrazit vaše citlivé webové stránky v různých velikostech obrazovky současně v jedné obrazovce, zatímco si je budujete nebo navrhujete. Líbí se mi tento nástroj hlavně proto, že zobrazuje všechny rozlišení obrazovky vedle sebe, což usnadňuje ladění.
ReView.Js
ReView je dynamický zobrazovací systém vyvinutý v čistém JavaScriptu, který vám poskytuje fantastický zážitek z prohlížení pro váš citlivý webový design.
Muška
Screenfly by QuirkTools, je úžasný nástroj, který vám umožní zobrazit vaše citlivé webové stránky v různých zařízeních: Desktop, Tablet, Mobile a TV. Má také možnosti aktivace nebo deaktivace rolování nebo dokonce otočení displeje.
Screenqueri.es
Screenqueri.es je pixel-perfektní citlivý testovací nástroj. Stačí zadat libovolnou webovou adresu, kterou chcete zkontrolovat, a tento nástroj bude zobrazovat webové stránky v různých velikostech obrazovky podle zařízení. Velikost bodů pixel po pixelu můžete také ručně změnit, abyste určili body přerušení.
Responsinator
Otestujte své stránky v různých zařízeních z iPhone a iPad, na Kindle a na Android na Responsinator. Zobrazuje také vaše stránky v režimu na výšku i na šířku. Líbí se mi tento nástroj mnohem více, protože obrysy zařízení zobrazených na stránce, což přináší více smyslu pro celý proces.
Posuvníky
[Zpět na začátek]
Borůvka
Blueberry je fantastický open source jQuery image jezdec, který je napsán speciálně pro tekuté nebo citlivé rozvržení.
Elastislide
Chcete karusel, který se automaticky přizpůsobí velikosti obrazovky, když se změní velikost okna prohlížeče nebo když se nacházíte na menší obrazovce? Elastislide je nejvhodnější plugin jQuery pro vaše potřeby.
Citlivý CSS3 Slider
Jedná se o čistě citlivý posuvník CSS3, který lze snadno přizpůsobit libovolné velikosti obrazovky a rozlišení obrazovky. Pěkná věc na tomto jezdci je, že šipky jdou dovnitř krabice, když je velikost obrazovky zařízení dostatečně malá. Není potřeba žádný JavaScript.
ResponsiveSlides.Js
ResponsiveSlides.Js je velmi jednoduchý a velmi lehký (pouze 1Kb) jQuery plugin, který vytváří citlivý posuvník pomocí neuspořádaných lists.It pracuje na široké škále prohlížečů, také na IE6 a nahoru.
Ostatní
[Zpět na začátek]
Adaptivní obrázky
Adaptive Images je online nástroj pro citlivý web design, který detekuje velikost obrazovky návštěvníků a vytváří, ukládá do mezipaměti a dodává obrázky ve zmenšeném měřítku na základě velikosti a rozlišení obrazovky.
FitText.Js
FitText.js je malý javascriptový nástroj, který umožňuje automatickou změnu velikosti textu a titulků při změně velikosti okna prohlížeče. Žádné další starosti o nesoulad velikosti textu s tímto nástrojem na palubě.
FitVid.Js
Chcete změnit měřítko vložených videí při změně velikosti okna prohlížeče nebo zařízení s menším rozlišením? FitVid.Js vám může pomoci dosáhnout tohoto cíle. Je to lehký, jednoduchý a snadno použitelný plugin jQuery, který se používá k dosažení vložených videí s tekutou šířkou.
Obrázky sítnice
Obrazy sítnice jsou úžasné řešení javascriptu, které při zobrazení na displeji sítnice automaticky poslouží @ 2X větší obrazy s vysokým rozlišením. Vše, co musíte udělat, je umístit verzi každého jednotlivého obrazu s vysokým rozlišením a zbytek bude spravovat.
Bezproblémové citlivé mřížky fotografií
Bezproblémové citlivé mřížky fotografií zobrazují obrázky na okraji prohlížeče bez mezer mezi obrázky. Fotografie jsou dlážděné a proudí zleva doprava po stránce ve sloupcích. Počet sloupců se odpovídajícím způsobem upraví, protože se změní velikost okna prohlížeče.
SlabText
SlabText je plugin nebo nástroj jQuery od Briana McAllistera založený na algoritmu slabText, který rozděluje titulky do řádků před změnou velikosti každého řádku tak, aby vyplnil volné místo. To je docela podobné FitText.Js plugin v akci.
Zurb - ResponsiveTables
Přemýšleli jste někdy, jak se vypořádat s velkými datovými tabulkami v citlivém designu? Zurb, CSS / JS combo vám dává odpověď; bere data tabulek a modifikuje je tak, aby nerušily citlivé rozvržení na menších obrazovkových zařízeních.
Kategorie
Kategorizr je velmi malý PHP skript, poskytuje návštěvníkům více cílené webové zkušenosti. Pomůže vám dodávat návrhy specifické pro zařízení pro Tablet, TV, Mobile nebo Desktop.
Dotaz na média Bookmarklet
Media Query Bookmarklet vám ukáže, jakou velikost má aktuální výřez a jaký dotaz na média byl právě spuštěn.
Reagující kalkulačka
Responsive Calculator je velmi jednoduchý online nástroj, který vám může pomoci při tvorbě responzivních webových stránek..
Příští týden
Ve druhém týdnu této série vám přiblížíme výukové programy, které vás opravdu dostanou do Reaktivního webového designu (RWD)..
Nenechte si to ujít.
