با ظهور پدیده طراحی وب واکنشگرا یا Responsive بسیاری از توسعه‌دهندگان و طراحان ماهر و خلاق به ساختن فریم‌ورک‌هایی برای آسان و منظم‌تر کردن این تکنیک طراحی٬ پرداختند. در این نوع طراحی٬ عملیات ریاضی مربوط به تغییر سایز عناصر در صفحه ممکن است کسل کننده و ملال‌آور شوند و وقت زیادی را بی‌جهت از طراح وبسایت بگیرند. اما تعدادی فریم‌ورک ریسپانسیو وجود دارد که این فرآیند طراحی را برای طراحان و توسعه‌دهندگان آسان و سریع می‌کند. این فریمورکها تمام موارد مورد نیاز شامل گریدهای پیچیده٬ layoutها و مدیا کوئری‌ها را یک جا برای شما فراهم آورده تا طرح ریسپانسیو خود را به آسانی پیاده سازی کنید. در این مطلب تعدادی از این محبوب‌ترین فریمورکها که بیشتر توسط طراحان مورد استفاده قرار گرفته را معرفی خواهیم کرد.
Bootstrap
احتمالا نام بوتسترپ – Bootstrap را شنیدید. فریم‌ورکی که توسط چند تن از مهندسین توییتر ساخته شده است٬ اکنون به عنوان بیشترین فریم‌ورک مورد استفاده شناخته می‌شود. بوتسترپ با قابلیت‌ها و امکانات جامع زیادی ساخته شده است که باعث می‌شود طراحان بتوانند آن را هر گونه که در نظر دارند برای هر طرح مجزا تغییر دهند.
Foundation
فاوندیشن – Foundation یک فریم‌ورک Front-end پیشرفته و ریسپانسیو است که بر اساس گریدهای قابل انعطاف ساخته شده است که می‌تواند برای نیازهای دقیق و جزئی تغییر کند. این قابلیت باعث آسان شدن توسعه ساختارها برای دستگاه‌های موبایل و دسکتاپ با mark up یکسان می‌شود.
Skeleton
Skeleton یا همان اسکلت یکی از فریم‌ورک‌های سبکی است که بر اساس یک سیستم گرید ( شبکه بندی ) ساده ساخته شده است. گرید Skeleton به زیبایی از ۹۶۰ پیکسل تا اندازه موبایل‌ها و تبلت‌ها در دو حالت دیدن Landscape و Portrait با مقیاس مشخص تغییر اندازه داده و کوچک می‌شود.
Golden Grid System
اگر شما علاقه خاصی به گریدها دارید٬ بی‌شک ارتباط خوبی با Golden Grid System برقرار خواهید کرد. این ساختار با یک گرید که دارای ۱۶ ستون است با marginها و حاشیه‌های تمیز شروع می‌کند اما به زیبایی هنگام تغییر اندازه و کوچک شدن نمایشگر به ساختار ۸ یا ۴ ستونه برای تبلت‌ها و موبایل‌ها تبدیل می‌شود.
320 and Up
بعضی از طراحان شیوه متفاوت تصاعدی در اندازه را نسبت به شیوه معمول و مطلوب تنازلی در طرح ترجیه می‌دهند. اینجا جایی است که فریم‌ورک 320 and Up وارد می‌شود. در تعریف این فریم‌ورک را می‌توان در دسته فریم‌ورک‌های Mobile First قرار داد. یعنی ابتدا طراحی برای نمایشگرهای کوچک انجام می‌گیرد و تغییرات سایز را به صورت افزایشی در نظر می‌گیرند تا تغییرات مورد نظر بر روی طرح پس از این افزایش اندازه اعمال شوند. این فریم ورک به گونه‌ای ساخته شده که ساختارهایی برای نمایشگرهای با سایز کوچک به بالا طراحی می‌شود٬ بر خلاف طراحی برای نمایشگرهای بزرگ که به اندازه‌های پایین‌تر برسد. در این تکنیک٬ محتوی اولویت اول را دارد.
Less Framework
Less یک فریم‌ورک کلاسیک است که بر اساس ساختار گرید ساده و ثابت در عرض که تطابقی (Adaptive) عمل می‌کند٬ ساخته شده است. Less ۴ ساختار آماده و ۳ نوع تایپوگرافی از پیش تنظیم شده برای نمایش مناسب در دسکتاپ٬ تبلت‌ها٬ موبایل‌ها را در خود دارا است.
1140px CSS Grid System
طراحی یک ساختار ریسپانسیو یا واکنشگرا فقط به این معنا نیست که شما برای سایزها و رزولوشن‌های پایین‌تر هم طراحی می‌کند٬ بلکه شما میتوانید طرح خود را برای یک سایز بسیار عریض و بزرگ در یک ساختار حداکثری طراحی کنید و در همان حال طرحتان برای اندازه‌های معمولی دسکتاپ نیز به خوبی نمایش داده شود. فریم‌ورک 1140 grid به شما طراحان وب این قابلیت را می‌دهد تا بتوانند یک طرح مناسب برای نمایشگرهای با رزولوشن 1280px طراحی کرده و به خوبی برای هر سایز کوچکتری در مقیاس خودش تغییر اندازه دهد و کار کند.
Frameless
شاید به صورت کلی Frameless نباید در این لیست جای بگیرد٬ چون نمی‌توان آن را به درستی ریسپانسیو یا حتی به عنوان یک فریم‌ورک خواند. ایده اصلی پشت آن باعث می‌شود تا ساختن ساختارها برای نمایشگرهای مختلف قابل تصور شود٬ با گریدها یا شبکه‌بندی Frameless به سادگی می‌توان ستونی را موقعی که به آن نیاز داریم اضافه کرد.
Wirefy
ایده و مفهوم یک طرح واکنشگرا یا ریسپانسیو همیشه برای مشتریان و کاربران معنی‌دار نیست٬ اما ساخت و ایجاد مفاهیمی که به آنها چگونگی و کلیت کار آن را نشان دهد عملی وقت‌گیر است. با ورود به Wirefy و استفاده از آن که فریم‌ورکی ریسپانسیو برای ساخت Wireframeها است ساختن مدل‌ها برای ساختار کلی سایت با عناصری مانند اسلایدرها٬ گالری‌ها٬ منوها و فرم‌ها را آسان می‌سازد.
Gumby Framework
اگر شما در طراحی ریسپانسیو به تازگی وارد شدید٬ فریم ورک گامبی می‌تواند گزینه خوبی برای شروع شما باشد. Gumby ساده و سبک است٬ و برخلاف بعضی از فریمورکها که ممکن است در زمان شروع کمی گیج کننده باشند٬ یک فایل PSD و UI Kit را همراه با خود دارد که باعث آسان شدن ایجاد نمونه یا Mock up برای طرح شما می‌شود.
اگر فریم ورک مناسب دیگری را می شناسید که در این لیست قرار ندارد ، لطفا معرفی نمائید .
فریم‌ورک‌های معرفی شده از طرف کاربران
لیست بالا٬ لیستی از پراستفاده و محبوب‌ترین فریمورکها بود اما در این قسمت٬ تعدادی از فریم‌ورک‌هایی که کاربران وبتارگت پیشنهاد کردند را به شما معرفی می‌کنیم.
Amazium
Simplegrid
YAML
Kube
بابک
1 January 2013
Amazium هم خوبه
http://www.amazium.co.uk
علی طبیب زاده
2 January 2013
مرسی بابک جان.
پیشنهاد خوبی بود٬ تا حالا ندیده بودم.
به پست اضافه شد :)
موفق باشید.
محسن
1 January 2013
خیلی ممنون.
فکر کنم 960گرید رو جا انداختین
http://960.gs/
علی طبیب زاده
2 January 2013
ممنون از نظرتون. گرید ۹۶۰ سیستم خوب و معروفی است. اما هدف ما در اینجا معرفی گریدهای ریسپانسیو بود.
موفق باشید.
Hesam
1 January 2013
Skeleton و Foundation رو قبلا کار کرده بودم که حالا چندتا فریم ورک جدید شناختم
lili
22 February 2015
من اصلا نمیدونم چجوری از کدهاش استفاده کنم!!! فقط bootstraop رو دانلود کردم!!! کمکم کنید لطفا.سایتی ک طراحی کردم با html5وcss!!!
فرزین سیف الهی
1 January 2013
اینا خوب هستند.
به نظر من اما در مواقعی که قراره یک سایتی با تعداد صفحات بالا و پیچیده طراحی کنیم بهتره از این فریم ورک ها استفاده کنیم.
من خیلی از طراح های ایرانی رو می بینم که برای یک سایت ساده از این فریم ورک ها استفاده می کنن و توی Head صفحه بیشتر از 4 یا 5 تا css و js قرار می دن.
نظر شما چیه ؟
امیر سروری
2 January 2013
ممنون فرزین عزیز . معمولا فریم ورک ها به قسمت های مختلفی تقسیم بندی میشن و مثلا میشه برای گرید بندی فقط قسمت گرید رو ایمپورت صفحه کرد و ازش استفاده کرد . اما در کل به نظر من در بعضی از موارد این فریم ورک ها دست و پای طراح رو می بندن و ممکنه روی خلاقیت طراح وب تاثیر بزارن . اما برای پروژه های تجاری و وب سایتهایی که نیازی به کار سنگین ندارن مناسبه . هر تکنولوژی اگر با تفکر مورد استفاده قرار بگیر قطعا خوب خواهد بود .
فرزین سیف الهی
2 January 2013
درسته امیر جان، بسیار عالی بود این مقاله، استفاده کردم. از دوست خوبم آقای طبیب زاده هم تشکر می کنم. خیلی ممنون.
علی طبیب زاده
2 January 2013
باعث افتخاره دوست من :)
حسین
2 January 2013
مخلص علی آقا خیلی خوب بود
علی طبیب زاده
2 January 2013
ممنونم دوست عزیز.
نظر لطف شماست. خوشحالم که براتون مفید واقع شده :)
حسین کردآبادی
2 January 2013
سلام و خسته نباشید.
.میتونم بپرسم فریم ورک هایی که توی جوملا ازش استفاده میشه فریم ورک های جداگانه است یا از همین فریم ورک ها استفلده شده..ممنون متشکر.
اگر منبع خاصی برای آشنایی با فریم ورک ها دارید ممنون میشم بذارید .متشکر
امیر سروری
2 January 2013
ممنون حسین جان ، اینها فریم ورک های سی اس اسی هستند و البته فکر میکنم منظور شما از فریم ورک هایی که در جوملا استفاده میشه ، مواردی مثل k2 یا gantry هستن ! که کلا فلسفشون با این فریم ورک ها متفاوته . اما در جدیدترین نسخه جوملا از فریم ورک سی اس اس bootstrap استفاده شده .
امین
2 March 2013
سلام آقای سروری فریم ورک های جوملا زیاد با این فریم ورک ها تفاوت نداره فقط کد هاشون به جای اینکه خالی css و js باشه یه دونه php هم داره که خوب برای cms ها داشتن این فایل برای تعریف متغیر ها و … ضروری هست ، فریم ورک گانتری فریم ورک چندان جالبی نیست چون کلی باگ داره که باید رفع بشه و کمی کار باهاش برای مبتدی ها سخته اگر کسی جوملایی هست توصیه می کنم از فریم ورک t3 شروع کنن چون کار باهاش آسون تر از بقیه هست
بازم ممنون از این مطلبتون
مهسا کیانی
2 January 2013
مرسی
این 2 تا هم هست
YAML
http://www.yaml.de
Simplegrid
http://simplegrid.info
علی طبیب زاده
2 January 2013
خیلی ممنونم از پیشنهادات خوبتون.
به لیست اضافه کردم.
علی حدادکار
2 January 2013
مطلب مفیدی بود
ممنون
عارف موسوی
2 January 2013
عالی بود
مرسی علی جان
مهراد
3 January 2013
http://csshor.us
راست به چپ رو هم به خوبی پشتیبانی میکنه
توسعه دهندش خیلی آدم باحالی هست :)
https://github.com/firminoweb/csshorus
سوران خضری
3 January 2013
بسيار مطلب خوبي بود
علیرضا
4 January 2013
خیلی ممنون
اگه چند تا منبع واسه آموزش ریسپانسیو دیزاین ذکر کنین خیلی خوب میشه
من کلا چیز زیادی از فریم ورک و اینا سر در نمیارم
نیتاران
5 January 2013
من تازه با سایت شما آشنا شدم بهتون تبریک میگم بینظیره
رادمنش
6 January 2013
آموزش های creativity tuts توی یوتوب هست که بد نیست ببینیدش
اینم سایتش : creativitytuts.org
امیر
8 January 2013
جای فریم ورک kube هم خالیه، پیشنهاد میشه:
kubeframework.com
علی طبیب زاده
10 January 2013
سلام
ممنون از پیشنهادتون دوست عزیز. به نوشته اضافه شد.
اما چیز جالبی که توی این فریم‌ورک به چشمم خورد این بود که سایت خودشون ریسپانسیو نبود ;)
موفق باشید.
سعید
9 January 2013
خوب و مفید ! ممنون
big man
10 January 2013
bootstrap حرف نداره
علی اقدام
8 April 2013
سلام.چطوری با این ها کار کنیم؟لطفا پاسخ هید
کامیار نویدان
11 January 2013
لطفا در مورد پشتیبانی این فریمورکها از راست به چپ توضیح بدین.
مثلا در مورد Foundation می‌دونم که خودش راست به چپ رو (بر خلاف بوت‌استرپ) پشتیبانی میکنه.
علی اکبر
1 February 2013
سلام
کدومشون فارسی شده هست ؟
کدومشون rtl ساپورت میکنه
درسته که همشون خوب هستند اما برای استفاده در سایتهای فارسی کدوم ساده تر و کاربردی تر هست ؟
علی جانلو
18 February 2013
بسیار جالب و خواندنی، آشنا شدیم. ممنون :)
مهدی
4 March 2013
بسیار بسیار عالی. واقعا مفید بود
vira
24 April 2013
ممنون. جالب بود من چیزی در موردش نمیدونستم.
فقط مشکل اینه که هر کدوم از این فریم ورک ها رو خیلی باید باهاش کار کرد و کلاس های css اش رو بخاطر سپرد یکم وقت گیر هست.
دوستان چطوری استفاده میکنید؟ من Bootstrap رو گرفتم نگاهی کردم خیلی شلوغ هست و حوصله سر بره. آیا باید همینطور یادش گرفت یا اینه نه من درست نفهمیدم نحوه ی استفاده رو؟
البته فقط 5 دیقه بیشتر روش وقت نذاشتم ولی اصلا آدم ترجیح میده خودش تمام مسائل ریسپانسیور رو یاد بگیره با این فریم ورکا سروکله نزنه!
علی طبیب زاده
24 April 2013
استفاده از یک فریم‌ورک ممکنه فقط بخاطر ریسپانسیو بودن اون نباشه٬ بلکه خیلی از امکانات دیگه‌ای که فریمورکها در اختیار طراحان قرار می‌دن می‌تونه دلیل خیلی خوبی باشه که ما برای سرعت و راحتی بیشتر سراغ اونها بریم.
خب قطعا نه تنها ۵ دقیقه اول٬ بلکه زمان خیلی طولانی‌تری مثل روزهای اولی که با یک فریم‌ورک کار میکنید صرف آشنا شدن و به خاطر سپردن امکانات و نحوه استفاده ازشون میشه.
مسائل مربوط به طراحی ریسپانسیو یک بحثه٬ استفاده از فریم‌ورک‌های ریسپانسیو بحث دیگه‌ای هست. برای مثال موقع استفاده از گریدها و خصوصا امکان Fluid Grids یا گریدهای شناور خیلی توی ریسپانسیو کردن یک طرح مفید هست و دقت بالاتری به ما میده اما پیاده کردنش کار خیلی ساده‌ای نیست که بخواهیم برای طرح‌های ریسپانسیو هر دفعه کار زمان‌بر و سختی هست. پس اگر بخواهیم از گریدها استفاده کنیم٬ فریمورکها گزینه خوبی برای ما هستند.
masoud
8 May 2013
سلام
آقای سروری میخواستم بدونم وبتارگت از کدوم فریم ورک استفاده کرده ؟!
امیر سروری
8 May 2013
مسعود جان توی وبتارگت فریم ورک های سی اس اس متداول استفاده نشده /
masoud
9 May 2013
هرچی که استفاده شده خوب بوده …
نمیخواهید اموزش جامع بزارید از ریسپانیسو ؟!
یه زمان میخواستم بیام پیشتون استخدام شم …
دیگه طراحه وب نمی خواهید ؟!
فکر کنم واسه lastseccond بود آگهیش …
کمیل
20 May 2013
درود و تشکر از وبسایت خوب و مفیدتون اگه ممکن هست یه آموزشی در مورد ریسپانسیو کردن تو سایت قرار بدید :دی چون هیچ جا پیدا نکردم (نیست)
رها امیر چرمهینی
21 May 2013
با سلام و عرض ادب
و تشکر از شما اقای طیب زاد بخاطر گرداوری این مطلب فوق العاده
اگر مطلب آموزشی کاملی در مورد طراحی ریسپانسیو نوشتید که چگونگی قرار گیری کدها رو در اون بنا به فریم ورک های معرفی شده تعریف کرده اید لطفا لینک ان را در این قسمت قرار دهید
یا اگر منبع اموزشی مفید وکاملی در این زمینه در دست دارین اون رو معرفی کنین
با تشکر وارزوی توفیق
گلمر
18 December 2013
با سلام
خیلی خیلی ممنون از مطلب خوبتون، خیلی کارم گیر بود و واقعاً به یه همچین چیزی نیاز داشتم. ایشالا خدا خیرتون بده، کلی دعاتون کردم.
خیر از جوونیت ببینی پسرم.
طراحی سایت
30 December 2013
اطلاعات مفید و جامعی بود ممنون
کاناپه بادی
17 February 2014
با تشکر از مطالب خوبتون
محمد
23 May 2014
استفاده کردم ممنون از مقاله تون
Hossein
15 August 2014
سلام
کدوم از اینا RTL رو ساپورت میکنن؟!
بوت استرپ که خیلی خوبه ولی نمیکنه و ورژن 2 رو یک بنده خدایی تا یک جاهایش RTL کرده اما اگه یکیشون از بیس RTL هم باشه اخرشه!
نظر شما چیه!>؟
masoud
6 October 2014
مطلب جامعی بود.
علیرضا نامجو
6 November 2014
سلام
وب سایت خودتون از چه فریم ورکی استفاده کرده؟
سیستم که وردپرس هست اما قالب ریسپانسیو هست از چی استفاده شده؟
جواد
17 May 2015
ببخشید من فریم ورک فاوندیشن رو گرفتم اما فقط توی یک صفحه دو سه تا استایل برای فرم و … هستش آیا همش همینه یا فراتر از اینهاست؟
milad
31 January 2016
ui kits چرا نیست ؟؟؟ :/
حسینی
11 April 2016
واقعا جای تشکر داره