50 Hyödyllisiä reagoivia web-suunnittelutyökaluja suunnittelijoille
Viime päivinä olemme osoittaneet sinulle joitakin parhaista WordPress- ja Joomla-aiheista, joita voit ladata ja käyttää sivustossasi. Tänään aiomme antaa sinulle työkalut. Luulemme, että ne muodostavat kehyksiä, palveluita ja ladattavia komentosarjoja..
Jotta voit helpommin mennä alas koko työkalujen luetteloon, olemme luokitelleet ne seuraaviin osiin:
- Grid & Frameworks
- Sketch Sheets & Wireframes
- JavaScript ja jQuery-laajennukset
- Testaus ja esikatselu
- Sliders
- toiset
Grid & Frameworks
[Takaisin alkuun]
Columnal
Columnal on Pulp + Pixels -hanke, joka on lainattu cssgrid.net: stä, kun taas joitakin koodin inspiraatioita on otettu 960.gs. Columnal auttaa sinua paljon reagoivassa web-suunnittelussa tekemällä verkkosi joustaviksi muuttumaan dynaamisesti, kun selainikkunan kokoa muutetaan.
Luuranko
Skeleton on yksinkertainen ja tehokas CSS-kehys, jonka kehittäjät ja suunnittelijat pitävät pääosin yksinkertaisuuden ja tehokkuuden vuoksi. Tässä ei ole raskasta nostamista Javascriptillä, vain hyvä ja puhdas CSS ja puhdas dokumentaatio.
LessFramework 4
Vähemmän kehystä on enemmän tai vähemmän kehys sen luojan nimissä. Se on adaptiivinen CSS-verkkojärjestelmä, joka perustuu inline-CSS-median kyselyihin, mikä helpottaa reagoivien verkkosivustojen kehittämistä.
Semanttisen ruudukon järjestelmä
Semanttisen ruudukon järjestelmää käytetään suunnittelemaan reagoivaa ruudukkoasettelua. Se käyttää ennalta käsiteltyjä CSS-laajennuksia, kuten LESS, SCSS tai Stylus, maksimaalisen tehokkuuden saavuttamiseksi. Voit valita sarakkeiden ja kattiloiden leveydet, valita sarakkeiden lukumäärän ja vaihtaa pikseleiden ja prosenttiosuuksien välillä.
Golden Grid -järjestelmä
Golden Grid System on nesteverkkojärjestelmä, joka toimii oman web-suunnittelun lähtökohtana. Sen avulla sivusto pystyy palvelemaan hyvännäköisiä sivuja, jotka vaihtelevat välillä 240–2560px.
320 ja ylös
320 ja Up on CSS-mediakyselyjen katselukortti, joka toimii aloitusmallina reagoivassa suunnittelussa. Se seuraa täysin käänteistä lähestymistapaa kuin monet muut käytettävissä olevat kattilat.
Inuit.css
Inuit.css on CSS-kehys, joka on erittäin helppokäyttöinen myös aloittelijoille. Siinä on minimalistinen lähestymistapa, joten sinun on käsiteltävä vain sellaisia asioita, joita tarvitaan, mutta tarvittaessa sitä voidaan laajentaa myös muutamalla käytettävissä olevalla lisäosalla.
Gridless
Gridless on kattava valikoima, jossa luodaan reagoivia ja selaimella varustettuja sivustoja, joissa on kaunis typografia. Tämä työkalu keskittyy hankkeen asteittaiseen kehittämiseen, ja se toimii minkä tahansa suunnittelun lähtökohtana.
1140 CSS Grid
1140 CSS Grid on Melbournen suunnittelija Andy Taylorin suunnittelema suuri CSS-verkkojärjestelmä, jonka ansiosta suunnittelusi sopii erinomaisesti 1140px: iin suurille näytöille ja nesteen asettelu mukautuu saumattomasti muihin pienempiin resoluutioihin, joissa on erittäin vähän ylimääräistä työtä.
1KBCSSGrid
Tyler Taten suunnittelema 1KB CSS Grid on yksinkertainen ja kevyt CSS Grid -generaattori. Sen avulla voit määrittää sarakkeiden lukumäärän, sarakkeen leveyden ja kanavan leveyden, ja voit ladata ladattavan CSS: n verkkosivuillesi..
bootstrap
Mark Otto ja Jacob Thornton Twitterissä luoma ja ylläpitämä Bootstrap on erinomainen käyttöliittymän elementtien, ulkoasujen ja javascript-työkalujen valikoima, jotka voit vapaasti ladata ja käyttää web-suunnitteluprojekteissasi.
Fluid Grid Calculator
Tämä yksinkertainen työkalu auttaa sinua nopeasti tarttumaan nestemäisen verkkosi verkkosivustosi suunnitteluun.
Fluidiverkot
Fluid Grid on yksinkertainen, mutta käyttökelpoinen nestemäinen ruudukon kehys, joka luo reagoivat asettelut 6, 7, 8, 9, 10, 12 tai 16 sarakkeiden perusteella.
Flurid
Flurid on yksinkertainen ja erittäin hyödyllinen selaimen CSS-ruudukko, jossa on jopa 16 saraketta. Lisäksi se ei piilota pikseleitä marginaaleiksi.
Gridset
Gridset on työkalu minkä tahansa tyyppisten verkkojen, kuten kolonnin, epäsymmetrisen, kiinteän, suhdeluvun, yhdisteen, reagoimiseksi ja enemmän. Tämä Mark Boultonin työkalu on edelleen beta, mutta osoittautuu lupaavaksi. Ja mainitsin, että sen käyttö on yhtä helppoa kuin linkin upottaminen.
Gridpak
Gridpak on online-reagoiva ruudukon generaattori, jossa voidaan muuttaa sarakkeiden, pehmusteiden ja kantojen määrää ja lisätä mukautettuja katkaisupisteitä. Työkalu luo CSS: n ja on valmis ladattavaksi. Se tarjoaa myös PNG-ruudukon malleja, joita voidaan käyttää Photoshopin tarkoituksiin.
SimpleGrid
Michael Kuhnin kehittämä SimpleGrid on erittäin yksinkertainen ja suoraviivainen CSS-kehys ääretön verkkoon perustuvien asettelujen luomiseksi. Oletusarvoisesti SimpleGrid valmistetaan neljälle erilliselle näytön koon alueelle.
Susy
Susy by Oddbird, on samanlainen toiminnassa kuin semanttinen verkkojärjestelmä. Se ei käytä ylimääräistä merkintää tai muita erikoisluokkia, vaan se on tarkoitettu vain Saasin käyttäjille ja sen laajennukselle Compass.
Tiny Fluid Grid
Tiny Fluid Grid on mahtava web-sovellus, jonka avulla voit määrittää verkkosivustosi verkkojärjestelmän vuorovaikutteisesti. Voit määrittää, kuinka monta saraketta, viennin prosenttiosuutta, minimi- ja maksimileveyttä sivustosi ulkoasu voi saada, ja voit ladata sille ladattavan CSS: n.
Muuttuva ruudukkojärjestelmä
SprySoft on suunnitellut ja kehittänyt vaihtelevan ruudukon järjestelmää ja se perustuu 960-verkkoon. Sen avulla kehittäjät ja suunnittelijat voivat luoda mukautetun ruudukon ja ladata sitten siihen liittyvän CSS-tiedoston.
Sketch Sheets & Wireframes
[Takaisin alkuun]
Reagoiva Web-suunnittelun luonnosarkit
Tämä työkalu on hyödyllinen, kun kartoitat eri elementtien sijoittelut sivustosi ulkoasussa eri laitteissa. Tämän laitteen avulla voit muodostaa käsityksen siitä, mistä sijoittaa verkkosivuston tarvittavat elementit eri näytön kokoja ja resoluutioita varten.
Reagoivat Wireframes
Responsive Wireframes on James Mellersin Adoben luomaa kokeellista työkalua. Se on rakennettu vain HTML: llä ja CSS: llä (ei käytetty kuvia tai JS: ää), joiden avulla voit visualisoida, miten reagoiva muotoilu näyttää eri työpöydän ja mobiililaitteiden todellisissa selaimissa.
StyleTiles
Tyyli-laatat antaa sinulle mahdollisuuden kehittää käsitys siitä, miten verkkosivusto näyttää, riippumatta siitä, mitä monimutkaisia tyylejä tulee. Se antaa sinulle mahdollisuuden täydelliseen reagoivaan suunnittelun työnkulkuun ja kykyyn integroida asiakkaiden palautteet.
JavaScript ja jQuery-laajennukset
[Takaisin alkuun]
Adapt.Js
Adapt.js on Javascript-ratkaisu ja erinomainen vaihtoehto CSS-mediakyselyille. @Media-lähestymistavan käyttö on hyvä käytäntö, mutta tämä ei toimi kaikissa selaimissa. Nathan Smith, 960 Grid Systemin luoja, julkaisi Adapt.js: n, joka on erittäin kevyt javascript-kirjasto tämän ongelman voittamiseksi.
Isotooppi
Isotope on hämmästyttävä jQuery-laajennus, joka osoittautuu erittäin hyödylliseksi, kun suunnitellaan reagoivaa suunnittelua. Se auttaa vain järjestämään sivun elementtejä uudelleen, kun selainikkunan kokoa muutetaan tai näytön koko on pienempi, mutta se auttaa myös suodattamaan nämä elementit.
muuraus
Muuraus on erinomainen jQuery-laajennus, jota käytetään dynaamisten ja adaptiivisten ulkoasujen luomiseen. Tämä laajennus auttaa järjestämään elementit uudelleen vastaavassa suunnittelussa, jotta ne sopivat paremmin verkon avoimiin kohtiin.
Respond.js
Respond.js on nopea ja kevyt (3 Kb minified ja 1 Kb gzipped) käsikirjoitus, jonka päätarkoituksena on mahdollistaa reagoiva web-suunnittelu niissä, jotka eivät tue CSS3-mediakyselyjä, kuten IE-selaimet.
TinyNav.js
TinyNav.js on pieni ja kevyt jQuery-laajennus, vain 362 tavua, joka muuntaa suuret navigointiluettelot pieniksi ruutuiksi pienemmille näytöille.
Wookmark-jQuery-laajennus
Wookmark on jQuery-laajennus, joka tunnistaa selainikkunan koon ja järjestää sivun elementit automaattisesti sarakkeisiin. Voit myös nähdä live-esikatselun sivun alareunassa.
Testaus ja esikatselu
[Takaisin alkuun]
ProtoFluid
ProtoFluid on web-pohjainen prototyyppityökalu, jonka avulla voit testata sivustosi prototyyppejä eri näytön kokoisina ja resoluutioina. Kirjoita URL-osoite, valitse laite (tai muokatut mitat) ja paina käynnistystä. Koska se on web-pohjainen työkalu, voit myös käyttää muita laajennuksia, kuten FireBug.
Responsive.Is
Responsive.Is luo TypeCastin toisen selainemulaattorityökalun, jonka avulla voit testata reagoivan suunnittelun. Kirjoita vain URL-osoite ja se muuttaa automaattisesti sen kokoa valitsemasi laitteen mukaan.
Responsivepx.Com
ResponsivePx on mahtava työkalu, jolla voit testata reagoivaa verkkosivujen suunnittelua. Tärkein ominaisuus, joka erottaa sen muista, on sen kyky muuttaa pikselin pikseliä. Tämä mahtava ominaisuus antaa sinulle mahdollisuuden tunnistaa katkoviivat ja myös testata, miten CSS-median kyselyt toimivat sivustossasi.
Reagoiva Web-suunnittelun testaustyökalu
Mahtava testaustyökalu, jonka avulla voit tarkastella reagoivaa verkkosivuasi eri näytön kokoisina samanaikaisesti yhdessä näytössä, kun niitä rakennetaan tai suunnitellaan. Pidän tästä työkalusta lähinnä siksi, että se näyttää kaikki näytön resoluutiot vierekkäin, mikä helpottaa virheenkorjausta.
ReView.Js
ReView on dynaaminen viewport-järjestelmä, joka on kehitetty puhtaassa JavaScriptissä, joka antaa sinulle upean katselukokemuksen reagoivaan Web-suunnitteluun.
Screenfly
Screenfly by QuirkTools, on hämmästyttävä työkalu, jonka avulla voit katsella reagoivaa verkkosivustoa eri laitteissa: Desktop, Tablet, Mobile ja TV. Siinä on myös vaihtoehtoja, joilla voit ottaa käyttöön tai poistaa kiertämisen tai jopa kiertää näyttöä.
Screenqueri.es
Screenqueri.es on pikselin täydellinen vastaava suunnittelun testaustyökalu. Syötä vain verkkosivuston osoite, jonka haluat tarkistaa, ja tämä työkalu näyttää sivuston eri näytön koon mukaan. Voit myös muuttaa kokopikselin pikseliä manuaalisesti, jotta voit tunnistaa katkoviivat.
Responsinator
Testaa sivustosi eri laitteissa iPhonesta ja iPadista, Kindle-laitteesta ja Android-laitteesta Responsinatorissa. Se näyttää sivustosi sekä pysty- että vaaka-tilassa. Pidän tästä työkalusta paljon enemmän sivun ääriviivojen vuoksi, mikä tuo enemmän merkitystä koko prosessille.
Sliders
[Takaisin alkuun]
Mustikka
Blueberry on fantastinen avoimen lähdekoodin jQuery-kuva-liukusäädin, joka on kirjoitettu erityisesti nestemäisten tai reagoivien ulkoasujen aikaansaamiseksi.
Elastislide
Haluatko karusellin, joka mukautuu automaattisesti näytön kokoon, kun selainikkunan kokoa muutetaan tai kun olet pienemmässä näytössä? Elastislide on sopivin jQuery-laajennus tarpeisiisi.
Herkkä CSS3-liukusäädin
Tämä on puhdas reagoiva CSS3-liukusäädin, joka voi mukautua mihin tahansa näytön kokoon ja näytön resoluutioon helposti. Tässä liukusäätimessä on mukavaa, että nuolet siirtyvät laatikon sisään, kun laitteen näytön koko on tarpeeksi pieni. JavaScript ei ole tarpeen.
ResponsiveSlides.Js
ResponsiveSlides.Js on erittäin yksinkertainen ja erittäin kevyt (vain 1Kb) jQuery-laajennus, joka luo reagoivan liukusäätimen järjestelemättömillä listoilla.Se toimii useilla selaimilla, myös IE6: lla ja uudemmilla.
toiset
[Takaisin alkuun]
Adaptiiviset kuvat
Adaptive Images on online-työkalu web-suunnitteluun, joka tunnistaa kävijöiden näytön koon ja luo, tallentaa ja välittää skaalattuja kuvia näytön koon ja tarkkuuden perusteella.
FitText.Js
FitText.js on pieni javascript-työkalu, joka mahdollistaa tekstin ja otsikoiden automaattisen koon muuttamisen, kun selainikkunaa muutetaan. Ei enää huolta tekstin koon epäsuhdasta tämän työkalun kanssa.
FitVid.Js
Haluatko skaalata upotetut videot uudelleen, kun selainikkunan kokoa muutetaan tai laite on pienempi tarkkuus? FitVid.Js voi auttaa sinua saavuttamaan tämän. Se on kevyt, yksinkertainen ja helppokäyttöinen jQuery-laajennus, jota käytetään nesteen leveyden upotettujen videoiden saavuttamiseen.
Retina-kuvat
Retina Images on mahtava javascript-ratkaisu, joka palvelee automaattisesti 2X suurempia, korkearesoluutioisia kuvia, kun niitä katsotaan verkkokalvonäytöllä. Sinun tarvitsee vain laittaa korkean resoluution versio jokaisesta yksittäisestä kuvasta, ja se hallitsee loput.
Saumaton reagoiva valokuvaruudukko
Saumaton reagoiva valokuvaruudukko näyttää kuvat reunasta reunaan selaimessa ilman kuvien välisiä aukkoja. Valokuvat on kaakeloitu ja ne kulkevat vasemmalta oikealle koko sivun sarakkeissa. Sarakkeiden lukumäärä mukautuu vastaavasti, kun selainikkunaa muutetaan.
SlabText
SlabText on Brian McAllisterin jQuery-laajennus tai työkalu, joka perustuu slabText-algoritmiin, joka jakaa otsikot riveiksi ennen kunkin rivin koon muuttamista täyttääkseen käytettävissä olevan tilan. Se on melko samanlainen kuin FitText.Js-plugin toiminnassa.
Zurb - ResponsiveTables
Oletko koskaan miettinyt, miten käsitellä suuria tietotauluja reagoivassa suunnittelussa? Zurb, CSS / JS -yhdistelmä, antaa sinulle vastauksen; se vie tietotaulukot ja muokkaa niitä siten, että ne eivät riko pienempien näytön laitteiden reagoivaa asettelua.
Categorizr
Categorizr on hyvin pieni PHP-skripti, joka tarjoaa kävijöillesi kohdennetun web-kokemuksen. Se auttaa toimittamaan laitekohtaisia malleja Tablet, TV, Mobile tai Desktop.
Media-kyselyn kirjanmerkki
Media Query Bookmarklet näyttää, mitä kokoa nykyinen näkymäratkaisu sisältää ja mihin mediapyyntöön juuri ampui.
Reagoiva laskin
Reagoiva laskin on erittäin yksinkertainen online-työkalu, jonka avulla voit kääntää pikseleitä prosentteina, kun suunnittelet vastaavaa verkkosivustoa.
Ylös Ensi viikolla
Tämän sarjan toisella viikolla ajamme opetusohjelmasi, jotka todella tuovat sinut reagoivaan web-suunnitteluun (RWD).
Älä missaa sitä.
