6 مورد از برترین فریم ورک های CSS را بشناسید

دسته بندی: برنامه نویسی
سطح مقاله: ساده
زمان مطالعه: 7 دقیقه
۰۲ مهر ۱۳۹۸

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

فهرست محتوای این مقاله

آیا استفاده از فریم ورک های CSS پیشنهاد خوبی است؟

امروزه فریم ورک ها بسیار محبوب شده اند و استفاده از آنها تبدیل به یک استاندارد شده است. چون بسیاری از اجزا و اِلمان های طراحی سایت از قبل داخل کتابخانه ها تعریف شده اند و برنامه نویس می تواند به راحتی از آنها استفاده کند. به کمک فریم ورک دیگر لازم نیست چرخ را دوباره از نو بسازیم و درگیر مسائل تکراری بشویم. البته این فریم ورک ها مثل هر تکنولوژی دیگر معایبی هم دارند. برای مثال یک نمونه Landing Page ساده که از بوت استرپ فشرده شده استفاده می کند، ممکن است تا 90% فایل های CSS آن هیچ کاربردی در صفحه وب نداشته باشند. اما در حالت کلی مزایای فریم ورک ها بیشتر از معایبشان بوده و کفه ترازو به نفعشان سنگینی می کند.

آشنایی با فریم ورک بوت استرپ

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

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

معرفی و بررسی فریم ورک Foundation

آشنایی با فریم ورک فاندیشن

نمی‌شود راجع به برترین فریم ورک های CSS صحبت کرد و نامی از فاندیشن نبرد. فاندیشن در بازار فریم ورک های فرانت اند رقیب اصلی و سرسخت بوت استرپ حساب می شود. یک فریم ورک اوپن سورس و رایگان برای طراحی واکنش گرا رابط کاربری می باشد که کامپوننت های آماده فراوانی در اختیار برنامه نویس قرار می دهد. شرکت Zurb سازنده این فریم ورک است که با Foundation از یک شبکه 12 ستونی برای تقسیم صفحه استفاده می کند. می توانید داخل این سیستم عرض عناصر صفحه را با % نشان دهید یا از مدیا کوئری ها استفاده کنید. به این ترتیب دیگر مهم نیست دستگاهی که سایت شما را نشان می دهد آیفون، بلک بری یا حتی یک تلویزیون هوشمند باشد. در هر حالت اندازه ها به درستی تغییر می کنند. چند پلاگین جاوا اسکریپت مثل Orbit و Reveal داخل Foundation تعریف شده اند تا کار با اسلایدرها و ماژول های تصویر را راحت‌تر کنند.

آشنایی با فریم ورک Semantic UI

آشنایی با فریم ورک Semantic UI

سایت ها نقاط مشترک زیادی با هم دارند. فریم ورک ها کمک می کنند این نقاط مشترک را در کمترین زمان ممکن ساخته و زمان خود را روی مسائل مهم تر بگذارید. Semantic UI یکی از این فریم ورک ها است که به شما کمک می کند به جای اینکه تمام عناصر سایت را از اول بسازید، از کامپوننت های آماده استفاده کنید.  Semantic UI به آسانی قابل یادگیری است و سایت اصلی مستندسازی قدرتمندی برای آن انجام داده است. کدهای این فریم ورک بسیار خوانا هستند و خطایابی کدها نیز راحت می باشد. همچنین Semantic UI به خوبی با سایر فریم ورک ها مثل React یا Angular ادغام می شود.

فریم ورک Pure.CSS ساخت شرکت یاهو

بررسی Pure CSS

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

فریم ورک سبک و قدرتمند UIKit

فریم ورک UIKit

UIKit یک فریم ورک سبک و ماژولار است که به شما اجازه می دهد با سرعت بالا ظاهر سایت خود را بسازید. UIKit از پیش پردازنده های Sass و Less استفاده کرده، ساختار خوبی دارد و به خوبی قابل توسعه است. اگر دوست ندارید رابط کاربری شما تکراری باشد و شبیه به سایت های دیگر شود، UIKit به کمک Themeها این قابلیت را در اختیار شما می گذارد تا ظاهر اختصاصی خودتان را طراحی کنید. UIKit به خوبی در موبایل، تبلت، لپ تاپ و PC ظاهر خودش را حفظ می کند. این فریم ورک هماهنگی خوبی با وردپرس دارد و توصیه می کنیم توسعه دهندگان وردپرس از آن استفاده کنند. مثلا اگر پلاگینی برای وردپرس نوشته اید می توانید به جای بوت استرپ از UIKit استفاده کنید.

فریم ورک زیبا و حرفه ای Materialize CSS

بررسی فریم ورک Materialize CSS

یک کتابخانه طراحی رابط کاربری یا UI است که مثل بیشتر کتابخانه‌هایی که معرفی کردیم با HTML CSS و جاوا اسکریپت طراحی شده است. پشت Materialize CSS شرکت گوگل قرار دارد که به احتمال زیاد همین نکته شما را وسوسه می کند تا آن را امتحان کنید. طراحی ریسپانسیو به صورت داخلی در Materialize CSS تعبیه شده و تغییر ابعاد صفحه نمایش ظاهر سایت شما را به هم نمی ریزد. به خاطر Cross Browser بودن Materialize CSS سایت در تمام مرورگرهای مطرح دنیا به درستی رندر و اجرا می شود. همینطور این فریم ورک بسیار سبک و Flat است و استفاده از آن بار اضافه ای به پروژه شما اضافه نمی کند.

نتیجه گیری 

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

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

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل