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

زهرا فنودی وردپرس 2020/10/22 135 0

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

Introducing Responsive Design Frameworks

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

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

مفهوم فریم ورک ها را می توان در مراحل مختلف طراحی وب سایت اعمال کرد. فریم ورک ها می توانند backend و frontend باشند که در این مقاله به بررسی انواع frontend می پردازیم. فریم ورک های Front end معمولا از فایلها و کدهای استاندارد شده ساخته شده اند.

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

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

معیارهای انتخاب یک فریم ورک مناسب

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

توجه: از لحاظ پیچیدگی فریم ورک های Frontend را می توان به دو گروه تقسیم کرد : فریم ورک های ساده و فریم ورک های کامل. این تمایز کاملا ذهنی است و دلیلی بر برتر بودن آنها نسبت به یکدیگر نیست.

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

 انواع فریم ورک های ساده

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

۱۱۴۰ CSS Grid

این فریم ورک مناسب مانیتور های بزرگ است و در اندازه ۱۲۸۰ بسیار عالی نمایش داده می شود. این فریم ورک از Media Query برای نمایش در دستگاه های موبایل استفاده می کند و در این مانیتور ها تمامی ستون ها را بر روی یکدیگر قرار می دهند تا به درستی قابل رویت باشند. این فریم ورک خود را اساسا برای اندازه رزولیشن ۱۲۸۰ طزاحی شده است اما با هر نوع نمایشگری حتی دستگاه های موبایل به خوبی وفق می دهد و به خوبی برای هر سایز کوچکتر، در مقیاس خودش تغییر اندازه می دهد.

Mueller
یک گرید ماژولار است که برای طراحی لایه های واکنش گرا و غیر واکنش گرا از آن استفاده می شود. اساس کار آن نمایشگرهای دسک تاپ است است. در این فریم ورک شما کنترل کاملی بر پهنای ستون ها ، شیارها و خطوط گرید دارید.

Titan
یک فریم ورک CSS برای طراحی واکنش گرا که کاربری آسانی دارد. فریم ورک Titan در دو نوع ۱۲ و ۱۶ ستونه ارایه شده است.

Responsive Grid System

یک فریم ورک ساده برای طراحی سبک های خلاقانه است. این فریم ورک از ابتدا ویژه دستگاه های موبایل طراحی شده است، که دارای ویژگی های Clearfix ، box-sizing می باشد. حجم آن در حالت فشرده دارای حجمی کمتر از ۱ کیلوبایت است.

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

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

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

Toast

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

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

Ingrid

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

۹۶۰ Grid System

۹۶۰ Grid System تلاشی برای ساده و موثر کردن طراحی وب است،۹۶۰ Grid System،با فراهم کردن اندازه های پرکاربرد بر اساس پهنای ۹۶۰ پیکسل میسر شده است. این فریم ورک به دو صورت ۱۲ و ۱۶ ستونه ارایه می شود و می توان از آنها بصورت جداگانه و یا بصورت لایه های پشت هم استفاده کرد.

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

Susy

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

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

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

Bootstrap

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

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

Foundation 3

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

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

Skeleton

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

معرفی فریم ورک های طراحی ریسپانسیو Gumby

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

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

ResponsiveAeon

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

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

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

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

برچسب ها

برچسبی برای نمایش وجود ندارد

توجه

کلیک

اگر با این مشکل آشنا هستید خودتان انجام دهید ولی اگر نمی دانید که این کار را چطور انجام دهید می توانید هم اکنون در ناحیه کاربری ثبت نام کرده و اطلاعات سایت را تیکت کنید تا با اندک هزینه ای کار شما را انجام دهیم . اگر خواستید می توانید برای مشاوره با شماره های ۰۹۱۷۹۰۵۹۳۵۰ و یا ۰۹۳۹۸۶۹۵۲۳۸ با ما در ارتباط باشید.

کلیه حقوق برای وب سایت پنگاش محفوظ می باشد و هر گونه کپی برداری پیگرد قانونی دارد.
تماس