فریم ورک های طراحی ریسپانسیو یا واکنش گرا

امروزه با ظهور تکنیک های طراحی واکنش گرا، ایجاد وب سایت به نحوی صورت می گیرد که بتوان آنها را در رزولیشن های مختلف نمایشگرهای دستگاه های موبایل و دسکتاپ مشاهده کرد، این روند منجر به ظهور فریم ورک های (Framework) واکنش گرا یا Responsive شده است.
در دنیای طراحی وب سایت ها، فریم ورک یک پکیج ساخته شده از فایلها و کدهای استاندارد شده است (HTML , css , JS, . . .) که برای توسعه وب سایت از آن استفاده می شود . هدف فریم ورک فراهم کردن یک ساختار مشترک است که برنامه نویسان مجبور به دوباره کاری نباشند و بتوانند از کدهای ارایه شده چندین بار استفاده کنند. استفاده از فریم ورک بخشی از کارها را کمتر کرده و باعث صرفه جویی در زمان شده است.

visual
مفهوم فریم ورک ها را می توان را در مراحل مختلف طراحی وب سایت اعمال کرد. فریم ورک ها می توانند backend و frontend باشند که در این مقاله به بررسی انواع frontend می پردازیم. فریم ورک های Front end معمولا از فایلها و کدهای استاندارد شده (HTML ,CSS,JS , . . .) ساخته شده اند.

مولفه های فریم ورکهای Frontend :

1. 1. دارای کد های منبع CSS برای ایجاد یک Grid هستند : این مولفه به برنامه نویسان امکان می دهد تا المان های مربوط به طراحی وب سایت را به روشی ساده و تطبیق پذیر، جایگذاری کنند بدون اینکه نگران بر هم خوردن آنها هنگام نمایش در نمایشگرهای مختلف باشند. با استفاده از این سیستم می توان به ساختارهای دارای ۱۲ ، ۱۶ و ۲۴ ستون رسید. تصویر زیر یک سیستم گرید را نشان می دهد.
3. 2. امکان مشخص کردن Typography برای المان های HTML
4. 3. ارایه راه حل هایی برای رفع مشکل عدم سازگار بودن مرورگرها در نمایش سایت ها
5. 4. ایجاد کلاس های استاندارد CSS که برای ایجاد یک سبک خاص در محیط کاربری استفاده می شود.

نحوه انتخاب یک فریم ورک مناسب
از لحاظ پیچیدگی فریم ورک های CSS را می توان به دو گروه تقسیم کرد : فریم ورک های ساده و فریم ورک های کامل. این تمایز کاملا ذهنی است و دلیلی بر برتر بودن آنها نسبت به یکدیگر نیست. در انتخاب یک فریم ورک مناسب مواردی هستند که توجه به آنها در انتخاب یک فریم ورک مناسب حائز اهمیت است:
سرعت راه اندازی : راه اندازی برخی از آنها بسیار ساده است ولی برخی از آنها به زمان بیشتری برای پیکربندی نیاز دارند.
سهولت : درک برخی از فریم ورک ها پیچیده بوده و نیاز به تلاش زیادی دارد، در مقابل کار با برخی از آنها ساده و راحت هستند.
امکانات : برخی از آنها پیچیده تر از دیگری هستند و گزینه های بیشتری را ارایه می دهند.

• قابلیت ترکیب شدن با سیستم های دیگر
• پشتیبانی طولانی مدت
• فریم ورک های ساده

عموما به آنها سیستم های گرید گفته می شود اما با این حال یک فریم ورک هستند. این نوع از فریم ورک ها مجموعه تعاریفی از یک سیستم ستونی را ارایه می کنند تا در این سیستم توزیع المان های مختلف مطابق با طراحی وب سایت به راحتی صورت گیرد.

1140 CSS Grid
این فریم ورک مناسب مانیتور های بزرگ است و در اندازه 1280 بسیار عالی نمایش داده می شود. این فریم ورک از Media Query برای نمایش در دستگاه های موبایل استفاده می کند و در این مانیتور ها تمامی ستون ها را بر روی یکدیگر قرار می دهند تا به درستی قابل رویت باشند. این فریم ورک خود را اساسا برای اندازه رزولیشن 1280 طزاحی شده است اما با هر نوع نمایشگری حتی دستگاه های موبایل به خوبی وفق می دهد و به خوبی برای هر سایز کوچکتر، در مقیاس خودش تغییر اندازه می دهد.
cssgrid.net
Mueller
یک گرید ماژولار است که برای طراحی لایه های واکنش گرا و غیر واکنش گرا از آن استفاده می شود. اساس کار آن نمایشگرهای دسک تاپ است است. در این فریم ورک شما کنترل کاملی بر پهنای ستون ها ، شیارها و خطوط گرید دارید.

muellergridsystem.com
Titan
یک فریم ورک CSS برای طراحی واکنش گرا که کاربری آسانی دارد. فریم ورک Titan در دو نوع 12 و 16 ستونه ارایه شده است.

titanthemes.com
Responsive Grid System, by Denis LeBlanc
یک فریم ورک ساده برای طراحی سبک های خلاقانه است. این فریم ورک از ابتدا ویژه دستگاه های موبایل طراحی شده است، که دارای ویژگی های Clearfix ، box-sizing می باشد. حجم آن در حالت فشرده دارای حجمی کمتر از 1 کیلوبایت است.

responsive.gs
Less Framework 4
یک سیستم گرید ساده است برای طراحی سایت های تطبیق پذیر است. دارای 4 لایه و 3 نوع Typography است که همگی بر مبنای یک گرید واحد هستند.

lessframework.com
Columnal
یک CSS سیستم گرید است که یک نسخه ترکیبی از دیگر CSS هاست که کدهای سفارشی به آن اضافه شده است. قابلیت ارتجاعی بودن آن از cssgrid.net به عاریت گرفته شده است، در حالی که مبنای برخی از کدهای آن از فریم ورک 960 gs اقتباس شده است.

columnal.com
Toast
یک فریم ورک CSS بسیار ساده است اما ساده ترین آنها نیست. در این فریم ورک از گرید واکنش گرا با 12 ستون استفاده شده که در آن می توان افکت های ملایمی را به طراحی اعمال کرد. همچنین با وجود ویژگی box-sizing شما می توانید لایه ها و حاشیه هایی را به گرید اضافه کنید بدون اینکه باعث ایجاد ناهماهنگی در بخش های دیگر شوید.

daneden.me/toast
Ingrid
Ingrid یک سیستم چینش سیال است و هدف اصلی آن کاهش استفاده از کلاس های گوناگون در یک بخش مشخص می باشد. این ویژگی باعث شده که این فریم ورک المان های مزاحم کمتری داشته باشد .

960 Grid System
960 Grid System تلاشی برای ساده و موثر کردن طراحی وب است، این ویژگی 960 Grid System ، با فراهم کردن اندازه های پرکاربرد بر اساس پهنای 960 پیکسل میسر شده است. این فریم ورک به دو صورت 12 و 16 ستونه ارایه می شود و می توان از آنها بصورت جداگانه و یا بصورت لایه های پشت هم استفاده کرد.

960.gs
Susy
Susy بر اساس سیستم CSS های Natalie Downe ایجاد شده است. شما می توانید از آن در هرجایی،اعم از سایت های استاتیک یا داینامیک، وردپرس، Django و هر جایی از آن استفاده کنید.

susy.oddbird.net

فریم ورک های کامل
این نوع فریم ورک ها با ارایه ویژگی های بیشتری همچون انواع فرم ها،دکمه ها،قابهای تصاویر،قالبهای HTML آیکون ها و دیگر مولفه های قابل تنظیم ، به راحتی قابلیت سفارشی شدن دارند.

Bootstrap
یک فریم ورک قدرتمد از نوع front end است. Bootstrap از LESS CSS استفاده می کند. این فریم ورک توسط متخصصین Twitter ساخته شده و به دلیل قابلیتهای زیادی که دارد از رایج ترین فریم ورک هایی است که امروزه در طراحی های واکنش گرا از ان استفاده می شود. Bootstrap دارای گرید 12 ستونه است و با سیستم های دسکتاپ و دستگاه های موبایل سازگاری خوبی دارد.

twitter.github.com/bootstrap
Foundation 3
یک فریم ورک پیشرفته از نوع front end است. Foundation 3 بر اساس پردازنده CSS قدرتمندی به نام Sass ساخته شده است. این ویژگی به Foundation 3 این قابلیت را می دهد که بسیار انعطاف پذیر باشد بطوری که بتوان تمام جزییات را در آن تغییر داد.

foundation.zurb.com
Skeleton

Skeleton یک فریم ورک بسیار زیبا و مناسب برای طراحی های ویژه دستگاه موبایل است. Skeleton یک مجموعه کوچک از فایل های CSS است که علاوه بر سبک بودن قادر است در هر اندازه ای از مانیتور بدون مشکل به نمایش درآید.

getskeleton.com
YAML 4
یک CSS فریم ورک ماژولار است و طوری طراحی شده که بسیار انعطاف پذیر باشد. YAML 4 در بسیاری از مرورگرهای مدرن مانند Chrome, Firefox, Opera, Safari and Internet Explorer پشتیبانی می شود.

yaml.de
Gumby
Gumby یک CSS فریم ورک بر مبنای گرید 960 پیکسل است که انواع مختلفی از گرید ها با تعداد ستون های متنوع را ارایه می کند. این ویزگی Gumby باعث می شود که در هنگام طراحی انعطاف پذیری بسیار بالایی داشته باشد. Gumby با ارایه فایلهای آمده ایجاد قالب را در ابتدا برایتان آسان تر می کند.

gumbyframework.com
Kube
یک CSS فریم ورک مناسب برای طراحی های پیشرفته است. بسیار تطبیق پذیر و دارای سیستم گرید کاملی است. این فریم ورک typography بسیار زیبایی را ارایه می کند.

imperavi.com/kube
ResponsiveAeon
ResponsiveAeon فریم ورکی بسیار زیباست که از گرید سیستم CSS3 استفاده می کند. این فریم ورک دارای گرید واکنش گرا بر اساس Media Query ، HTML 5 و جاوا اسکریپت است.

با توضیحات ارایه شده و معرفی فریم ورک های رایج، بسته به نوع طراحی وب سایت ومواردی که مورد نیازتان است می توانید مناسب ترین فریم ورک را انتخاب کنید.