50 Noderīgi reaģējoši web dizaina rīki dizaineriem
Pēdējo dienu laikā mēs esam parādījuši jums dažas no labākajām WordPress un Joomla atsaucīgajām tēmām, kuras varat lejupielādēt un izmantot savā vietnē. Šodien mēs jums dosim rīkus. Mēs uzskatām, ka tie būs ļoti noderīgi, ja runa ir par atsaucīgu tīmekļa izstrādi, kas sastāv no ietvariem, pakalpojumiem un lejupielādējamajiem skriptiem..
Lai atvieglotu visu rīku saraksta nokārtošanu, mēs tos iedalām šādās sadaļās:
- Grid & Frameworks
- Skice Sheets & Wireframes
- JavaScript un jQuery spraudņi
- Testēšana un priekšskatīšana
- Slīdņi
- Citi
Grid & Frameworks
[Atpakaļ uz augšu]
Columnal
Columnal ir Pulp + Pixels projekts, kas ir aizņemts no cssgrid.net, bet daži koda iedvesmojumi ir ņemti no 960.gs. Columnal palīdz jums daudz jūsu atsaucīgajā tīmekļa dizainā, padarot tīklus elastīgus, lai mainītu dinamiku, kad pārlūkprogrammas logs ir mainīts.
Skelets
Skelets ir vienkāršs un jaudīgs CSS ietvars, kas, pēc vienkāršības un efektivitātes, galvenokārt ir attīstītāju un dizaineru patika. Šeit nav smago celšanas ar Javascript, tikai laba un tīra CSS ar tīru dokumentāciju.
LessFramework 4
Mazāk ietvarstruktūra ir vairāk vai mazāk pamats tās radītāja vārdā. Tā ir adaptīva CSS režģu sistēma, kuras pamatā ir in-line CSS mediju vaicājumi, kas padara atsaucīgu vietņu izveidi daudz vieglāku.
Semantiskā režģa sistēma
Semantiskā režģa sistēma tiek izmantota, lai izstrādātu atsaucīgus režģa izkārtojumus. Tas nodrošina iepriekš apstrādātus CSS paplašinājumus, piemēram, LESS, SCSS vai Stylus, lai nodrošinātu maksimālu efektivitāti. Varat izvēlēties kolonnu un notekas platumu, izvēlēties kolonnu skaitu un pārslēgties starp pikseļiem un procentiem.
Zelta režģa sistēma
Zelta režģu sistēma ir šķidruma režģu sistēma, kas kalpo kā sākumpunkts jūsu atsaucīgajam tīmekļa dizainam. Tas ļauj tīmekļa vietnei piedāvāt labus izskatus no 240 līdz 2560 pikseļiem.
320 un Up
320 un Up ir CSS mediju vaicājumu apkures katls, kas kalpo kā sākuma veidne jūsu atsaucīgajam dizainam. Tā ir pilnīgi pretēja pieeja nekā vairākām citām pieejamajām katlu kartēm.
Inuit.css
Inuit.css ir CSS sistēma, kas ir ļoti viegli lietojama pat iesācējiem. Tam ir minimālisma pieeja, tāpēc jums ir jārisina tikai nepieciešamās lietas, bet, ja nepieciešams, to var paplašināt arī ar dažiem pieejamajiem spraudņiem.
Gridless
Gridless ir katliņš, lai izveidotu atsaucīgas un pārrobežu pārlūkprogrammas tīmekļa vietnes ar skaistu tipogrāfiju. Šis rīks koncentrējas uz projekta progresīvu attīstību, un tas kalpo kā sākumpunkts jebkuram projektam.
1140 CSS režģis
1140 CSS Grid ir lieliska CSS režģu sistēma, ko projektējis Melburnas dizaineris Andy Taylor, kas ļauj lieliski kontrolēt savu dizainu lieliski pie 1140px..
1KBCSSGrid
1KB CSS režģis, ko projektējis Tyler Tate, ir vienkāršs un viegls CSS Grid ģenerators. Tas ļaus jums iestatīt kolonnu skaitu, kolonnas platumu un notekas platumu, un jūs varat saņemt lejupielādējamu CSS jūsu vietņu tīklam.
Bootstrap
Mark Otto un Jacob Thornton izveidotā un uzturētā Bootstrap ir lielisks lietotāja interfeisa elementu, izkārtojumu un javascript rīku kopums, kas ir brīvi pieejams, lai lejupielādētu un izmantotu jūsu web dizaina projektos..
Šķidruma režģa kalkulators
Šis vienkāršais rīks palīdzēs ātri noķert jūsu šķidruma tīkla tīmekļa vietnes dizaina CSS.
Šķidruma režģi
Fluid Grid ir vienkāršs, bet noderīgs šķidruma režģa ietvars, kas rada atsaucīgus izkārtojumus, pamatojoties uz 6, 7, 8, 9, 10, 12 vai 16 slejām.
Flurid
Flurid ir vienkāršs un ļoti noderīgs pārrobežu pārlūkprogrammas CSS režģis ar līdz pat 16 slejām. Un turklāt tas neslēpj pikseļus margās.
Gridset
Gridset ir instruments jebkura veida režģu izgatavošanai, piemēram, kolonnveida, asimetriska, fiksēta, attiecība, savienojums, atsaucīgs un vairāk. Šis Mark Boulton rīks joprojām ir beta, bet izrādās daudzsološs. Un vai es pieminēju, ka tā izmantošana ir tikpat vienkārša kā saites ievietošana.
Gridpak
Gridpak ir tiešsaistes reaktīvs režģa ģenerators, kur var mainīt kolonnu, polsterējumu un noteku skaitu, kā arī var pievienot pielāgotus pārtraukuma punktus. CSS ģenerē rīks un ir gatavs lejupielādei. Tā nodrošina arī PNG režģa veidnes, kuras var izmantot Photoshop vajadzībām.
SimpleGrid
SimpleGrid, ko izstrādājis Maikls Kuhns, ir ļoti vienkāršs un vienkāršs CSS ietvars bezgalīgu režģu izvietojumu izveidei. Pēc noklusējuma SimpleGrid ir sagatavots 4 atšķirīgiem ekrāna izmēru diapazoniem.
Susy
Susy by Oddbird, darbībā ir līdzīgs Semantiskā režģa sistēmai. Tā neizmanto papildu atzīmes vai citas īpašas klases, bet tā ir paredzēta tikai Saas lietotājiem un tā paplašinājumam Compass.
Tiny Fluid Grid
Tiny Fluid Grid ir lieliska tīmekļa lietotne, kas var palīdzēt jums interaktīvi noteikt jūsu vietnes tīkla sistēmu. Varat iestatīt kolonnu, noteku procentuālo daudzumu, minimālo un maksimālo jūsu vietnes izkārtojuma platumu, kā arī var saņemt lejupielādējamu CSS.
Mainīga režģa sistēma
Mainīgo režģu sistēmu projektē un izstrādā SprySoft, un tā pamatā ir 960 tīkla sistēma. Tas ļauj izstrādātājiem un dizaineriem izveidot pielāgotu režģi un pēc tam lejupielādēt pievienoto CSS failu, pamatojoties uz šo tīklu.
Skice Sheets & Wireframes
[Atpakaļ uz augšu]
Atsaucīga Web dizaina skices lapas
Šis rīks ir noderīgs, lai kartētu dažādu vietņu izvietojumu izvietojumu dažādās ierīcēs. Ar šīs ierīces palīdzību jūs varat izveidot priekšstatu par to, kur izvietot nepieciešamos vietnes elementus dažādiem ekrāna izmēriem un rezolūcijām.
Reaģējošie Wireframes
Responsive Wireframes ir eksperimentāls rīks, ko izveidojis Džeimss Mellers no Adobe. Tā ir veidota, izmantojot tikai HTML un CSS (nav izmantoti attēli vai JS), kurus varat izmantot, lai vizualizētu, kā izskatās jūsu atsaucīgais dizains dažādos galddatoros un mobilajās ierīcēs..
StyleTiles
Stila flīzes sniedz iespēju veidot priekšstatu par to, kā tīmekļa vietne izskatīsies, neatkarīgi no sarežģītajiem stili, kas tiek atskaņoti. Tas dod Jums iespēju izveidot perfektu atsaucību dizaina darbplūsmai, kā arī iespēju integrēt klientu atsauksmes.
JavaScript un jQuery spraudņi
[Atpakaļ uz augšu]
Adapt.Js
Adapt.js ir Javascript risinājums un lieliska alternatīva CSS mediju vaicājumiem. @Media pieejas izmantošana ir laba prakse, bet tas nedarbojas visām pārlūkprogrammām. Nathan Smith, 960 Grid sistēmas veidotājs, atbrīvoja Adapt.js, ļoti vieglu javascript bibliotēku, lai pārvarētu šo problēmu.
Izotopu
Isotope ir pārsteidzošs jQuery spraudnis, kas izrādās ļoti noderīgs, izstrādājot atsaucīgu dizainu. Tas ne tikai palīdz pārkārtot lapas elementus, kad pārlūkprogrammas logs tiek mainīts, vai arī ekrāna izmērs ir mazāks, bet tas palīdz arī filtrēt šos elementus.
Mūra
Mūris ir lielisks jQuery spraudnis, ko izmanto, lai izveidotu dinamiskus un adaptīvus izkārtojumus. Šis spraudnis palīdz pārstrukturēt elementus jūsu atsaucīgajā dizainā, lai tie varētu labāk iederēties atklātā vietā tīklā.
Respond.js
Respond.js ir ātrs un viegls (3 Kb minificēts un 1 Kb gzipped) skripts, kura galvenais mērķis ir nodrošināt atsaucīgu web dizainu tajos, kas neatbalsta CSS3 multivides vaicājumus, piemēram, IE pārlūkprogrammas.
TinyNav.js
TinyNav.js ir mazs un viegls jQuery spraudnis, tikai 362 baiti, kas lielos navigācijas sarakstus pārveido par maziem nolaižamajiem izvēlnēm mazākiem ekrāniem..
Wookmark jQuery spraudnis
Wookmark ir jQuery spraudnis, kas nosaka pārlūkprogrammas loga izmēru un automātiski sakārto lapas elementus kolonnās. Jūs varat arī redzēt tiešraides priekšskatījumu pašas lapas apakšā.
Testēšana un priekšskatīšana
[Atpakaļ uz augšu]
ProtoFluid
ProtoFluid ir tīmekļa prototipu veidošanas rīks, kas ļauj pārbaudīt jūsu vietnes prototipus dažādos ekrāna izmēros un izšķirtspējos. Vienkārši ierakstiet URL, atlasiet ierīci (vai jebkuru pielāgotu izmēru) un nospiediet startu. Tā kā tas ir tīmekļa rīks, tas arī ļauj izmantot citus paplašinājumus, piemēram, FireBug.
Atbildes
Responsive.Is ir izveidots ar TypeCast citu pārlūka emulatora rīku, ko varat izmantot, lai pārbaudītu savu atsaucīgo dizainu. Vienkārši ierakstiet URL, un tas automātiski mainīs tā lielumu atkarībā no izvēlētās ierīces.
Responsivepx.Com
ResponsivePx ir lielisks rīks, lai pārbaudītu jūsu atsaucīgo mājas lapas dizainu. Galvenā iezīme, kas to atšķir no citiem, ir tās spēja mainīt pikseļu skaitu pikseļos. Šī awesome funkcija, ļaus jums noteikt pārtraukuma punktus un arī pārbaudīt, kā CSS mediju vaicājumi darbojas jūsu vietnē.
Reaģējošs Web dizaina pārbaudes rīks
Awesome testēšanas rīks, kas ļauj jums apskatīt jūsu atsaucīgo tīmekļa vietni dažādos ekrāna izmēros vienlaicīgi vienā ekrānā, kamēr tos veidojat vai projektējat. Man patīk šis rīks galvenokārt tāpēc, ka tas parāda visas ekrāna izšķirtspējas blakus, kas atvieglo atkļūdošanu.
ReView.Js
ReView ir dinamiska skatu loga sistēma, kas izstrādāta tīrā JavaScript, kas sniedz fantastisku skatīšanās pieredzi jūsu atsaucīgajam Web dizainam.
Screenfly
Screenfly ar QuirkTools, ir pārsteidzošs rīks, kas ļaus jums apskatīt atsaucīgo tīmekļa vietni dažādās ierīcēs: Desktop, Tablet, Mobile un TV. Tajā ir arī iespējas iespējot vai atspējot ritināšanu vai pat pagriezt displeju.
Screenqueri.es
Screenqueri.es ir ideāli piemērots dizaina testēšanas rīks. Vienkārši ievadiet jebkuru vietnes adresi, kuru vēlaties pārbaudīt, un šis rīks parādīs vietni dažādos ekrāna izmēros atbilstoši ierīcei. Varat arī manuāli mainīt pikseļu lieluma lielumu, lai noteiktu pārtraukuma punktus.
Atbildētājs
Pārbaudiet savu vietni dažādās ierīcēs no iPhone un iPad, uz iekurt un Android, kas atrodas Responsinator. Tas arī parāda jūsu vietni gan portreta, gan ainavas režīmā. Man patīk šis rīks daudz vairāk, jo lapā redzamās ierīces iezīmē kontūras, kas rada lielāku nozīmi visam procesam.
Slīdņi
[Atpakaļ uz augšu]
Melleņu
Blueberry ir fantastisks atvērtā koda jQuery attēla slīdnis, kas rakstīts, lai īpaši strādātu šķidruma vai atsaucīgu izkārtojumu dēļ.
Elastislīds
Vēlaties karuseļu, kas automātiski pielāgosies ekrāna izmēram, ja pārlūkprogrammas logs ir mainīts vai kad esat mazākā ekrānā? Elastislide ir vispiemērotākais jQuery spraudnis jūsu vajadzībām.
Atsaucīgs CSS3 slīdnis
Tas ir tīrs, atsaucīgs CSS3 slīdnis, kas var viegli pielāgoties jebkuram ekrāna izmēram un ekrāna izšķirtspējai. Šajā slīdni ir patīkami, ka bultiņas iet iekšā lodziņā, kad ierīces ekrāna izmērs ir pietiekami mazs. Nav nepieciešams JavaScript.
ResponsiveSlides.Js
ResponsiveSlides.Js ir ļoti vienkāršs un ļoti viegls (tikai 1Kb) jQuery spraudnis, kas rada atsaucīgu slīdni, izmantojot neregulētus sarakstus. Tas darbojas dažādos pārlūkos, arī IE6 un jaunākos.
Citi
[Atpakaļ uz augšu]
Adaptīvie attēli
Adaptīvie attēli ir tiešsaistes rīks atsaucīgam tīmekļa dizainam, kas nosaka apmeklētāju ekrāna izmērus un izveido, kešatmiņā un piegādā skalas izmaiņas, pamatojoties uz ekrāna izmēru un izšķirtspēju.
FitText.Js
FitText.js ir mazs javascript rīks, kas ļauj automātiski mainīt teksta un virsrakstu izmērus, kad pārlūkprogrammas logs ir mainīts. Ne vairāk uztrauc teksta izmēru neatbilstība šim rīkam.
FitVid.Js
Vēlaties atkārtoti mainīt iegultos videoklipus, ja pārlūkprogrammas logs ir mainīts vai ierīce ir mazāka izšķirtspēja? FitVid.Js var palīdzēt jums to sasniegt. Tas ir viegls, vienkāršs, viegli lietojams jQuery spraudnis, ko izmanto, lai iegūtu šķidruma platuma iegultos videoklipus.
Tīklenes attēli
Retina Images ir awesome javascript risinājums, kas automātiski rādīs 2X lielākus, augstas izšķirtspējas attēlus, skatoties tīklenes displejā. Viss, kas jums jādara, ir ievietot katra attēla augstas izšķirtspējas versiju, un tas pārvaldīs pārējo.
Bezšuvju reaģējošs foto režģis
Bezšuvju reaģējošā fotoattēlu režģī tiek attēloti attēli, kas atrodas malā līdz malai pārlūkprogrammā, bez jebkādiem trūkumiem starp attēliem. Fotogrāfijas ir flīzētas un plūsmas no kreisās uz labo pusi visā kolonnās. Kolonnu skaits tiek pielāgots atbilstoši pārlūkprogrammas loga izmēram.
SlabText
SlabText ir Brian McAllister izstrādāts jQuery spraudnis vai rīks, pamatojoties uz algoritmu, kas sadala virsrakstus rindās pirms katras rindas izmēru maiņas, lai aizpildītu pieejamo vietu. Tas ir diezgan līdzīgs FitText.Js spraudnim darbībā.
Zurb - ResponsiveTables
Vai esat kādreiz domājuši, kā rīkoties ar lielām datu tabulām atsaucīgā dizainā? Zurb, CSS / JS combo, sniedz jums atbildi; tā ņem datu tabulas un pārveido tās tā, lai tās neizjauktu atsaucīgo izkārtojumu mazākās ekrāna ierīcēs.
Kategorijas
Categorizr ir ļoti mazs PHP skripts, sniedz apmeklētājiem mērķtiecīgāku tīmekļa pieredzi. Tas palīdzēs jums piegādāt ierīces specifiskus dizainus planšetdatoram, televizoram, mobilajam tālrunim vai darbvirsmai.
Multivides vaicājuma grāmatzīme
Multivides vaicājuma grāmatzīme parāda, kāda ir pašreizējā skata loga izmērs un kādam mediju vaicājumam tā tika atlaista.
Reaģējošais kalkulators
Reaģējošais kalkulators ir ļoti vienkāršs tiešsaistes rīks, kas var palīdzēt pārvērst pikseļus procentos, veidojot atsaucīgu vietni.
Uz augšu Nākamajā nedēļā
Šīs sērijas otrajā nedēļā mēs izcīnīsim jums konsultācijas, kas patiešām dos jums atbildes reakcijas Web dizainu (RWD).
Nepalaidiet garām to.
