معرفي فريم ورک هاي CSS براي طراحي واکنشگرا يا رسپانسيو
با ظهور پديده طراحی وبِ واکنش گرا يا Responsive بسياری از توسعه دهنده ها و طراحان ماهر و خلاق به ساختن فريم ورکهایی براي آسانتر و منظم تر کردن اين تکنيک طراحی پرداختند. در اين نوع طراحی عمليات رياضی مربوط به تغيير اندازه عناصر در صفحه ممکن است خسته کننده باشد و وقت زيادی را از طراح بگیرند. اما تعدادی فريم ورک رسپانسیو وجود دارد که اين فرآیند طراحی را برای طراحان و توسعه دهندگان آسان و سریع می کند. اين فريم ورکها تمام موارد مورد نياز شامل گريدهای پيچيده، لایه ها (layoutها)، و مديا کوئری ها را يک جا برای شما فراهم آورده تا طرح رسپانسیو خود را به آسانی پياده سازی کنید. در این مطلب تعدادی از محبوب ترین فريم ورک‌ها که بيشتر توسط طراحان مورد استفاده قرار گرفته را معرفي می کنیم.

Bootstrap:
احتمالا نام بوتسترپ (Bootstrap) را شنیده اید. فريم ورکی که توسط چند تن از مهندسین توييتر ساخته شده است و اکنون به عنوان بيشترین فریم ورک مورد استفاده شناخته می شود. بوتسترپ با قابلیت ها و امکانات جامع زيادی ساخته شده است که باعث می شود طراحان بتوانند آن را هر گونه که در نظر دارند براي هر طرح مجزا تغییر دهند.

Foundation:
فاوندیشن (Foundation) يک فريم ورک Front-end پیشرفته و رسپانسیو است که بر اساس گریدهای قابل انعطاف ساخته شده است که می تواند برای نيازهای دقيق و جزئی تغییر کند. این قابلیت باعث آسان شدن توسعه ساختارها براي دستگاه‌های موبايل و دسکتاپ با mark up یکسان می شود.

Skeleton:
یا همان اسکلت یکی از فريم ورک‌های سبکی است که بر اساس یک سیستم گرید (شبکه بندی) ساده ساخته شده است. گرید Skeleton به زیبایی از 1200 پیکسل تا اندازه موبایل ها و تبلت ها در دو حالت Landscape و Portrait با مقیاس مشخص، تغییر اندازه می دهند.

Golden Grid System:
اگر شما علاقه خاصی به گریدها دارید، بی شک ارتباط خوبی با Golden Grid System برقرار خواهید کرد. اين ساختار با یک گرید که دارای 18 ستون است با marginها و حاشیه های تمیز شروع می کند اما به زیبایی هنگام تغییر اندازه نمایشگر به ساختار 8، 4 ،يا 2 ستونه برای تبلت ها و موبایل ها تبدیل می شود.

320 and up:
بعضی از طراحان شیوه متفاوت تصاعدی در اندازه را نسبت به شیوه معمول و مطلوب تنازلی در طرح ترجیه می دهند. اینجا جاییست که فریم ورک 320 and up وارد می شود. در تعریف، اين فريم ورک را مي‌توان در دسته فريم ورک‌های Mobile First قرار داد. يعنی ابتدا طراحی برای نمايشگرهای کوچک انجام مي‌گیرد و تغییرات سایز را به صورت افزایشی در نظر می گیرند تا تغییرات مورد نظر بر روی طرح پس از اين افزایش اندازه اعمال شوند. اين فریم ورک به گونه‌ای ساخته شده که با آن می توان ساختارهایی برای نمایشگرهایی با سایز کوچک به بالا طراحی کرد. بر خلاف طراحی برای نمایشگرهای بزرگ، که به اندازه‌های پایین تر می رسند. در این تکنیک، محتوی اولویت اول را دارد.

Less:
Less يک فريم ورک کلاسیک است که بر اساس ساختار گرید ساده و ثابت در عرض تطابقی (Adaptive) عمل می کند، ساخته شده است. Less 4 ساختار آماده و 3 نوع تایپوگرافی از پیش تنظیم شده برای نمایش مناسب در دسکتاپ، تبلت‌ها، موبایل‌ها را در خود دارا است.
 

Frameless:
شاید به صورت کلی Frameless نباید در این لیست جای گیرد، چون نمی توان آن را به درستی رسپانسیو یا حتی به عنوان یک فریم ورک خواند. ایده اصلی پشت آن باعث می شود تا ساختن ساختارها برای نمایشگرهای مختلف قابل تصور شود. با گریدها یا شبکه بندی Frameless به سادگی می توان ستونی را موقعی که به آن نياز داريم، اضافه کرد.

Wirefy:
ایده و مفهوم یک طرح واکنشگرا یا رسپانسیو همیشه برای مشتریان و کاربران معنی دار نیست، و ساخت و ايجاد مفاهیمي که به آنها چگونگی و کلیّت کار آن را نشان دهد عملی وقت گیر است. با ورود به Wirefy و استفاده از آن (که فريم ورکي رسپانسیو برای ساخت Wireframeها است) ساختن مدل ها برای ساختار کلی سایت با عناصری مانند اسلایدرها، گالری ها، منوها ،و فرمها را آسان می سازد.

Gumby:
اگر شما در زمینه ی طراحی رسپانسیو به تازگی وارد شده اید، فریم ورک گامبی می تواند گزینه خوبی برای شروع شما باشد. Gumby ساده و سبک است و برخلاف بعضي از فريم ورکها که ممکن است در زمان شروع کمي گیج کننده باشند، يک فايل PSD و UI Kit را همراه با خود دارد که باعث آسان شدن ایجاد نمونه يا Mock up برای طرح شما می شود.

علاوه بر اینها نیز فرم ورکهای زیادی برای CSS هست، ولی در لیست بالا پراستفاده‌ ترین و محبوب ترين فريم ورک‌ها لیست شده اند که می توانید بسته به نیاز خود از آن ها در کارهایتان استفاده کنید.