بهترین فریم ورک های css  در سال ۲۰۱۹

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

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

۱-Bootstrap

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

اگر با نحوه کار چارچوبی مانند Bootstrap آشنا نیستید ، چند نمونه کد به شما کمک می کنند ، تا به راحتی بتوانید از css قوی این فریم ورک نهایت استفاده را ببرید.

سیستم شبکه بوت استرپ مکانی عالی برای شروع است. شبکه Bootstrap از نخستین نسخه عمومی چارچوب در سال ۲۰۱۱ ، کالایی با ارزش بوده است. وقتی CSS Bootstrap را درج کردید ، ایجاد یک شبکه مبتنی بر flexbox می باشد که در همه مرورگرها کار می کند .

مثال :

<div class="container">
  <div class="row">
    <div class="col-sm">
      Column 1
    </div>
    <div class="col-sm">
      Column 2
    </div>
    <div class="col-sm">
      Column 3
    </div>
  </div>
</div>

همانطور که گفته شد ، Bootstrap همچنین دارای مجموعه ای کامل از اجزای UI است. برخی از مواردی که در گذشته سبک سازی آنها دشوار بوده است مانند منوها و card ها و … ، فقط با یک فریم ورکی مانند Bootstrap plug-and-play ساده شده است . مانند :

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

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

۲-  Foundation

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

جدول رسپانسیو ساده  یکی از موارد مورد علاقه ما است:

<table class="responsive-card-table unstriped">
  <!-- table rows code goes here... -->
</table>

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

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-icon">
      <img src="image.svg" alt="Icon">
    </div>
    <div class="timeline-content">
      <p class="timeline-content-date">2019</h2>
      <p>Example text for timeline item.</p>
    </div>
  </div>
  <!-- 

این نمونه ساده ای از بسیاری از مؤلفه هایی است که Foundation را به یکی از بهترین فریم ورک های CSS امروز تبدیل می کند.

۳-  UIkit

UIkit یکی دیگر از فریم ورک های محبوب css است و شاید از نظر ویژگی های CSS کمی مورد استقبال قرار نگیرد. علاوه بر بسیاری از ویژگی های مشابه به ویژگی های موجود در سایر فریم های معروف ، چند مؤلفه تخصصی مفید نیز وجود دارد.

اول از همه ، اگر هنوز flexbox خیلی راحت نیستید ، می توانید طرح های پیچیده مبتنی بر flexbox را با UIkit با استفاده از HTML ساده انجام دهید. در ابتدا ممکن است نحوه استفاده از flexbox در کلاس های HTML عجیب به نظر برسد اما این باعث می شود که شما از دانستن همه سؤالات مربوط به flexbox ، ستون ها / ردیف ها ، رشد فلکس و غیره جلوگیری کنید. مانند :

<div class="uk-flex uk-flex-wrap uk-flex-wrap-around">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

UIkit شامل ده ها مؤلفه است که سبکی جذاب را در خارج از باکس ارائه می دهد. بسیاری از ویژگی ها کلاسهای تخصصی هستند ، از جمله موارد زیر:

.uk-align-left ، .uk-align-Right و .uk- تراز وسط قرار دارد برای تراز کردن یا شناور عناصر

.uk-ستون-۱-۲ تا .uk-ستون-۱-۶ برای طرح بندی متن های چند ستونی ، به سبک مجله

.uk-radio ، .uk-checkbox و برای ورودی های جذاب

کلاس های مختلف ابزار حاشیه ای و بالشتک (.uk-margin-top ، .uk-padding-small و غیره)

uk-position-top ، .uk -موقعیت سمت چپ و غیره

اگر می خواهید یک فریم ورک CSS تازه و به خوبی حفظ داشته باششید ، UIkit ارزش امتحان را دارد. این برنامه در زبان های Less و Sass  موجود است و حتی شامل شیوه نامه ای برای تهیه زبان های راست به چپ(RTL) است.

Semantic UI-4

Semantic UI با بسیاری از فریم ورک های محبوب دیگر همپوشانی بسیاری دارد اما نحوه کار (که از نام آن مشخص می شود) مبتنی بر ماهیت معنایی نام کلاس است که برای ساخت قطعات استفاده می شود. به عبارت دیگر ، نام کلاس ها دوستدار انسان هستند.

به عنوان مثال ، به نحوه ساخت شبکه چهار ستونی نگاهی بیندازید:

<div class="ui grid">
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
</div

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

یک مثال دیگر ، که یک جدول داده ساده ایجاد می کند:

<table class="ui celled table">
  <!-- ... rest of the table code here... -->
</table>

این یک نمایش عالی از نحوه استفاده UI Semantic  از نام کلاس برای توصیف مؤلفه ساخته شده است. اگر بیشتر به فریم ورک های سنتی مانند Bootstrap یا Foundation عادت کرده اید ، منحنی یادگیری در مورد این ممکن است سریع تر باشد. اما پس از یادگیری ، استفاده از آن بسیار قدرتمند و لذت بخش است.

۵-Bulma

Bulma یکی دیگر از فریم ورک های محبوب CSS است و ویژگی اصلی آن این واقعیت است که اجزای آن تا حد زیادی به flexbox وابسته هستند ، و آن را به یک فریم ورک واقعاً مدرن تبدیل می کنند. می توانید فکر کنید که   Bulma تا حدودی مانند یک هیبرید از Bootstrap و Semantic UI  است اما بدون هیچ گونه پیچیدگی. bulma از برخی اصول مشابه Semantic UI با نام کلاس خود استفاده می کند ، بسیاری از مؤلفه های معروف را در بر می گیرد ، اما می تواند کارها را ساده نگه دارد .

مثال زیر نشان می دهد که چگونه می توان یک مؤلفه Bulma ساخته شد و نگهداری آن آسان است:

<section class="hero is-dark">
  <div class="hero-body">
    <div class="container is-fluid">
      <h1 class="title is-size-2">Example Heading</h1>
      <h2 class="subtitle">Example text goes here</h2>
      <p>Some example paragraph text here.</p>
    </div>
  </div>
</section>

توجه کنید که به عنصر حاوی <section> کلاس های hero و is-dark  داده می شود. این نشان می دهد که شما می خواهید یک بنر hero استفاده کنید که از تم تاریک پیش فرض استفاده می کند (یکی از هفت رنگ موضوع موجود با Bulma ، که همه آنها از طریق متغیرهای Sass قابل تغییر است)

همچنین کلاس های is * * را روی ظرف و عنوان اولیه توجه کنید. کلاس is-liquid کانتینر را قادر می سازد تا در هر صفحه سایز ، محور با حاشیه و بدون عرض حداکثر ، روان باشد. بدون این مقدار ، حداکثر عرض ظرف بسته به اندازه پنجره تغییر می کند. کلاس is-size-2 اندازه عنوان را مشخص می کند ، اندازه آن بین ۱ تا ۷ است.

همانطور که می بینید ، Bulma ساخت رابطهای مناسب برای موبایل را از طریق نام کلاس قابل خواندن بسیار آسان کرده است.