معرفی فریم ورکهای فرانت اند ( CSS Frameworks )


دانلود پایان نامه

در مقاله ی قبل به بررسی مفهوم اصلی فریم ورک پرداخته شد و در پایان دسته بندی موضوعی ساده و کامل را بر اساس قابلیت هایی که فریم ورکهای فرانت اند به برنامه نویس می دهند مشخص کردیم و بر این اساس به معرفی فریم ورکهای CSS موجود و کاربردی پرداخته خواهد شد.

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

این فریم ورکها را اغلب سیستم های گرید ( grid systems ) می نامند، اما در واقع فریم ورک هستند و استایل شیت هایی ( style sheet) را با سیستم های ستونی برای تسهیل توزیع عناصر مختلف بر اساس طراحی ایجاد شده فراهم می کنند. در واقع با استفاده از این فریم ورکها میتوان اساس یک طراحی واکنش گرا را سریع ایجاد و گریدبندی مورد نیاز را پیاده سازی کرد تا بتوانید طرح مورد نیاز خود را در زمان سریعتری به صورت واکنش گرا پیاده سازی کنید.

۱۱۴۰ CSS Grid

1140 grid با نمایشگرهای ۱۲۸۰ کاملاً منطبق است. در مانیتورهای کوچکتر با پهنای مرورگر منطبق می شود. این فریم ورک از مدیا کوئری ( media query ) برای نمایشگرهای موبایل استفاده می کند، بدین گونه که تمامی ستونها زیر هم قرار می گیرند تا جریان اطلاعات معناداری خود را حفظ کند.

Mueller Grid System

MUELLER یک سیستم گریدبندی ماژولار است که برای طراحی لایه های واکنش گرا و غیر واکنش گرا بر اساس Compass از آن استفاده میشود. در این فریم ورک، شما بر پهنای ستون ( column width )، فاصله ستونها ( gutter ) و مدیا کوئری ( media query ) کنترل کامل دارید.

muellergridsystem-css-framework-فریم ورک css

Responsive Grid System, by Graham Miller

فریم ورکی بسیار آسان، سریع و انعطاف پذیر برای طراحی واکنش گرای سایت که از طراحی واکنش گرای Ethan Marcotte الهام گرفته است. با استفاده از این فریم ورک شما می توانید به تعداد دلخواه و بسته به طرح وب سایت خود، گرید داشته باشید. اگر وب سایت مرجع آن را نگاه کنید به راحتی استفاده از آن پی خواهید برد.

 

Responsive Grid System, by Denis LeBlanc

یک فریم ورک CSS ساده برای طراحی سریع و خلاقانه سایت های واکنش گراست. این فریم ورک در ابتدا برای نمایشگرهای موبایل طراحی شد، که دارای ویژگی clearfix برای پاکسازی عناصری بود که به صورت شناور ( float ) در کنار هم قرار گرفته بودند، box-sizing: border-box برای اضافه کردن padding به عناصر صفحه است. نکته ی جالب اینجاست که حجم فشرده آن کمتر از ۱ کیلوبایت است.

Less Framework 4

یک سیستم گریدبندی ساده برای طراحی سایت های واکنش گرا است. این فریم ورک حاوی ۴ لایه و ۳ مجموعه تایپوگرافی است که همگی بر مبنای یک گرید واحد پیاده سازی شده اند.

Gridiculo.us

استفاده از این فریم ورک بسیار آسان و قابل فهم است در حالی که انعطاف پذیری خوبی دارد، در صورتی که قصد دارید در زمانی سریع یک وب سایت واکنش گرا و ساده و مینیمال را پیاده سازی کنید می توانید از این فریم ورک استفاده کنید. طبق تصویر زیر در ۴ حالت زیر به کاربر امکان می دهد تا طرح وب سایت خود را پیاده سازی نماید، کافی است برای هر div یا section کلاس grid را تعریف کنید و یکی از ۴ حالتی که می خواهید را در کنار آن بنویسید و در عنصر داخلی آن از کلاس row استفاده کنید و پس از آن سایز و پهنای المان ها را بر اساس کلاس ها مشخص نمائید.

فریم ورک css به نام Gridiculo

Toast

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

فریم ورک css به نام Toast

Ingrid

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

۹۶۰ Grid System

این فریم ورک تلاشی برای ساده کردن طراحی سایت از طریق فراهم کردن ابعاد مشترک براساس عرض ۹۶۰ پیکسل است. در دو نسخه ۱۲ و ۱۶ ستونی ارائه می شود، که می توانند بصورت جداگانه و یا پشت سر هم استفاده شوند.

906-grid-system-framework

Base

فریم ورک فوق آسان واکنش گرا که برای نمایشگرهای موبایل، تبلت، نوت بوک، و دسکتاپ ها طراحی شده است. این فریم با استفاده از LESS  پیاده سازی شده است. همچنین با استفاده از javascript task runnerهایی همچون Gulp , Bower , …. می توان نسبت به پیاده سازی آن اقدام نمود.

Susy

یک سیستم گریدبندی برای compass است، این فریم ورک بر اساس سیستم CSS های Natalie Downe ساخته شده است. از این فریم ورک میتوان هرجایی اعم از سایتهای استاتیک، Django ، Rails ، WordPress و … استفاده کرد. این فریم ورک بصورت پکیج بعنوان بخشی از Middleman نیز عرضه میشود. در واقع شما می توانید با استفاده از Sass , Compass و susy یک وب سایت ماژولار و حرفه ای به صورت کاملا واکنش گرا با قابلیت توسعه ی آسان پیاده سازی نمایید.

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

این فریم ورکها، فریم ورکهایی کامل با ویژگی های بیشتری مانند تایپوگرافی، مجموعه ای از فرمها، دکمه ها، آیکون ها،منوهای ناوبری ( navigation )، پیغام هشدار( pop up )، قالب دهی تصاویر، تمپلت های HTML، و تنظیمات سفارشی بیشتر ساخته شده اند. که همه ی این ویژگی ها کمک می کنند علاوه بر گریدبندی و ایجاد وب سایتی واکنش گرا با استفاده از المانها و استایل های آماده شده توسط فریم ورک وب سایت کاملی را در زمان بسیار سریع تری راه اندازی نمود. تفاوت این سبک فریم ورک ها به خاطر همین ویژگی های اضافی می باشد. با استفاده از فریم ورک های ساده فقط میتوان گرید بندی و واکنش گرا بودن وب سایت را تنظیم کرد و برای فرم دهی و استایل دهی به المان ها باید کدهای دستی نوشته شود که در بیشتر مواقع کاربردی تر هستند.

Boostrap

یک فریم ورک قدرتمند از نوع front-end  است که برای طراحی آسانتر و سریعتر ساخته شده است. این فریم ورک توسط متخصصین Twitter   ساخته شده است. Boostrap از LESS CSS استفاده میکند. از طریق Node نگاشته شده و از طریق GitHub مدیریت و توسعه داده می شود. فریم ورک بوت استرپ به تازه کاران امکان میدهد تا کارهای شگفت انگیزی را در سایت انجام دهند. در نسخه های جدید، این فریم ورک با استفاده از sass نیز قابل توسعه و تغییر است و میتوان شخصی سازی نمود. برای نسخه ی راست چین ( فارسی ) مشکلاتی وجود داشت که توسط طراحان و توسعه دهنده های ایرانی نسخه ی فارسی آن نیز بر روی گیت هاب منتشر شده است.

فریم ورک بوت استرپ - Boostrap

 

Foundation

یک فریم ورک پیشرفته واکنش گرا از نوع front-end است. این فریم ورک بر اساس پردازنده قدرتمند CSS به نام Sass  ساخته شده است که طراحی Foundation را بسیار سریع و انعطاف پذیر میکند به گونه ای که بتوان تمام جزئیات را در آن تغییر داد و به صورت کاملا ماژولار توسعه داد. نکته ی قابل توجه این است که فریم ورک Foundation  مشکل راست چین بودن ( rtl ) برای زبان فارسی را ندارد و هنگام پیاده سازی می توان مشخص کرد المان های صفحه به چه سبکی چیده شوند.

فریم ورک Foundation

Skeleton

یک فریم ورک بسیار زیبا برای طراحی های موبایل پسند است. این فریم ورک مجموعه ای کوچک از فایلهای CSS است که به شما کمک میکند تا سایت هایی را بسازید که علاوه بر سبک بودن، در هر اندازه ای از نمایشگرها ( لب تاپهای ۱۷″ یا گوشی های آیفون) بدون مشکل و به زیبایی به نمایش درآیند.

با توجه به تصویر زیر مشاهده می کنید که این فریم ورک با استفاده از Breakpoint های زیر دستگاه های محتلف را پشتیبانی می کند و کاملا واکنش گراست.

فریم ورک Skeleton

شما می توانید دمویی را که خود وب سایت Skeleton آماده کرده است رادر لینک زیر ببینید و بر روی نمایشگر های مختلف تست کنید:

مشاهده دمو

فریم ورک Skeleton

YAML 4

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

فریم ورک Skeleton

Gumby

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

Kube

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

فریم ورک css به نام Kube

ResponsiveAeon

فریم ورکی ظریف و مینیمالیستی که از سیستم گریدبندی CSS3 استفاده می کند. این فریم ورک دارای گرید واکنش گرا براساس HTML5 و مدیا کوئری و جاوا اسکریپت است.

فریم ورک ResponsiveAeon

چگونه فریم ورک صحیح را انتخاب کنیم؟

انتخاب فریم ورک مناسب برای سایت به چند دلیل کار آسانی نیست :

۱ ) وب سایت ها متفاوت از یکدیگر هستند و هر وب سایتی نیازمندی مختص به خود را دارد. استفاده از یک فریم ورک بسیار کامل برای یک صفحه وب سایت ( single page ) شاید کافی و جالب به نظر برسد ولی باعث از دست رفتن منابع دیگری خواهد شد.

۲ ) در حال حاضر تفاوتهای قابل ملاحظه ای بین فریم ورکها وجود ندارند. همگی فریم ورکها کامل و آسان هستند. با این وجود، هنگام انتخاب فریم ورک مناسب، لازم است نکاتی را مد نظر داشت:

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

 

مزایا و معایب استفاده از فریم ورکها

مزایا

  • تسریع فرایند موک آپ ( mock-up )
  • کدهای مرتب
  • راه حل های آسان برای مشکلات رایج CSS
  • انطباق پذیری تقریبا تضمینی با مرورگرها
  • یادگیری روشهای خوب
  • داشتن یک رویه برای حل مشکلات رایج، بسیاری از پروژه ها را آسانتر می کند.
  • مفید در کارها و پروژه های مشارکتی
  • واکنش گرا بودن وب سایت
  • قابلیت توسعه سریع تر و استفاده از ماژول های ساخته شده و آماده برای فریم ورک ها

معایب

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

آیا استفاده از فریم ورک توصیه می شود؟

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *