اولین نکته ای که وجود دارد اینکه هیچ css از پیش تعریف شده ای وجود ندارد! یعنی اگر شما از تگ h استفاده کنید مانند یک تگ p معمولی هست،چرا ؟ چون همونطور که گفتیم این فریمورک مجموعه ای از کلاس هاست.
شما می توانید در کدهای html این css ها را به class attribute (منظور class=" ") اضافه کنید یا در فایل که قابلیت کامپایل دارد به تگ خودتون (در اینجا تگ های h) را سفارشی یا کلاس جدیدی ایجاد کنید. همچنین کلاس های جدیدی که ایجاد می کنید می توانید بدون محدودیت در کلاس های دیگر استفاده کنید. مثلا:
اگر به تصویر بالا دقت کنید رنگ border ما در کلاس gray-right-border-dotted خاکستری (border-gray-400) است اما در کلاس category آن را بازنویسی کردیم. همچنین صفحات html مثلا در مثال بالا همانطور که میبینید ما از border-blue-400 استفاده کردیم، حال فرض کنید می خواهیم رنگ border را به قرمز تغییر بدهیم برای اینکار میتوانید به صورت زیر عمل کنیم:
<div class="category border-red-400">مثلا یچیزی</div>
نکته ای که در تصویر بالا وجود دارد من border-blue-400 بعد از gray-right-border-dotted نوشتم، اگر کلاس border-blue-400 قبل از آن می نوشتم همان رنگ خاکستری در کلاس gray-right-border-dotted بازنویسی می شد. (اولویت با سمت راست است)
اگر به تصویر بالا نگاه کنید متوجه می شوید که فایل ها از بالا به پایین کامپایل میشوند. به این معنا که اگر کلاس gray-border-dotted بعد از کلاس category تعریف کنیم، کلاس gray-border-dotted بر روی کلاس category اعمال نخواهد شد.
این کلاس ها عبارت اند از:
همانند تصویر زیر این نوع کلاس ها را در فایل css به صورت زیر می نویسیم:
اما ما در این فریمورک میتوانیم از این کلاس ها به مانند کلاس معمولی نیز استفاده کنیم!
<div class="bg-gray-200 hover:bg-blue-200">یک چیزی</div>
تگ div پس زمینه خاکستری دارد وقتی ماوس را روی این div می بریم پس زمینه به رنگ آبی تغییر می کند.
یک خوبی که دارد این هست که نام کلاس ها خلاصه است مثلا: m به معنی margin ، p به معنی padding و w به معنی width و همچنین h به معنی height کی باشد. همچنین اینها باز به زیر دسته های خاص خودشان تقسیم می شوند مثلا در مورد m به این صورت است که : mx به معنی margin left و margin right و my به معنی margin top و margin bottom هم چنین mt به معنی margin top و... .
استفاده از flexbox که در این روش مرورگرهای قدیمی پشتیبانی نمی شوند:
استفاده از clearfix و float-left برای پشتیبانی از ie 9:
اگر بخواهید grid مانند bootstrap داشته باشید کافیه بجای w-1/3 از w1/12 استفاده کنید.(برای درک بهتر به مستندات وب سایت مراجعه کنید)
این breakpoint ها چی هستند ؟
برای اینکه بتوانیم یک صفحه Responsive یا همان واکنشگرا داشته باشیم باید نقاط شکست یا همان Breakpoint ها را در طرح خود پیدا کنیم و با استفاده از آن نقاط می توانیم کوئری مناسب را بنویسیم.
منبع این نقل قول
تفاوت breakpoint های این فریمورک نسبت به bootstrap خیلی جزیی هست البته می توانیم آن هم سفارشی کنیم.
کلاس های utility عبارت انداز: sm md lg xl
نکته بسیار مهم که وجود دارد این است که :بصورت پیش فرض اگر از این کلاس های breakpoint استفاده نکنید به این معناست که شما در حال طراحی برای موبایل هستید.
<div class=" bg-white sm:bg-gray-100 md:bg-blue-200 lg:bg-green-700 xl:bg-red-300"> یچیزی دیگرتری!</div>
ما در بالا div responsive طراحی کردیم که در سایز های مختلف صفحه نمایش رنگ پس زمینه مختلفی دارد. در موبایل سفید و ...
نکته دیگری که وجود دارد، چند کلاس برای یک breakpoint وجود دارد باید قبل هر کدام از آنها breakpoint آن را مشخص کنیم:
<div class="md:bg-blue-200 md:border md:border-dotted"> یچیزی دیگرتری!</div>
و نکته آخر اینکه اگر ما کلاسی را به پایین ترین breakpoint اعمال کنیم، آن کلاس تا بالاترین breakpoint اعمال می شود. به عنوان مثال اگر ما در نسخه موبایل رنگ پس زمینه را قرمز قرار دهیم در تمام breakpoint ها رنگ پس زمینه قرمز باقی خواهندماند، مگر به طور صریح رنگ پس زمینه را تغییر دهیم(که رنگ جدید دوباره از آن breakpoint به بالا اعمال خواهد شد).
این نکاتی مهمی بود که در این 2 3 روزی که با این فریمورک لذت بخش کارکردم به آن رسیدم (البته همش تو آموزش ها و مستنداشت بود و من فقط نکات مهم گرداوری کردم?).
حالا می رسیم به بخش هیجان انگیز این مطلب و معرفی ابزار ها و پلاگین ها و... این فریمورک!
من توضیحی نمی دهم خودتان بروید داخل لینک و کلی کیف کنید.
