كنا قد نشرنا من قبل تقريرا عن حزمة الأدوات الشهيرة بوتستراب Bootstrap.
.webp "إطار عمل W3.CSS") |
| من أهم تطبيقات W3.CSS أنه يسمح للمبرمج ضبط أبعاد الموقع الإلكتروني بشكل صحيح دوما مهما كان الجهاز الذي يستخدمه الشخص الذي يتصفحه، صورة من: Seobility، CC BY-SA 4.0. |
اليوم نقدم هذا الدرس التعليمي عن W3.CSS البديل عالى الجودة لبوتستراب.
ما هو W3.CSS؟:
يعد W3.CSS إطار عمل أصغر وأسهل وأسرع من بوتستراب.
إنه ينتمي إلي لغة الأنماط الشهيرة CSS وتعني بالعربية ((أوراق الأنماط المتتالية)) .. لكنه يتميز بأنه حديث وسريع الاستجابة، وسهل الاستخدام، كما يركز أولا على أجهزة الهواتف الذكية، وهي الأجهزة الأكثر استخداما في تصفح مواقع وتطبيقات الإنترنت المختلفة.
وهكذا لا يمكن استخدام W3.CSS من خلال مكتبة jQuery أو جافا سكريبت.
باستثناء ذلك، يمكن استخدام W3.CSS على جميع المتصفحات مثل Chrome. Firefox. Edge. IE. Safari. Opera.
أيضا يمكنك استخدامه من جميع أنواع الأجهزة، سواء كانت أجهزة سطح المكتب، الكمبيوتر المحمول، الأجهزة اللوحية -التابلت-، الهواتف الذكية.
من المميزات أيضا أن W3.CSS مجاني، لا يلزمك الحصول على ترخيص من أجل استخدامه.
مثال على استخدام كود W3.CSS:
سنضرب هنا مثالا عن استخدام W3.CSS من أهم موقع تعليمي للبرمجة في العالم وهو (W3schools)، والمتمثل في هذا الكود:
<div class="w3-container w3-teal">
<h1>My Header</h1>
</div>
<img src="img_car.jpg" alt="Car">
<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>
<div class="w3-container w3-teal">
<p>My Footer</p>
</div>
إذا استخدمت ((هذا الرابط)) فسيظهر لك الشكل التي سيعرض بها الموقع الإلكتروني هذا الكود.
ألوان W3.CSS:
من أهم المميزات التي يقدمها لك إطار العمل W3.CSS كمبرمج هو إمكانية استخدام مجموعة واسعة من الألوان ما يجعل مشروعك أكثر جذابية.
إنها طائفة واسعة من الألوان الحديثة والتي تراها تستخدم حتى في التسويق وعلامات الطرق.
حاويات W3.CSS:
عندما نتحدث عن w3-container أو الحاويات فإننا نتحدث عن واحدة من أهم فئات W3.CSS بشكل عام.
ولمن لا يعلم فإن الحاويات في لغات البرمجة تتشابه تماما مع الحاويات في معناها بحياتنا العادية، فهي التي تحتوي على عناصر الصفحة.
تقوم الحاويات في W3.CSS بمحاذاة محتوى الصفحة بشكل مستمر مهما تغيرت الأبعاد.
هذا مهم للغاية لكي تظهر الصفحة بشكل صحيح مهما كان الجهاز الذي يتصفح الموقع (هاتف، كمبيوتر، جهاز لوحي)، ولا يحتاج المستخدم للتنقل يمينا ويسارا من أجل قراءة او مشاهدة محتويات الصفحة.
