50 Hasznos, érzékeny webes tervezőeszközök a tervezők számára
Az elmúlt néhány napban megmutattuk a WordPress és Joomla legjobban választható témáit, amelyeket a webhelyén letölthet és használhat. Ma meg fogjuk adni az eszközök. Keretekből, szolgáltatásokból és letölthető szkriptekből áll, úgy gondoljuk, hogy nagy segítséget fognak nyújtani a webes fejlesztés során..
Annak érdekében, hogy könnyebben lehessen lefelé menni az eszközök teljes listáján, a következő részekre csoportosítottuk őket:
- Grid & Frameworks
- Vázlatok és drótvázak
- JavaScript és jQuery bővítmények
- Tesztelés és előnézet
- Sliders
- Egyéb
Grid & Frameworks
[Vissza a tetejére]
Columnal
A Columnal egy Pulp + Pixels projekt, amelyet cssgrid.net-től kölcsönzöttek, míg néhány kód inspirációt 960.gs. A Columnal sokat segít Önnek a webes megjelenésében, így rugalmasan módosíthatja a rácsokat, hogy dinamikusan megváltoztassák a böngészőablak átméretezését..
Csontváz
A csontváz egyszerű és hatékony CSS keretrendszer, melyet a fejlesztők és a tervezők elsősorban az egyszerűség és a hatékonyság miatt szeretnek. Itt nincs nehéz emelés, csak jó és tiszta CSS, tiszta dokumentációval.
LessFramework 4
A kevesebb keretrendszer többé-kevésbé keretrendszer, az alkotó nevében. Ez egy adaptív CSS-rácsrendszer, amely az inline CSS média lekérdezések használatán alapul, ami sokkal könnyebbé teszi az érzékeny webhelyek fejlesztését.
Szemantikus rácsrendszer
A szemantikus rácsrendszert az érzékeny rács elrendezések tervezésére használják. Előre feldolgozott CSS kiterjesztéseket használ, mint például a LESS, az SCSS vagy a Stylus a maximális hatékonyság eléréséhez. Kiválaszthatja az oszlop- és ereszcsatorna szélességét, kiválaszthatja az oszlopok számát és válthat a képpontok és a százalékok között.
Golden Grid rendszer
Az Arany Grid Rendszer egy folyadékháló-rendszer, amely az érzékeny webes tervezési kiindulási pontként szolgál. Lehetővé teszi, hogy a weboldal 240 és 2560 képpont közötti nagyvonalú oldalakat kínáljon.
320 és fel
A 320 és az Up egy CSS média lekérdezéses kazánlap, amely a választható tervezés kezdő sablonaként szolgál. Teljesen fordított megközelítés következik, mint a rendelkezésre álló számos más kazán.
Inuit.css
Az Inuit.css egy CSS keretrendszer, amely rendkívül könnyen használható, még a kezdők számára is. Minimalista megközelítéssel rendelkezik, így csak olyan dolgokkal kell foglalkoznia, amelyekre szükség van, de ha szükséges, akkor is bővíthető egy pár plugin elérhető.
Rácsfüggetlen
A Gridless egy bonyolult lap, amely gyönyörű, tipográfiai böngésző webhelyeket hoz létre. Ez az eszköz a projekt progresszív fejlesztésére összpontosít, és minden tervezési kiindulópontként szolgál.
1140 CSS Grid
1140 CSS Grid egy nagyszerű CSS rácsrendszer, amelyet a Melbourne tervezője tervezett Andy Taylor, amely lehetővé teszi, hogy a design tökéletesen illeszkedjen a 1140px-hez nagy monitorokhoz, és a folyadékelrendezés zökkenőmentesen alkalmazkodik a kisebb kisebb felbontásokhoz, nagyon kevés extra munkával.
1KBCSSGrid
A Tyler Tate által tervezett 1KB CSS Grid egy egyszerű és könnyű CSS Grid generátor. Lehetővé teszi az oszlopok számának, az oszlop szélességének és a csatornák szélességének beállítását, és letölthető CSS-t kaphat webhelyeiről..
bootstrap
A Mark Otto és Jacob Thornton által a Twitteren létrehozott és karbantartott Bootstrap kiváló felhasználói felület elemeket, elrendezéseket és javascript eszközöket kínál, amelyek ingyenesen letölthetők és felhasználhatók a webdesign projektekben..
Fluid Grid Calculator
Ez az egyszerű eszköz segít Önnek abban, hogy gyorsan megragadja a folyadékhálózat webhelyének tervezését.
Folyékony rácsok
A Fluid Grid egy egyszerű, mégis hasznos folyadékrács-keret, amely érzékeny elrendezéseket hoz létre a 6, 7, 8, 9, 10, 12 vagy 16 oszlop alapján.
Flurid
A Flurid egy egyszerű és nagyon hasznos, böngészőn keresztüli CSS-rácskeret, amely legfeljebb 16 oszlopot tartalmaz. És ezenkívül nem rejti el a képpontokat margókba.
Gridset
A Gridset olyan eszköz, amely bármilyen típusú rácsot készít, mint például oszlopos, aszimmetrikus, rögzített, arányos, összetett, érzékeny és több. Mark Boulton ezt az eszközt még béta, de ígéretesnek bizonyul. És megemlítettem, hogy a használat olyan egyszerű, mint egy link beágyazása.
Gridpak
A Gridpak egy online reagáló rácsgenerátor, ahol az oszlopok, a padding és az ereszcsatornák száma megváltoztatható, és az egyéni töréspontok hozzáadhatók. A CSS-t az eszköz generálja és készen áll a letöltésre. Ezenkívül PNG-sablonokat is biztosít, amelyek felhasználhatók a Photoshop alkalmazásban.
SimpleGrid
A Michael Kuhn által kifejlesztett SimpleGrid egy nagyon egyszerű és egyszerű CSS keretrendszer a végtelen hálózati alapú elrendezések létrehozásához. Alapértelmezés szerint a SimpleGrid négy különféle képernyőméretre készül.
Susy
Susy by Oddbird hasonló a szemantikus rácsrendszerhez. Nem használ extra jelölést vagy más speciális osztályt, de csak a Saas felhasználóinak és a Compass kiterjesztésének a célja.
Tiny Fluid Grid
A Tiny Fluid Grid egy fantasztikus webes alkalmazás, amely interaktív módon segít a webhely rácsrendszerének meghatározásában. Beállíthatja a webhely elrendezésének oszlopainak, csatornák százalékának, minimális és maximális szélességének számát, és letölthető CSS-t kaphat hozzá.
Változó rácsrendszer
A változó rácsrendszert a SprySoft tervezte és fejlesztette, és a 960-as Grid rendszeren alapul. Lehetővé teszi a fejlesztők és a tervezők számára, hogy létrehozzák az egyéni rácsot, majd letölthessék a mellékelt CSS fájlt a rács alapján.
Vázlatok és drótvázak
[Vissza a tetejére]
Érzékeny webes tervrajzlapok
Ez az eszköz hasznos a webhelyelrendezés különböző elemeinek elhelyezésének feltérképezésében a különböző eszközökön. Ezzel az eszközzel ötletet kaphat arról, hogy hol helyezze el a webhely szükséges elemeit különböző képernyőméretekhez és felbontásokhoz.
Érzékeny drótvázak
A Reagens Wireframes egy James Mellers által készített Adobe kísérleti eszköz. Csak HTML és CSS (nincs kép vagy JS) használatával készült, mely segítségével megjelenítheti, hogyan fog kinézni a választható tervezése a különböző asztali és mobil eszközök tényleges böngészőinél..
StyleTiles
A stíluscserepek lehetőséget adnak arra, hogy fejlesszenek ki egy ötletet arról, hogy egy webhely hogyan néz ki, függetlenül attól, hogy milyen bonyolult stílusok vannak a játékban. Lehetővé teszi, hogy tökéletesen reagáljon a tervezési munkafolyamatra, és képes legyen integrálni a kliens visszajelzéseket.
JavaScript és jQuery bővítmények
[Vissza a tetejére]
Adapt.Js
Az Adapt.js egy Javascript megoldás és kiváló alternatíva a CSS média lekérdezésekhez. A @media megközelítés használata jó gyakorlat, de ez nem minden böngésző esetében működik. Nathan Smith, a 960 Grid Rendszer létrehozója, Adapt.js-ot adott ki, egy nagyon könnyű javascript könyvtárat, hogy megoldja ezt a problémát.
Izotóp
Az Isotope egy csodálatos jQuery plugin, ami nagyon hasznosnak bizonyul egy érzékeny tervezés során. Ez nemcsak az oldalak elemeinek átrendezését segíti elő, ha a böngészőablak átméreteződik, vagy a képernyő mérete kisebb, de segít az elemek szűrésében is..
Kőművesség
A falazat kiváló jQuery plugin, amelyet dinamikus és adaptív elrendezések létrehozására használnak. Ez a bővítmény segíti az érzékeny kialakítású elemek átrendezését, így jobban illeszkedhetnek a rács nyílt foltjaihoz.
Respond.js
A Respond.js egy gyors és könnyű (3 Kb-os minigált és 1 Kb-os gzippelt) szkript, amelynek fő célja, hogy lehetővé tegye az érzékeny webes tervezést azokban, amelyek nem támogatják a CSS3 média lekérdezéseket, mint például az IE böngészők.
TinyNav.js
A TinyNav.js egy kicsi és könnyű jQuery plugin, csak 362 bájt, amely a kisebb navigációs listákat kisebb képernyőre konvertálja..
Wookmark jQuery bővítmény
A Wookmark egy olyan jQuery plugin, amely érzékeli a böngésző ablakméretét és automatikusan elrendezi az oldal elemeit oszlopokba. Az oldal alján egy élő előnézet is látható.
Tesztelés és előnézet
[Vissza a tetejére]
ProtoFluid
A ProtoFluid egy webalapú prototípus-eszköz, amely lehetővé teszi a webhely prototípusainak tesztelését különböző képernyőméretekben és felbontásokban. Csak írja be az URL-t, válassza ki az eszközt (vagy az egyéni méreteket) és nyomja meg az indítást. Mivel ez egy webalapú eszköz, más olyan bővítményeket is használhat, mint a FireBug.
Responsive.Is
A Responsive.I-t a TypeCast egy másik böngésző-emulátor eszköz hozta létre, amely segítségével tesztelheti érzékeny designját. Csak írjon be egy URL-t, és automatikusan megváltoztatja a méretét a választott eszköztől függően.
Responsivepx.Com
A ResponsivePx egy félelmetes eszköz a webhely kialakításának tesztelésére. A fő jellemzője, amely megkülönbözteti azt másoktól, az a képessége, hogy átméretezze a weboldal pixel-pixelt. Ez a félelmetes funkció lehetővé teszi, hogy azonosítsa a töréspontokat és tesztelje, hogy a CSS média lekérdezések hogyan működnek a webhelyén.
Érzékeny Web Design tesztelési eszköz
Egy fantasztikus teszteszköz, amely lehetővé teszi, hogy egyszerre egy képernyőn megtekinthesse a különböző képernyőméretekben megjelenő érzékeny webhelyet, miközben építi vagy tervezi őket. Ezt az eszközt szeretem elsősorban azért, mert az összes képernyőfelbontást egymás mellett mutatja, ami megkönnyíti a hibakeresést.
ReView.Js
A ReView egy dinamikus nézetablak-rendszer, amelyet tiszta JavaScript-ben fejlesztettek ki, ami fantasztikus látványélményt nyújt Önnek a webes tervezéshez.
Screenfly
A Screenfly a QuirkTools által kínált csodálatos eszköz, amely lehetővé teszi, hogy a készüléket különböző eszközökön tekinthesse meg: Desktop, Tablet, Mobile és TV. Lehetőség van a görgetés engedélyezésére vagy letiltására, vagy akár a kijelző elforgatására is.
Screenqueri.es
A Screenqueri.es egy pixel-tökéletes, érzékeny tervezési teszt eszköz. Csak írjon be egy ellenőrizni kívánt webhelycímet, és ez az eszköz a képernyőn megjelenő különböző képernyőméreteket mutatja az eszköz szerint. A felbontási pontok azonosításához manuálisan is átméretezheti a képpont-pixel méretét.
A Responsinator
Tesztelje webhelyét különböző eszközökben egy iPhone és iPad, a Kindle és az Android a Responsinator-on. Megjeleníti a webhelyet mind portré-, mind tájkép módban. Ez az eszköz sokkal jobban tetszik az oldalon megjelenített eszközök körvonalai miatt, ami több jelentést hoz az egész folyamatnak.
Sliders
[Vissza a tetejére]
Áfonya
A Blueberry egy fantasztikus nyílt forráskódú jQuery kép csúszka, amely kifejezetten folyékony vagy érzékeny elrendezésekre készült.
Elastislide
Szeretne egy olyan körhinta, amely automatikusan a képernyőmérethez igazodik, ha a böngésző ablakát átméretezi, vagy ha kisebb képernyőn van? Az Elastislide a legmegfelelőbb jQuery plugin az Ön igényeihez.
Érzékeny CSS3 csúszka
Ez egy tiszta, érzékeny CSS3 csúszka, amely könnyedén alkalmazkodik minden képernyőmérethez és képernyőfelbontáshoz. A csúszka szép dolog az, hogy a nyilak a dobozba kerülnek, ha az eszköz képernyőmérete elég kicsi. Nincs szükség JavaScript-re.
ResponsiveSlides.Js
A ResponsiveSlides.Js egy nagyon egyszerű és rendkívül könnyű (csak 1Kb) jQuery plugin, amely érzékeny csúszkát hoz létre a rendezetlen listák használatával..
Egyéb
[Vissza a tetejére]
Adaptív képek
Az Adaptive Images egy online eszköz az érzékeny webes tervezéshez, amely felismeri a látogatók képernyőméretét és létrehozza, tárolja és átállítja az átméretezett képeket a képernyő mérete és felbontása alapján.
FitText.Js
A FitText.js egy kis javascript eszköz, amely lehetővé teszi a szöveg és a címsorok automatikus átméretezését a böngészőablak átméretezésekor. Nincs több aggodalom a szöveg méretét illetően ezzel a szerszámmal a fedélzeten.
FitVid.Js
Szeretné átméretezni a beágyazott videókat, ha a böngészőablak átméreteződik, vagy az eszköz kisebb felbontású? A FitVid.Js segíthet ennek elérésében. Ez egy könnyű, egyszerű, könnyen kezelhető jQuery plugin, amelyet a folyadékszélesség beágyazott videóinak elérésére használnak.
Retina képek
A Retina Images egy fantasztikus javascript megoldás, amely a retina kijelzőn történő megtekintésekor automatikusan 2X nagyobb, nagy felbontású képeket szolgáltat. Mindössze annyit kell tennie, hogy minden egyes kép nagy felbontású verzióját helyezze el, és a többiet kezelni fogja.
Zökkenőmentes érzékeny fotórács
A zökkenőmentes érzékeny fotórács megjeleníti a képeket a böngésző szélénél, anélkül, hogy a képek között hiányos lenne. A fotók csempézésre kerülnek, és az oldalról balról jobbra haladnak oszlopokban. Az oszlopok száma ennek megfelelően módosul, mivel a böngészőablak átméreteződik.
SlabText
A SlabText egy Brian McAllister jQuery plugin vagy eszköz, amely a slabText algoritmus alapján oszlik meg, amely a sorokat a sorok átméretezése előtt osztja fel a rendelkezésre álló hely kitöltéséhez. Ez meglehetősen hasonlít a FitText.Js beépülő modulhoz.
Zurb - ResponsiveTables
Gondolkozott már valaha, hogyan kell kezelni a nagy adattáblákat az érzékeny tervezésben? A Zurb, a CSS / JS kombó megadja a választ; az adattáblákat veszi és módosítja úgy, hogy ne szüntesse meg a kisebb képernyőeszközökre adott érzékeny elrendezést.
Categorizr
A Categorizr egy nagyon kis PHP szkript, amely célzottabb webes élményt nyújt a látogatóknak. Ez segíti Önt az eszközspecifikus tervek készítésében a Tablet, TV, mobil vagy asztali számítógépek számára.
Média lekérdezés Bookmarklet
A Media Query Bookmarklet megmutatja, hogy milyen méretű az aktuális nézetablak, és melyik média lekérdezést kapta.
Az érzékeny számológép
A Reagáló számológép egy nagyon egyszerű online eszköz, amely segít a képpontok százalékos arányának megváltoztatásában, miközben a webhelyet megtervezi.
Fel a jövő héten
Ennek a sorozatnak a második hetében a bemutatókat fogjuk irányítani, amelyek valóban beletelik az érzékeny webes tervezésbe (RWD).
Ne hagyd ki.
