Chosen

يک پلاگين عالي جيکوئري که ليست بازشو طولاني شما را تبديل به يک ليست قابل جستجو ميکند تا کاربر بتواند راحتتر و سريعتر انتخاب کند

Tags Manager

پلاگين autocomplete براي اضافه کردن tag و ... که با جي کوئري نوشته شده است.

jQuery Super Labels

يک پلاگين ساده جيکوئري که متن يا عنوان پيشفرض را به فيلدهاي ورودي متن ميافزايد و پس از کليک کاربر بر روي آن ورودي، متن مربوطه به سمت مقابل حرکت کرده و در حين درج ورودي، ناپديد ميشود.

Toggle Switch

يک پلاگين عالي و کوچک براي تبديل چکباکسها به حالت سوئيچهاي on/off که در همه براوزرها حتي ie6 هم بدون مشکل است

AutoSuggest jQuery Plugin

در بين پلاگينهاي ساجست (پيشنهاد) اين پلاگين جزو ساده و زيباترين آنهاست که براي من، بيشتر در تگبندي مطالب کاربرد دارد.

smart input field position indicator

اين پلاگين مخصوص ورودي ساده تکخطي است (input type=text) که در صورت بزرگتر بودن طول رشته درون آن از طول قابل نمايش آن، يک شاخص افقي آبي رنگ به زير آن اضافه ميکند که مشخص ميکند در حال حاضر چشمکزن درج، در کجاي فيلد قرار دارد. (نمونه اجرا شده)

type ahead

پلاگين auto complete ساخت توئيتر! که از نظر زيبايي ظاهري چيزي کم ندارد :)

Parsley js

يک پلاگين که کار اعتبارسنجي فرمها را بسيار ساده کرده است. طراح فرم لازم است صرفا با attibute هاي معين، مواردي مانند لازم بودن يا نبودن، ساختار و زمان آتش کردن آن ويژگي را تعيين کند و تمام! به همين سادگي :)

Complexify

يک پلاگين براي چک کردن ميزان پيچيدگي پسورد. از محاسن اين پلاگين نسبت به ساير پلاگينها، پشتيباني از حروف غيرانگليسي (و کلا يونيکد) است...

جايگزيني براي placeholder

ويژگي placeholder که در html5 اضافه شده، زيبا و جالب است و موجب شکيل شدن فرم ميگردد. منتها در براوزر IE (حتي تا خود نسخه 9) و براوزرهاي قديمي ساپورت نميشود. عدم پشتيباني از اين ويژگي در براوزرهاي قديمي موجب ميشود که فرم شما عملا مبهم و بلااستفاده شود (چون اکثرا بجاي label از placeholder استفاده ميشود)

براي حل اين مشکل کدهاي ساده تا پيشرفته جيکوئري وجود دارد که کار شما را بسيار آسان ميکند. برخي از آنها مثل jquery placeholder نيز به صورت يک پلاگين تهيه شده است.

Selectize

يک پلاگين عالي براي تبديل المانهاي select يگانه و چندگانه به صورتي دلپذير به همراه auto suggest

WideArea

پلاگيني کوچک براي تبديل textarea ي محدود طراحی وب سایت به تمام صفحه که نوشتن متن را براي کاربر دلپذيرتر ميکند. (مناسب براي ورودي متن کامنت و ... خصوصا اگر به صورت اتوماتيک بعد از focus انجام شود)

طراحي وب واکنشي

طراحي سايتي که خود را متناسب با صفحه کاربر درآورد، نسبت به طراحي مجزاي سايت ويژهي موبايل و تبلت، راه حل بهتري است.

برخي css ها (Media Queries ها و Fluid Div ها و css framework u ها) و js هايي که براي همين منظور ايجاد شده و گسترش يافتهاند عبارتند از:

Adapt.js

کاري از گريد سيستم 960 که معروف و معتبر است و بر مبناي آن گريدهاي خوبي مثل FEM ساخته شده است.

The 1140px CSS Grid System

يک گريد سيستم css که مبتني بر لايههاي شناور است و خود را تا حد موبايل ميتواند کوچک کند

SimpleGrid

همانطور که از نامش پيداست؛ يک گريد سيستم ساده

Golden Grid System

يک گريد سيستم خوب که فقط با IE مشکل دارد!

978 Grid System

يکي از سادهترين گريدسيستمها که سايت فعلي با ايده گرفتن از آن طراحي شده است

Toast

يک گريد سيستم بسيار ساده اما قدرتمند

CSS H?rus

يک گريد سيستم جديد و عالي که بر روي گستره وسيعي از browserها و deviceها و ابعاد مختلف تست شده است.

از ويژگيهاي خوب اين گريد سيستم، ايجاد نماي مناسب براي پرينت و همچنين ساپورت تمهاي rtl (راست به چپ) است که براي سايتهاي فارسي و عربي کاربرد دارد.

One% CSS Grid

يک گريد سيستم شناور (برخلاف اکثر گريدسيستمها که شناور نيستند و داراي چند مقدار ثابت هستند) که جديدا معرفي شده و نکات جالبي دارد هرچند به دليل نوين بودن، با براوزرهاي قديمي (از جمله IE8) مشکلاتي نيز دارد اما با javascript مرتفع ميشود همانطور که اينجا توضيح دادم.

fluid baseline grid

يک گريد سيستم شناور خوب و جديد که شامل برخي فايلهاي موردنياز کوچک نيز هست.

Centurion

يک گريد سيستم جديد که از هر نظر حرف ندارد! هم آسون و هم خوشدست است.

MUELLER

يک گريد سيستم که بتازگي معرفي شده و به خوب به نظر ميرسد.

xyCSS

اگر بگويم بهترين شايد اغراق نباشد. يک گريدسيستم عالي به همراه ابزار و مثال و ... با انعطافپذيري و قابليتهاي ويژه.

جالب اينجاست که حتي براوزرهاي قديمي مثل IE6 را هم ساپورت ميکند در حالي که برخي گريدسيستمها IE8 را هم ساپورت نميکنند و آن را قديمي ميدانند.

Groundwork Beta

همانطور که در شعار اين فريمورک (Say Hello To responsive design made easy) گفته شده، با اين فريمورک عالي بايد به دنياي responsive web design سلام کنيد :)

جزو بهترين و کاملترين فريمورکهاي طراحي وب واکنشي است که کامپوننتهاي متعددي نيز براي Grid, Media Queries, Typography, Buttons, Forms, Navigation, Tabs, UI Elements, Icons, ResponsiveText, Tooltips, Orbit ارائه کرده است.

لينکهاي مفيد مرتبط با اين مبحث

به همه کساني که به اين مبحث علاقمند هستند، مطالعه اخبار، منابع و ساختارهاي طراحي وب واکنشي را که در اين صفحه ارائه گرديده است، پيشنهاد ميکنم.

همچنين افزونه و بوکمارکلتهايي هستند که در اين زمينه کار شما را راحتتر ميکنند. يک نمونه آن افزونه Web Developer براي فايرفاکس است که در اينجا معرفي شد. همچنين بوکمارکلت Viewport resizer نيز در اين زمينه عاليست.

در سايت mediaqueri.es نيز نمونههاي فراواني از سايتهايي که با اين تکنيک طراحي شده، معرفي شده است.

پلاگين FooTable نيز راهي براي مشکل جداول، در طراحي واکنشي ارائه کرده است (نمونه).

ZURB نام تمپلتي براي ايميلهاي ارسال شده توسط برنامه است در قالب responsive.

منوهاي بالاي سايت يکي از مشکلات طراحي واکنشي است که براي آن راهحلهاي متعددي ارائه شده است. برخي مثل MeanMenu يا ResponsiveNav يا sidr اينطور طراحي شدهاند که در صفحه نمايش کوچک، جمع شده و به صورت يک دکمه دربيايند تا اگر روي آن کليک شد، باز شود. هرچند روش ديگري هم وجود دارد که جالب است؛ تبديل منوها به ليست بازشو

يکي از ملزومات طراحي واکنشي، آشنايي با ابعاد و رزولوشن وسايل متداول (موبايل و تبلت و مانيتور و ...) است.