CSS frameworks: Tailwind and Bootstrapأطر CSS: Tailwind وBootstrap

A framework is somebody else's CSS, already written and already tested. That buys you speed and costs you control — and the two frameworks in this course make opposite trades.

الإطار هو CSS كتبها غيرك واختبرها. وهذا يشتري لك سرعة ويكلّفك تحكمًا — والإطاران في هذه الدورة يقايضان بشكل متعاكس.

One of these frameworks works from a single line in your head. The other really wants a build step, and the honest reason why is worth understanding before you fight it.

أحد هذين الإطارين يعمل من سطر واحد في رأسك. والآخر يريد خطوة بناء فعلًا، والسبب الصادق يستحق الفهم قبل أن تصارعه.

Before any class names, the two models. One names things you recognise; the other names properties you already know. Every later lesson is these two ideas applied to one topic.

قبل أي أسماء أصناف، النموذجان. أحدهما يسمّي أشياء تعرفها؛ والآخر يسمّي خصائص تعرفها أصلًا. وكل درس لاحق هو هاتان الفكرتان مطبَّقتين على موضوع واحد.

Padding and margin are where a page silently goes wrong — 13px here, 15px there. Both frameworks answer with the same idea: a fixed scale of steps, and you may only pick a step.

الحشو والهامش هما حيث تختلّ الصفحة بصمت — 13 بكسل هنا و15 هناك. ويجيب الإطاران بالفكرة نفسها: مقياس ثابت من الدرجات، ولا يجوز لك إلا اختيار درجة.

Both frameworks ship a palette with numbered shades. Picking from it is faster than choosing a hex value, and it makes contrast something you can reason about instead of guess at.

يشحن الإطاران لوحة ألوان بدرجات مرقّمة. والاختيار منها أسرع من انتقاء قيمة ست عشرية، ويجعل التباين شيئًا تستطيع التفكير فيه بدل تخمينه.

Text is most of every page. Both frameworks give you a type scale and a set of weights — and one of them has a plugin that styles a whole article for you in a single class.

النص هو معظم كل صفحة. ويعطيك الإطاران مقياسًا للخط ومجموعة أوزان — ولأحدهما إضافة تنسّق مقالًا كاملًا في صنف واحد.

How wide is a thing? Both frameworks answer with a mix of fractions, fixed steps and a container that centres your page — and the container is the first class most people learn.

كم عرض الشيء؟ يجيب الإطاران بمزيج من الكسور والدرجات الثابتة وحاوية تتوسّط صفحتك — والحاوية أول صنف يتعلمه معظم الناس.

The three things that turn a rectangle into something that looks designed. Both frameworks scale all three, and the useful skill is knowing when to use one instead of another.

الأشياء الثلاثة التي تحوّل مستطيلًا إلى شيء يبدو مصمَّمًا. ويقيس الإطاران الثلاثة، والمهارة النافعة معرفة متى تستخدم واحدًا بدل آخر.

You already know flexbox. This lesson is a translation table — every property you learned has a class in both frameworks, and the thinking is unchanged.

أنت تعرف flexbox أصلًا. وهذا الدرس جدول ترجمة — فلكل خاصية تعلمتها صنف في الإطارين، والتفكير كما هو.

Flex arranges things in one direction. When you need both at once, the two frameworks part company completely: Bootstrap has a twelve-column system, Tailwind hands you CSS grid.

يرتّب flex الأشياء في اتجاه واحد. وحين تحتاج الاتجاهين معًا يفترق الإطاران تمامًا: فلـBootstrap نظام من اثني عشر عمودًا، وTailwind يسلّمك شبكة CSS.

This is the thing frameworks do best. A media query becomes a prefix on a class, and a layout that changes at three screen sizes fits on one line.

وهذا أفضل ما تفعله الأطر. فاستعلام الوسائط يصير بادئة على صنف، والتخطيط الذي يتغير عند ثلاثة أحجام شاشة يتّسع في سطر واحد.

A page that never reacts feels broken. The same prefix idea as breakpoints applies to states — and one of them is not optional, because people navigate with a keyboard.

الصفحة التي لا تتفاعل أبدًا تبدو معطلة. وفكرة البادئة نفسها من نقاط التوقف تنطبق على الحالات — وواحدة منها ليست اختيارية، لأن الناس يتنقلون بلوحة المفاتيح.

One class in Bootstrap, eight in Tailwind, and the interesting part is neither — it is which element you used and whether it is a button at all.

صنف واحد في Bootstrap وثمانية في Tailwind، والجزء المثير ليس أيهما — بل أي عنصر استخدمت وهل هو زر أصلًا.

Bootstrap styles form controls for you; Tailwind does not touch them until you say so. Both leave the two things that actually matter — the label and the error — entirely up to you.

ينسّق Bootstrap عناصر النموذج عنك؛ وTailwind لا يمسّها حتى تقول. وكلاهما يترك الشيئين المهمين فعلًا — التسمية والخطأ — لك تمامًا.

The most reused shape on the web: a box with a heading, some text and something to click. Bootstrap has one built; Tailwind expects you to build it once and reuse it.

أكثر شكل يُعاد استخدامه على الويب: صندوق فيه عنوان ونص وشيء تنقره. ولـBootstrap واحد مبني؛ ويتوقع Tailwind أن تبنيه مرة وتعيد استخدامه.

Every site has one, and it is the first place a framework saves you real time — and the first place a framework component quietly needs JavaScript.

لكل موقع واحد، وهو أول موضع يوفّر فيه الإطار وقتًا حقيقيًا — وأول موضع يحتاج فيه مكوّن الإطار JavaScript بهدوء.

Everything so far was CSS. Anything that opens and closes needs code — and a dialog that is merely visible, rather than properly opened, is the most common accessibility failure on the web.

كل ما سبق كان CSS. وكل ما يُفتح ويُغلق يحتاج شيفرة — والنافذة المرئية فحسب، لا المفتوحة كما ينبغي، أشيع إخفاق في إتاحة الوصول على الويب.

The strongest objection to utility classes: the same eight classes on forty buttons. There is a good answer, a tempting bad answer, and knowing which is which is the point of this lesson.

أقوى اعتراض على أصناف الأدوات: الأصناف الثمانية نفسها على أربعين زرًا. وثمة جواب جيد وجواب سيئ مغرٍ، ومعرفة أيهما أيّ هي مقصد هذا الدرس.

A default framework page looks like a framework page. Both let you change that at the root, and doing it there rather than overriding case by case is the difference between a theme and a patch.

صفحة الإطار الافتراضية تبدو صفحة إطار. ويتيح الاثنان تغيير ذلك من الجذر، وفعله هناك بدل التجاوز حالةً حالة هو الفرق بين سمة ورقعة.

One prefix in Tailwind, one attribute in Bootstrap, and a set of design decisions that neither of them makes for you — because a dark theme is not a light one inverted.

بادئة واحدة في Tailwind وسمة واحدة في Bootstrap، ومجموعة قرارات تصميم لا يتخذها أي منهما عنك — لأن السمة الداكنة ليست الفاتحة مقلوبة.

Twenty lessons of what these tools do well. This one is the other half of the judgement, because reaching for a framework by reflex is how small projects end up heavy.

عشرون درسًا فيما تحسنه هذه الأدوات. وهذا هو النصف الآخر من الحكم، لأن اللجوء إلى إطار بالانعكاس هو كيف تنتهي المشاريع الصغيرة ثقيلة.

You have now built the same things twice. This lesson is the decision, made from what you actually experienced rather than from what either project says about itself.

لقد بنيت الآن الأشياء نفسها مرتين. وهذا الدرس هو القرار، متخذًا مما جربته فعلًا لا مما يقوله كل مشروع عن نفسه.

Take the site you built by hand in the CSS course and build it again with the framework you chose. The comparison is the lesson — you are the only person who can make it fairly.

خذ الموقع الذي بنيته بيدك في دورة CSS وابنه مرة أخرى بالإطار الذي اخترته. والمقارنة هي الدرس — وأنت الوحيد القادر على إجرائها بإنصاف.