۱۰ فریم‌ورک برتر جهت طراحی قالب واکنش‌گرا

فرستاده شده: آوریل 11, 2015 توسط احسان شریعتی در Uncategorized
برچسب‌ها:,

امروزه بازدیدکنندگانی که با گوشی موبایل و یا تبلت به وبسایت ها مراجعه می کنند کمتر از افرادی نیست که برای این منظور از سیستم های دسکتاپ استفاده می کنند. لذا طراحی صفحات وبی مناسب برای این دیوایس ها یکی از مسائل اساسی در این زمینه است.

تا چندین سال پیش تنها مسئله مانیتورهای معمولی(معمولی آن زمان) و مانیتورهای عریض بود که مشکلش با قرار دادن حاشیه در دو طرف صفحه حل می شد. اما با استفاده از این راه حل نمی شود مشکل تفاوت اندازه مانیتورهای موبایل و دسکتاپ که اختلاف اساسی دارند را حل کرد.

به این منظور شیوه طراحی واکنش‌گرا(به انگلیسی: Responsive) ابداع شده است تا چیدمان صفحه را با توجه به نیاز مشخص کند. برای نمونه همین وبسایت IT Crowd که آن را ملاحظه می کنید از یک قالب واکنش‌گرا بهره می برد کافی است عرض صفحه مرورگرتان را با استفاده از ماوس کم کنید تا ببینید پس از رسیدن به یک اندازه خاص چطور قالب تغییر پیدا میکند و در سایز پایین بجای پدیدار شدن اسکرول افقی که حالت نامطلوبی دارد منوهای بالا به یک لیست کشویی تبدیل می شوند و سایدبار به پایین صفحه منتقل می شود. که با این کار هم قالب صفحه شکل زیباتری می گیرد و هم خوانایی آن در موبایل ها بالاتر می رود.

در زیر لینک مربوط به ۱۰ فریم‌ورک جهت طراحی واکنش‌گرای صفحات وب به همراه لینک آموزشی آن ها آمده است. هر فریم ورک دارای تعدادی فایل CSS و جاوا اسکریپت است که در قسمت سرآیند(header) صفحات باید فراخوانی شوند و پس از آن می توان از کلاس های آن ها برای طراحی استفاده کرد.

اگر چه همگی کارایی نسبتا یکسانی دارند اما هر یک نیز دارای ویژگی های منحصر به فردی هستند که آن ها را از بقیه متمایز می کند. مثلا برخی از این فریم ورک ها مانند بوت استرپ(مورد اول) علاوه بر امکان طراحی واکنش گرا دارای تعدادی پلاگین جی‌کوئری مانند پنجره مودال، اسلایدر کروزل و تولتیپ هستند که کار طراحی سایت را تسریع و تسهیل می کنند.

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

۱- Twitter Bootstrap (آموزش)

۲- Foundation (آموزش)

۳- Skeleton (آموزش)

۴- HTML5 Boilerplate (آموزش)

۵- HTML KickStart (آموزش)

۶- Montage HTML5 Framework (آموزش)

۷- SproutCore (آموزش)

۸- Zebra (آموزش)

۹- CreateJS (آموزش)

۱۰- Less Framework (آموزش)

from IT Crowd http://ift.tt/1CEfHwk
via IFTTT

Advertisements

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s