50 Kasulikud tundlikud veebidisainitööriistad disaineritele
Viimase paari päeva jooksul oleme teile näidanud mõningaid parimaid WordPressi ja Joomla vastavaid teemasid, mida saate oma saidil alla laadida ja kasutada. Täna anname teile tööriistu. Koosneb raamistikest, teenustest ja allalaaditavast skriptist, ning arvame, et nad on väga abivalmis, kui tegemist on tundliku veebiarendusega.
Selleks, et lihtsustada tööriistade täielikku loendit, oleme need jaotanud järgmistesse osadesse:
- Võrgustik ja raamistikud
- Sketch Sheets & Wireframes
- JavaScript ja jQuery pluginad
- Testimine ja eelvaade
- Liugurid
- Teised
Võrgustik ja raamistikud
[Tagasi üles]
Columnal
Columnal on Pulp + Pixels projekt, mis on laenatud cssgrid.netist, samas kui mõned koodide inspiratsioonid on võetud 960.gs. Columnal aitab teil palju reageerida teie tundlikule veebidisainile, muutes oma võrgud paindlikuks, et muuta brauseri akna suuruse muutmisel dünaamiliselt.
Luustik
Skeleton on lihtne ja võimas CSS raamistik, mida arendajad ja disainerid on oma lihtsuse ja tõhususe tõttu enamasti meeldinud. Siin ei ole rasket tõstmist koos Javascriptiga, ainult hea ja puhas CSS koos puhta dokumentatsiooniga.
LessFramework 4
Vähem raamistik on selle looja nimel enam-vähem raamistik. See on adaptiivne CSS-võrgusüsteem, mis põhineb inline CSS-i meedia päringutel, mis muudab tundlike veebisaitide arendamise palju lihtsamaks.
Semantilise võrgu süsteem
Semantilise grid-süsteemi abil saab kujundada reageerivaid võrgusüsteeme. Maksimaalse efektiivsuse saavutamiseks kasutab see eelnevalt töödeldud CSS-laiendeid, nagu LESS, SCSS või Stylus. Saate valida veergude ja rennide laiused, valida veergude arvu ja vahetada pikslite ja protsentide vahel.
Kuldvõrgu süsteem
Golden Grid System on vedelikuvõrgu süsteem, mis on teie reageeriva veebidisaini lähtepunktiks. See võimaldab veebisaidil teenida ilusaid lehekülgi vahemikus 240 kuni 2560 pikslit.
320 ja üles
320 ja Up on CSS meedia päringute katla, mis on sinu reageeriva disaini lähtemalliks. See järgib täiesti vastupidist lähenemist kui mitmed teised kättesaadavad katlamärgid.
Inuit.css
Inuit.css on CSS raamistik, mida on väga lihtne kasutada isegi algajatele. Sellel on minimalistlik lähenemine, seega peate tegelema ainult vajalike asjadega, kuid vajadusel saab seda laiendada ka mõne lisandmooduliga..
Gridless
Gridless on ilusa tüpograafiaga reageerivate ja piiriüleste brauserite veebisaitide loomise katla. See tööriist keskendub projekti järkjärgulisele arendamisele ja see on iga disaini lähtepunktiks.
1140 CSS Grid
1140 CSS Grid on suurepärane CSS-võrgusüsteem, mille on kujundanud Melbourne'i disainer Andy Taylor, mis võimaldab oma disaini sobitada ideaalselt 1140px suurte monitoride jaoks ja teie vedeliku paigutus sobib sujuvalt teiste väiksemate resolutsioonidega väga vähe lisatöödega.
1KBCSSGrid
1KB CSS Grid, mille on välja töötanud Tyler Tate, on lihtne ja kerge CSS Grid generaator. See võimaldab teil määrata veergude arvu, veeru laiuse ja vihmapiirkonna laiuse ning saate alla laadida allalaaditava CSS-i oma veebilehtedele.
Bootstrap
Mark Otto ja Jacob Thorntoni Twitteris loodud ja hooldatud Bootstrap on suurepärane kasutajaliidese elementide, skeemide ja javascripti tööriistade komplekt, mida saate vabalt kasutada veebi disaini projektide allalaadimiseks ja kasutamiseks..
Fluid Grid kalkulaator
See lihtne tööriist aitab teil kiiresti oma vedeliku võrgulehekülje kujunduse CSS-i haarata.
Fluidivõrgud
Fluid Grid on lihtne, kuid kasulik vedelikuvõrgu raamistik, mis loob vastupidi 6, 7, 8, 9, 10, 12 või 16 veergu..
Flurid
Flurid on lihtne ja väga kasulik piiriülene brauserivõrgu raamistik, millel on kuni 16 veergu. Ja lisaks ei peida see piksleid marginaalideks.
Gridset
Gridset on tööriist mis tahes tüüpi võrkude valmistamiseks, nagu näiteks veerg, asümmeetriline, fikseeritud, suhe, ühend, reageeriv ja rohkem. See Mark Boultoni tööriist on ikka veel beeta, kuid osutub paljulubavaks. Ja kas ma mainisin, et selle kasutamine on sama lihtne kui lingi kaasamine.
Gridpak
Gridpak on võrgus reageeriv võrgugeneraator, kus saab muuta veergude, polstrite ja vihmaveerennite arvu ning lisada lisapunkte. CSS genereerib tööriista ja on valmis allalaadimiseks. Samuti pakub see PNG-võrkude malle, mida saab kasutada Photoshopi eesmärkidel.
SimpleGrid
Michael Kuhni poolt välja töötatud SimpleGrid on väga lihtne ja arusaadav CSS raamistik lõpmata võrgu põhiste skeemide loomiseks. Vaikimisi on SimpleGrid ette valmistatud nelja erineva ekraanisuuruse vahemiku jaoks.
Susy
Susy by Oddbird, on sarnane tegevuses semantilise grid-süsteemiga. See ei kasuta lisamärgistust ega muid eriklasse, vaid on mõeldud ainult Saase kasutajatele ja selle laiendamisele kompassi.
Tiny Fluid Grid
Tiny Fluid Grid on fantastiline veebirakendus, mis aitab teil veebisaidi võrgusüsteemi interaktiivsel viisil kindlaks määrata. Saate määrata oma veebisaidi paigutuse veergude, vihmamõõtude protsendi, minimaalse ja maksimaalse laiuse ning saada sellele allalaaditava CSS-i.
Muutuva võrgu süsteem
SprySoft on kujundanud ja arendanud varieeruva võrgu süsteemi, mis põhineb 960 Grid süsteemil. See võimaldab arendajatel ja disaineritel genereerida kohandatud võrku ning seejärel laadida selle võrguga seotud kaasasoleva CSS-faili.
Sketch Sheets & Wireframes
[Tagasi üles]
Tundlikud veebidisaini skeemid
See tööriist on kasulik veebisaidi paigutuse erinevate elementide paigutuste kaardistamiseks erinevates seadmetes. Selle seadme abil saate luua idee, kuhu paigutada veebisaidi vajalikud elemendid erinevatele ekraanisuurustele ja resolutsioonidele.
Reageerivad traatraamid
Reageerivad traatraamid on eksperimentaalne vahend, mille on loonud Adobe Mellers. See on ehitatud ainult HTML-i ja CSS-iga (ei kasutatud pilte ega JS-i), mida saate kasutada, et visualiseerida, kuidas teie tundlik disain näeks välja erinevate töölaudade ja mobiilseadmete tegelikes brauserites.
StyleTiles
Stiili plaadid annavad võimaluse arendada ideed selle kohta, kuidas veebisait välja näeb, sõltumata mängu keerulistest stiilidest. See annab teile täiusliku reageeriva disaini töövoo ja võimaluse integreerida kliendi tagasiside.
JavaScript ja jQuery pluginad
[Tagasi üles]
Adapt.Js
Adapt.js on Javascripti lahendus ja suurepärane alternatiiv CSS meedia päringutele. @Media lähenemisviisi kasutamine on hea tava, kuid see ei toimi kõigi brauserite puhul. 960 Grid Systemi looja Nathan Smith vabastas Adapt.js, väga kerge javascripti raamatukogu selle probleemi lahendamiseks.
Isotoop
Isotoop on hämmastav jQuery plugin, mis osutub tundliku disaini kujundamisel väga kasulikuks. See ei aita mitte ainult lehe elementide ümberkorraldamist, kui brauseri akna suurust muudetakse või kui ekraani suurus on väiksem, kuid aitab ka neid elemente filtreerida.
Müüritööd
Müüritööd on suurepärane jQuery plugin, mida kasutatakse dünaamiliste ja adaptiivsete paigutuste loomiseks. See plugin aitab ümber kujundada oma reageeriva kujunduse elemente, nii et need sobivad paremini võrgus asuvatesse avatud kohtadesse.
Respond.js
Respond.js on kiire ja kerge (3 Kb minigeeritud ja 1 Kb gzipitud) skript, mille põhieesmärk on võimaldada tundlikku veebidisaini nendes, mis ei toeta CSS3 meediaküsimusi, nagu IE brauserid.
TinyNav.js
TinyNav.js on väike ja kerge jQuery plugin, ainult 362 baiti, mis muudab suured navigeerimisnimekirjad väiksemateks rippmenüüdeks väiksemate ekraanide jaoks.
Wookmarki jQuery plugin
Wookmark on jQuery plugin, mis tuvastab brauseri akna suuruse ja paigutab lehe elemendid automaatselt veergudesse. Saate vaadata ka reaalajas eelvaadet lehekülje allosas.
Testimine ja eelvaade
[Tagasi üles]
ProtoFluid
ProtoFluid on veebipõhine prototüüpimisvahend, mis võimaldab testida oma veebisaidi prototüüpe erinevates ekraanisuurustes ja resolutsioonides. Sisestage lihtsalt URL, valige seade (või kohandatud mõõtmed) ja vajutage käivitamist. Kuna tegemist on veebipõhise tööriistaga, saate kasutada ka teisi laiendusi, nagu FireBug.
Vastus
Responsive.Is on loodud TypeCast teise brauseri emulaatori tööriistaga, mida saate kasutada oma tundliku disaini testimiseks. Sisestage lihtsalt URL ja see muutub automaatselt vastavalt teie valitud seadmele.
Responsivepx.Com
ResponsivePx on suurepärane vahend teie veebilehe kujunduse testimiseks. Peamine omadus, mis eristab seda teistest, on selle võime muuta veebisaidi piksel-pikslit. See hämmastav funktsioon võimaldab teil tuvastada murdepunkte ja testida, kuidas CSS meedia päringud teie saidil töötavad.
Tundlik veebidisaini testimise tööriist
Hämmastav testimisvahend, mis võimaldab teil vaadata oma tundlikku veebisaiti erinevates ekraanisuurustes ühel ekraanil, samal ajal kui neid ehitate või kujundate. Mulle meeldib see tööriist peamiselt seetõttu, et see näitab kõiki ekraani eraldusvõimeid, mis muudavad silumise lihtsamaks.
ReView.Js
ReView on dünaamiline vaatepordisüsteem, mis on välja töötatud puhtas JavaScriptis, mis annab teile suurepärase vaatamiskogemuse oma tundlikule veebidisainile.
Screenfly
Screenfly poolt QuirkTools, on hämmastav vahend, mis võimaldab teil vaadata oma tundlikku veebisaiti erinevates seadmetes: Desktop, Tablet, Mobile ja TV. Sellel on ka võimalused sirvimise lubamiseks või keelamiseks või isegi ekraani pööramiseks.
Screenqueri.es
Screenqueri.es on piksel-täiuslik reageeriv disaini testimise tööriist. Sisestage lihtsalt ükskõik milline veebisaidi aadress, mida soovite kontrollida, ning see tööriist näitab veebilehte erinevates ekraanisuurustes vastavalt seadmele. Punkti-pikslite suurust saate käsitsi muuta ka murdepunktide tuvastamiseks.
Responsinator
Testige oma veebisaiti erinevates seadmetes iPhone'ist ja iPadist, Kindle'i ja Android'ist Responsinatoris. See näitab ka teie saiti nii portree- kui ka maastikurežiimis. Mulle meeldib see tööriist palju rohkem tänu lehel kuvatavate seadmete piirjoonele, mis annab kogu protsessi jaoks rohkem tähendust.
Liugurid
[Tagasi üles]
Mustikas
Mustikas on fantastiline avatud lähtekoodiga jQuery pildi liugur, mis on kirjutatud spetsiaalselt vedelate või tundlike paigutuste jaoks.
Elastislide
Kas soovite, et brauseri akna suuruse muutmisel või väiksema ekraani korral oleks karussell automaatselt kohandatav ekraani suurusele? Elastislide on teie vajadustele kõige sobivam jQuery plugin.
Vastupidav CSS3 liugur
See on puhas reageeriv CSS3 liugur, mis suudab kergesti kohanduda mis tahes ekraani suuruse ja ekraani eraldusvõimega. Selle liuguri kena asi on see, et nooled lähevad kasti sisse, kui seadme ekraani suurus on piisavalt väike. JavaScript pole vajalik.
ResponsiveSlides.Js
ResponsiveSlides.Js on väga lihtne ja äärmiselt kerge (ainult 1Kb) jQuery plugin, mis loob tundliku liuguri, kasutades korrastamata nimekirju. See töötab paljudes brauserites, ka IE6 ja uuemates versioonides.
Teised
[Tagasi üles]
Kohanduvad pildid
Adaptiivsed pildid on veebitööriist, mis võimaldab reageerida veebi disainile, mis tuvastab külastajate ekraani suuruse ja loob, vahemällu salvestatud ja edastab skaleeritud pilte vastavalt ekraani suurusele ja eraldusvõimele.
FitText.Js
FitText.js on väike javascripti tööriist, mis võimaldab teksti ja pealkirjade automaatset suurust muuta, kui brauseri akent muudetakse. Enam ei muretse teksti suuruse mittevastavus selle tööriistaga.
FitVid.Js
Kas soovite brauseriakna suuruse muutmise ajal sisseehitatud videote suurust muuta või seadet väiksema eraldusvõimega? FitVid.Js aitab teil seda saavutada. See on kerge, lihtne ja lihtsalt kasutatav jQuery plugin, mida kasutatakse vedeliku laiuse sisseehitatud videote saavutamiseks.
Retina pildid
Retina Images on fantastiline javascript lahendus, mis serveerib võrkkesta ekraanil automaatselt 2X suuremat kõrgresolutsiooniga pilti. Kõik, mida pead tegema, on panna iga pildi kõrge eraldusvõimega versioon ja see haldab ülejäänud.
Õmblusteta reageeriv fotovõrk
Õmblusteta reageeriv fotovõrk kuvab brauseris pildid servast servani ilma pilte vahel. Fotod on plaaditud ja voolavad kogu veerus veerus vasakult paremale. Veerude arv korrigeeritakse vastavalt brauseri akna suurusele.
SlabText
SlabText on Brian McAllisteri jQuery plugin või tööriist, mis põhineb slabText algoritmil, mis jaotab pealkirjad ridadeks enne iga rea suuruse muutmist olemasoleva ruumi täitmiseks. See on üsna sarnane rakenduse FitText.Js pluginaga.
Zurb - ResponsiveTables
Kas te olete kunagi mõelnud, kuidas reageerida suurte andmabelitega reageerivas disainis? Zurb, CSS / JS kombinatsioon annab teile vastuse; see võtab vastu tabelid ja muudab neid nii, et nad ei purustaks väiksematel ekraaniseadmetel reageerivat paigutust.
Kategooriad
Categorizr on väga väike PHP skript, mis pakub külastajatele sihipärasemat veebikogemust. See aitab teil pakkuda seadmepõhiseid disainilahendusi tahvelarvutile, telerile, mobiilile või töölauale.
Meediumide päring Järjehoidja
Media Query järjehoidja näitab, millise suurusega praegune vaateava on ja millist meediumipäringut just selle jaoks vallandati.
Reageeriv kalkulaator
Reageeriv kalkulaator on väga lihtne võrgutööriist, mis aitab teil reageeriva veebilehe kujundamisel piksleid protsentides muuta..
Üles Järgmisel nädalal
Selle seeria teisel nädalal suuname teid juhendajaid, mis tõesti jõuavad sinu veebilehe kujundamisse (RWD).
Ära jäta seda maha.
