50 uporabnih odzivnih orodij za oblikovanje spletnih strani za oblikovalce
V zadnjih nekaj dneh smo vam pokazali nekaj najboljših WordPress in Joomla odzivnih tem, ki jih lahko prenesete in uporabite na vašem spletnem mestu. Danes vam bomo dali orodja. Obsega okvire, storitve in skripte za prenos, menimo, da bodo v veliko pomoč pri odzivnem razvoju spletnih.
Da bi olajšali spuščanje celotnega seznama orodij, smo jih razvrstili v naslednje razdelke:
- Mreže in okviri
- Skice Sheets & Wireframes
- Vtičniki za JavaScript in jQuery
- Testiranje in predogled
- Drsniki
- Drugi
Mreže in okviri
[Nazaj na vrh]
Columnal
Columnal je projekt Pulp + Pixels, ki je bil izposojen iz cssgrid.net, medtem ko so nekateri navdihi za kode vzeli iz 960.gs. Columnal vam veliko pomaga pri odzivnem spletnem oblikovanju, tako da je vaše omrežje prilagodljivo, da se dinamično spremeni, ko se spremeni velikost okna brskalnika..
Okostje
Skeleton je preprost in zmogljiv CSS okvir, ki ga predvsem razvijalci in oblikovalci všeč zaradi svoje preprostosti in učinkovitosti. Tukaj ni težkega dviganja z Javascriptom, samo dober in čist CSS s čisto dokumentacijo.
LessFramework 4
Manj okvir je bolj ali manj okvir, v imenu svojega ustvarjalca. Gre za prilagodljiv CSS mrežni sistem, ki temelji na uporabi inline CSS medijskih poizvedb, zaradi česar je razvoj odzivnih spletnih strani veliko lažji..
Sistem semantične mreže
Semantični omrežni sistem se uporablja za oblikovanje odzivnih postavitev omrežja. Uporablja vnaprej obdelane razširitve CSS, kot so LESS, SCSS ali Stylus, da zagotovi maksimalno učinkovitost. Izberete lahko širino stolpcev in žlebov, izberete število stolpcev in preklopite med slikovnimi pikami in odstotki.
Golden Grid System
Golden Grid System je sistem fluidne mreže, ki služi kot izhodišče vašega odzivnega spletnega oblikovanja. Spletnemu mestu omogoča, da prikazuje dobre strani v razponu od 240 do 2560 slikovnih pik.
320 in Gor
320 in Up je CSS medijska poizvedba, ki služi kot začetna predloga za vaš odzivni dizajn. Sledi povsem obraten pristop kot več drugih razpoložljivih predlogov.
Inuit.css
Inuit.css je CSS okvir, ki je zelo enostaven za uporabo, tudi za začetnike. Ima minimalističen pristop, zato se morate ukvarjati samo s potrebnimi stvarmi, po potrebi pa jih lahko razširite tudi s peščico vtičnikov, ki so na voljo..
Gridless
Gridless je predlog za ustvarjanje odzivnih in navzkrižnih brskalnikov s čudovito tipografijo. To orodje se osredotoča na postopen razvoj projekta in služi kot izhodišče vsake oblike.
1140 Mreža CSS
1140 CSS Grid je odličen CSS omrežni sistem, ki ga je zasnoval oblikovalec v Melbournu Andy Taylor, ki omogoča, da se vaša zasnova odlično prilega 1140px za velike monitorje in vaša tekočina se bo brez težav prilagodila drugim manjšim resolucijam z zelo malo dodatnega dela..
1KBCSSGrid
1KB CSS Grid, ki jo je oblikoval Tyler Tate, je preprost in lahek CSS Grid generator. To vam bo omogočilo, da nastavite število stolpcev, širino stolpcev in širino žleba, in lahko dobite CSS, ki ga je mogoče prenesti,.
Bootstrap
Bootstrap, ki so ga ustvarili in vzdrževali Mark Otto in Jacob Thornton na Twitterju, je odličen nabor elementov uporabniških vmesnikov, postavitev in javascript orodij, ki so vam na voljo za prenos in uporabo v vaših spletnih oblikovalskih projektih..
Kalkulator tekočinske mreže
To preprosto orodje vam bo pomagalo hitro zagrabiti CSS vašega spletnega dizajna tekoče mreže.
Fluid Grids
Fluid Grid je preprost, a uporaben okvir za tekoče omrežje, ki ustvarja odzivne postavitve na podlagi 6, 7, 8, 9, 10, 12 ali 16 stolpcev.
Flurid
Flurid je preprost in zelo uporaben cross-browser CSS mrežni okvir z do 16 stolpci. Poleg tega ne skrije pikslov v robove.
Gridset
Gridset je orodje za izdelavo mrež katere koli vrste, kot so, kolonsko, asimetrično, fiksno, razmerje, spojina, odzivnost in še več. To orodje, ki ga je ustvaril Mark Boulton, je še vedno v beta fazi, vendar se izkaže za obetavno. In sem omenil, da je uporaba preprosta kot vstavljanje povezave.
Gridpak
Gridpak je spletni odzivni mrežni generator, kjer je mogoče spremeniti število stolpcev, oblazinjenje in žleb ter dodati dodatne mejne vrednosti po meri. CSS generira orodje in je pripravljen za prenos. Nudi tudi predloge PNG, ki jih lahko uporabite za oblikovanje v Photoshopu.
SimpleGrid
SimpleGrid, ki ga je razvil Michael Kuhn, je zelo preprost in preprost okvir CSS za ustvarjanje neskončnih postavitev na osnovi omrežja. Po privzetku je SimpleGrid pripravljen na 4 različna območja velikosti zaslona.
Susy
Susy by Oddbird je podobna akciji Semantičnemu omrežju. Ne uporablja dodatnega označevalnika ali drugih posebnih razredov, ampak je namenjen samo uporabnikom Saasa in njegovemu podaljšku Compass.
Majhna tekoča mreža
Tiny Fluid Grid je odlična spletna aplikacija, ki vam lahko pomaga interaktivno določiti omrežni sistem vaše spletne strani. Nastavite lahko število stolpcev, odstotek žlebov, najmanjšo in največjo širino postavitve vašega spletnega mesta in lahko dobite CSS za prenos.
Sistem spremenljive mreže
Sistem SpireSoft je zasnovan in razvit s spremenljivim omrežnim sistemom, ki temelji na sistemu 960 Grid. To omogoča razvijalcem in oblikovalcem, da ustvarijo omrežje po meri in nato prenesejo spremljajočo datoteko CSS, ki temelji na tem omrežju.
Skice Sheets & Wireframes
[Nazaj na vrh]
Odzivna skica Sheet Sheets
To orodje je uporabno za preslikavo umestitev različnih elementov v postavitvi vaše spletne strani v različnih napravah. S pomočjo te naprave lahko ustvarite idejo o tem, kje namestite potrebne elemente spletnega mesta za različne velikosti zaslona in ločljivosti.
Odzivna žična omrežja
Responsive Wireframes je eksperimentalno orodje, ki ga je ustvaril James Mellers iz podjetja Adobe. Zgrajen je samo z HTML-jem in CSS-jem (brez slik ali JS-jev), s katerimi lahko predstavite, kako bo izgledal vaš odzivni dizajn na dejanskih brskalnikih različnih namizij in mobilnih naprav.
StyleTiles
Ploščice slogov vam omogočajo, da razvijete idejo o tem, kako bi izgledala spletna stran, neodvisno od zapletenih slogov, ki prihajajo v igro. Omogoča vam popolno odzivnost pri oblikovanju in sposobnost integracije povratnih informacij odjemalcev.
Vtičniki za JavaScript in jQuery
[Nazaj na vrh]
Adapt.Js
Adapt.js je Javascript rešitev in odlična alternativa za poizvedbe CSS medijev. Uporaba @media pristopa je dobra praksa, vendar to ne deluje za vse brskalnike. Nathan Smith, ustvarjalec 960 Grid sistema, je izdal Adapt.js, zelo lahkotno JavaScript knjižnico, ki je rešila ta problem..
Izotop
Isotope je neverjeten jQuery plugin, ki se izkaže za zelo uporabnega pri oblikovanju odzivnega dizajna. To ne pomaga le pri preureditvi elementov strani, ko se spremeni velikost okna brskalnika ali če je velikost zaslona manjša, temveč tudi pomaga filtrirati te elemente..
Zidarstvo
Zidarstvo je odličen vtičnik jQuery, ki se uporablja za ustvarjanje dinamičnih in prilagodljivih postavitev. Ta plugin pomaga preurediti elemente v vašem odzivnem dizajnu, tako da se lahko bolje prilegajo odprtim mestom na mreži.
Respond.js
Respond.js je hiter in lahek skript (3 Kb razčlenjen in 1 Kb gzipped), katerega glavni cilj je omogočiti odzivno spletno oblikovanje v tistih, ki ne podpirajo poizvedb za CSS3, kot so brskalniki IE.
TinyNav.js
TinyNav.js je majhen in lahek vtičnik jQuery, samo 362 bajtov, ki pretvarja velike sezname za krmarjenje v manjše menije za manjše zaslone.
Vtičnik za ukaze JQuery
Wookmark je vtičnik jQuery, ki zazna velikost okna brskalnika in samodejno razporedi elemente strani v stolpce. Na dnu strani si lahko ogledate tudi predogled v živo.
Testiranje in predogled
[Nazaj na vrh]
ProtoFluid
ProtoFluid je spletno orodje za izdelavo prototipov, ki omogoča testiranje prototipov vaše spletne strani v različnih velikostih zaslona in resolucijah. Vnesite URL, izberite napravo (ali morebitne dimenzije po meri) in pritisnite tipko za začetek. Ker je to spletno orodje, vam omogoča tudi uporabo drugih razširitev, kot je FireBug.
Odzivanje
Responsive.Is je ustvaril TypeCast drugo orodje za emulator brskalnika, ki ga lahko uporabite za preizkus odzivnega oblikovanja. Samo vnesite URL in samodejno spremeni njegovo velikost glede na izbrano napravo.
Responsivepx.Com
ResponsivePx je odlično orodje za testiranje vašega odzivnega spletnega oblikovanja. Glavna značilnost, po kateri se razlikuje od drugih, je njena zmožnost spreminjanja velikosti spletne strani slikovnih pik. Ta odlična funkcija vam bo omogočila, da ugotovite točke prekinitve in preizkusite, kako v vašem spletnem mestu delujejo poizvedbe v medijih CSS.
Odzivno orodje za testiranje spletne strani
Odlično orodje za testiranje, ki vam omogoča, da si ogledate svojo odzivno spletno stran v različnih velikostih zaslona hkrati na enem zaslonu, medtem ko jih izdelujete ali načrtujete. To orodje mi je všeč predvsem zato, ker prikazuje vse ločljivosti zaslona ob strani, kar olajša razhroščevanje.
ReView.Js
ReView je dinamičen sistem pogledov, razvit v čistem JavaScriptu, ki vam omogoča fantastično izkušnjo gledanja za odzivno spletno oblikovanje.
Screenfly
Screenfly, ki ga QuirkTools, je neverjetno orodje, ki vam bo omogočilo, da si ogledate odzivno spletno stran v različnih napravah: Desktop, Tablet, Mobile in TV. Ima tudi možnosti za omogočanje ali onemogočanje drsenja ali celo za obračanje zaslona.
Screenqueri.es
Screenqueri.es je popolno orodje za testiranje, ki omogoča popolno odzivanje. Vnesite kateri koli spletni naslov, ki ga želite preveriti, in to orodje bo prikazalo spletno stran v različnih velikostih zaslona glede na napravo. Prav tako lahko ročno spremenite velikost velikosti slikovnih pik za pik za identifikacijo prelomnih točk.
Odzivnik
Preizkusite svoje spletno mesto v različnih napravah, od iPhonea in iPada, do Kindle in na Androidu v odzivniku. Prikazuje tudi vaše spletno mesto v pokončnem in ležečem načinu. To orodje mi je bolj všeč zaradi obrisov naprav, prikazanih na strani, kar prinaša večji pomen celotnemu procesu.
Drsniki
[Nazaj na vrh]
Borovnica
Borovnica je fantastični odprtokodni jQuery slikovni drsnik, ki je napisan posebej za tekoče ali odzivne postavitve.
Elastislide
Želite vrtiljak, ki se bo samodejno prilagodil velikosti zaslona, ko se bo spremenilo okno brskalnika ali ko boste na manjšem zaslonu? Elastislide je najprimernejši vtičnik jQuery za vaše potrebe.
Odzivni drsnik CSS3
To je popolnoma odzivni drsnik CSS3, ki se z lahkoto prilagodi velikosti zaslona in ločljivosti zaslona. Lepa stvar pri tem drsniku je ta, da puščice gredo znotraj škatle, ko je velikost zaslona naprave dovolj majhna. JavaScript ni potreben.
ResponsiveSlides.Js
ResponsiveSlides.Js je zelo preprost in zelo lahek (samo 1Kb) jQuery vtičnik, ki ustvarja odzivni drsnik z neurejenimi seznami. Deluje na številnih brskalnikih, tudi na IE6 in več.
Drugi
[Nazaj na vrh]
Prilagodljive slike
Prilagodljive slike so spletno orodje za odzivno spletno oblikovanje, ki zaznava velikost zaslona obiskovalcev ter ustvarja, predpomni in predvaja slike z višjo ločljivostjo na podlagi velikosti zaslona in ločljivosti..
FitText.Js
FitText.js je majhno orodje javascript, ki omogoča samodejno spreminjanje velikosti besedila in naslovov, ko se spremeni velikost okna brskalnika. Nič več skrbi glede neskladnosti velikosti besedila s tem orodjem.
FitVid.Js
Če želite spremeniti velikost vdelanih videoposnetkov, ko se spremeni velikost okna brskalnika ali je naprava manjše ločljivosti? FitVid.Js vam lahko pomaga pri doseganju tega. Je lahek, preprost, enostaven za uporabo vtičnik jQuery, ki se uporablja za doseganje vgrajenih videoposnetkov širine tekočine.
Slike retine
Slike retine so odlična rešitev javascript, ki bo samodejno prikazala @ 2-krat večje slike visoke ločljivosti, če jih gledate na zaslonu mrežnice. Vse, kar morate storiti, je, da vstavite različico vsake ločene slike z visoko ločljivostjo in upravljate ostalo.
Brezšivne odzivne fotodelice
Brezšivna odzivna foto-mreža prikaže slike od roba do roba v brskalniku, brez kakršnih koli vrzeli med slikami. Fotografije so razpostavljene in potekajo od leve proti desni po strani v stolpcih. Število stolpcev se ustrezno prilagodi, ko spremenite velikost okna brskalnika.
SlabText
SlabText je jQuery plugin ali orodje Brian McAllister, ki temelji na algoritmu slabText, ki razdeli naslove v vrstice, preden spremeni vsako vrstico in zapolni prostor, ki je na voljo. To je precej podobno akciji FitText.Js.
Zurb - ResponsiveTables
Ste se kdaj spraševali, kako ravnati z velikimi podatkovnimi tabelami v odzivnem dizajnu? Zurb, kombinacija CSS / JS vam daje odgovor; prevzame podatkovne tabele in jih spremeni tako, da ne odlomijo odzivne postavitve na manjših zaslonskih napravah.
Categorizr
Categorizr je zelo majhen PHP skript, ki obiskovalcem ponuja bolj ciljno spletno izkušnjo. To vam bo pomagalo pri izdelavi modelov za tablični računalnik, televizijo, mobilno napravo ali namizju.
Media Query Bookmarklet
Media Query Bookmarklet vam pokaže, kakšna je velikost trenutnega pogleda in katera medijska poizvedba je bila sprožena.
Odzivni kalkulator
Odzivni kalkulator je zelo preprosto spletno orodje, ki vam lahko pomaga pri spreminjanju pikslov v odstotke, medtem ko oblikujete odzivno spletno stran.
Naslednji teden
V drugem tednu te serije bomo pripravili vaje, ki vas bodo resnično udejanjile v odzivnem spletnem oblikovanju (RWD).
Ne zamudite tega.
