فریم ورک های css

 فریم ورک های css چیست ؟

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

اجزای معمول این فریم ورک های css  عبارتند از:

• کدهای CSS جهت ایجاد گرید(طرح استقرار عناصر صفحه وب=Layout): در واقع grid یک یک طرح همانند جداول ناهمگن هست که به طراحان وب اجازه میده که عناصر مختلف صفحه وب (متنها، دکمه ها، منوها، تصاویر و ... )رو درون خانه های اون جدول قرار بدن.
• ارائه سبکهای مختلف تایپوگرافی (حروف نگاری) برای عناصر HTML صفحه وب
• ارائه راه حل برای موارد ناسازگاری مرورگرها (Browsers) تا طراحان بتوانند با خیال راحت صفحاتی رو طراحی کنند که با اکثر مرورگرها سازگاری داشته باشد
• ارائه کلاسهای استاندارد CSS جهت استفاده عناصر مختلف صفحات وب بمنظور ارائه صفحات با ظاهر شکیل و حرفه ای و استاندارد. از عناصر ساده (متنها و تصاویر و ... ) تا پیشرفته (منوها، اسلایدها، تب ها و ...)

 

نقش فریم ورک های css

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

 

ویژگی هایی که در بررسی فریم ورک های css مهم است

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

 

میتوانید مقاله سایت رسپانسیو  را مطالعه کنید.

 

بررسی BOOTSTRAP

این فریم ورک قطعا بهترین فریم ورک واکنش گرا CSS است و توسط GITHUB ارائه و پشتیبانی می شود. BOOTSTRAP به منظور توسعه رابط کاربری و ظاهر سایت (FRONT-END) طراحی شده است و به شما برای طراحی سایت مفهومی، پروژه های اولیه مربوط به تلفن های همراه، ایجاد سیستم های GRID، تایپوگرافی، ساخت دکمه ها (دکمه سرچ و…) و…. کمک می کند.

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

 

 

• سازندگان: Mark Otto و Jacob Thornton.
• سال انتشار: 2011
• ورژن کنونی: 4.0
• محبوبیت: 124,657 ستاره در گیت هاب.
• توضیحات: “Sleek, intuitive, and powerful front-end framework for faster and easier web development”
• هسته: RWD and mobile first.
• سایز فریم ورک: 578KB (precompiled zip folder)
• پیش پردازنده: Sass
• واکنش گرا: بله
• ماژولار: بله
• قالب برای شروع: بله
• آیکون: Not included
• افزودنی ها: None bundled, but many third-party plugins are available.
• کامپوننت های اختصاصی: Jumbotron, Card
• مستندات: دارای مستندات بسیار قوی.
• شخصی سازی: دارای فایل جداگانه برای grid و reboot , شخصی سازی آسان با SASS و دارای شخصی ساز آنلاین نیست.
• پشتیبانی مرورگرها: آخرین نسخه های Firefox, Chrome, Safari, IE810-11-Microsoft Edge.
• لایسنس: MIT

 

 

بررسی Foundation

Foundation یک پروژه متن باز است و در دنیای CSS نقش مهمی را بازی می کند. مهمترین دلیل محبوبیت این فریم ورک در بین سایر فریم ورک های CSS، روان و واکنش گرا بودن آن است. به همین دلیل از آن برای ساخت وب سایت، ایجاد قالب های ایمیل، ساخت برنامه های تلفن همراه و وب استفاده می شود.

Foundation بسیار کاربر پسند است و تمرینات، پشتیبانی و نتیجه گیری های زیادی را به کار بر ارائه می کند. این فریم ورک دارای اجزا منحصر به فرد (Keystrokes، Joyride، Flex Video، و …) تعدادی افزونه است که کار را برای شما بسیار ساده خواهد کرد.

 

 

• سازندگان: ZURB
• سال انتشار: 2011
• ورژن کنونی:6
• محبوبیت: 27300 ستاره در گیت هاب.
• توضیحات: “The most advanced responsive front-end framework in the world”
• هسته: RWD, mobile first, semantic
• سایز فریم ورک: 197.5KB
• پیش پردازنده: Sass
• واکنش گرا: بله
• ماژولار: بله
• قالب برای شروع: بله
• آیکون: Foundation Icon Fonts
• افزودنی ها: بله
• کامپوننت های اختصاصی: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
• مستندات: دارای مستندات خوب همراه با منابع اضافی برای یادگیری.
• شخصی سازی: Basic GUI customizer
• پشتیبانی مرورگرها: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone +7
• لایسنس: MIT

 

نتیجه گیری

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

 

 

بررسی فریم ورک  BULMA

یک فریم ورک متن باز دیگر که دارای ویژگی های زیادی و به صرفه جویی در زمان و انرژی شما کمک زیادی خواهد کرد. در بین فریم ورک های CSS،  BULMA توانسته است به دلیل یادگیری و استفاده ساده جای خوبی را بین توسعه دهندگان وب پیدا کند.

این فریم ورک CSS دارای اجزای UI بسیار کاربردی نظیر زبانه ها، نوار ناوبری، جعبه ها، پانل و… است و می تواند به شما برای ساخت UI کاربر پسند کمک کند. همچنین BULMA قابلیت مقیاس پذیری بالایی دارد، یعنی شما می توانید تنها ویژگی های مورد نیاز خود را وارد کند و شروع به کار کنید.

 

 

بدون اغراق باید گفت که Bulma یکی از بهترین فریمورک های طراحی وب است، سبک و ساده! کار با کلاس های آن شما را مجذوب خود خواهد کرد. این فریمورک برپایه سیستم FlexBox طراحی شده است. این بدین معناست که شما تمام مزایای FlexBox را نیز خواهید داشت. مزایایی چون، سیستم شبکه بندی، کاشی ها و… .

نتیجه گیری

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

 

 

Ulkit

این مورد یکی از فریم ورک های CSS است که شاید تا به حال اسم آن را نشنیده باشید. اما Ulkit دارای عملکرد مناسب و خوبی است و توانایی های زیادی دارد از این رو به نظر ما باید توجه بیشتری به آن شود.

 

این فریم ورک بسیار سبک و مقیاس پذیر است و می توان از برای ساخت ظاهر فوق العاده برای سایت ها استفاده کرد. اساسا Ulkit از مجموعه ای از اجزا دارای قابلیت سفارشی سازی ساخته شده است و دارای ویرایش گر HTML ، FLEX، افزونه ها و اجزای اختصاصی است. از این فریم ورک به طور گسترده در تم های وردپرس استفاده می شود.

• سازندگان: YOOtheme
• سال انتشار: 2013
• ورژن کنونی: 3.0.0
• محبوبیت: 12426 ستاره در گیت هاب.
• توضیحات: “A lightweight and modular front-end framework for developing fast and powerful web interfaces”
• هسته: RWD, mobile first
• سایز فریم ورک: 326.9 KB (zipped folder)
• پیش پردازنده: Less, Sass
• واکنش گرا: بله
• ماژولار: بله
• قالب برای شروع: بله
• آیکون: دارد
• افزودنی ها: بله
• کامپوننت های اختصاصی: Article, Flex, Cover, HTML Editor
• مستندات: دارای مستندات خوب.
• شخصی سازی: دارای شخصی ساز GUI قوی در ورژن قبلی.
• پشتیبانی مرورگرها: Chrome, Firefox, Safari, IE+9
• لایسنس: MIT

نتیجه گیری

سبک بودن در کنار ویژگی های مثبت دیگر سبب شده است که این فریم ورک یکی از گزینه های مناسب پیشنهادی ما باشد.

 

 

MaterializeCSS

این مورد یک فریم ورک های css برای front-end و به صورت responsive است که مبتنی بر طراحی Material است. استفاده از این frameworkبخصوص برای کسانی که با پروژه های مشابه نظیر Bootstrap آشنا هستند بسیار ساده است. مجموعه ای از template های شروع کننده وجود دارد که به شما در طراحی ساده ی وبسایتتان کمک می کند.

 

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

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

 

Kube

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