السلام عليكم ورحمة الله وبركاته، كل عام وانتم بخير اعاد الله الايام علينا وعليكم بالخير والبركات.

قمت بإطلاق CSS Framework تحت اسم BalloonCSS لبناء تطبيقات الويب فقط بإستخدام اكواد HTML

لماذا؟

في السنوات السابقة كنت استخدم Bootstrap اطار العمل الشهير وفي الاشهر الماضية بدأت استخدام اطار العمل TailwindCSS التي جعلتني لا احتاج الي كتابة الكثير من الاكواد الخارجية وقمت بإستخدامها واعتمادها في معظم مشاريعي ولكن ما كان يعيبها انه اذا اردت القيام بعمل Form بسيط فيسكون بهذا الشكل

<form class="form form-modifier margin padding align">
  <div class="input-wrapper input-wrapper-modifier margin padding">
    <input type="text" class="input input-type-modifier input-style-modifier input-size-modifier">
  </div>
  <button type="submit" class="button button-style-modifier button-size-modifier action-trigger margin padding">
    Action
  </button>
</form>

قد تقول لي ان الكود يبدو بسيط وليس به تعقيدات ولكن لك ان تتخيل مشروع كبير فيه الكثير من الاكواد اكيد سيكون الموضوع صعب في فهم وتتبع الكود.

والمعروف ايضاً ان أُطر العمل هذه تضيف لك الكثير من اكواد CSS بلا فائدة قد لا تستخدم معظمها في مشروعك وايضاً سيستهلك هذا الكثير من استخدام ذاكرة التخزين ويبطئ من الموقع قد يكون ردك انه يمكننا استخدام purge-css او ما يشابهها وهنا نقع في نفس المشكلة حيث انه لبناء موقع خفيف وسريع سنحتاج الي تقليل dependencies

ومن هنا جائت فكرتي لبناء هذا الاطار وقد سميته بهذا الاسم ليعبر عن مدي خفته.

ما المميزات؟

  • حجم هذا BalloonCSS لا يتعدي 7KB في النسخة unminified
  • يقدم لك اضافات مثل Progress, Accordion, Tooltips, Switch بدون اي اكواد JavaScript
  • مدمج فيه DarkMode وامكانية التحكم فيها ببساطة
  • يحتوي علي Theming System

بالطبع لا يمكنني القول ان اطار العمل هذا لا يحتوي علي اي classes ولكن ليس بالعدد الكثير وليس بالقليل فقد حاولت قدر الامكان التقليل منها.

نعم يوجد به الكثير!

اخبرتكم سلفاً انه يوجد به اضافة مثل Tooltips ويحتوي علي امكانية التحكم فيها سواء إيقافها او تشغيلها حسب الحاجة.

كمثال اخر يحتوي اطار العمل علي Auto Grid System ولكن يمكن تفعيل Full Grid System لإعطائك Grid System مشابه للموجود في Bootstrap

ما التالي؟

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

روابط خارجية

GitHub:

تم بناء موقع الوثائق بإستخدام النسخة الكاملة من الاطار.

Documentation: https://ballooncss.netlify....

Playground: https://ballooncss.netlify....

اذا كان لديك Discord فيمكنك الانضمام الي السيرفير الخاص بالمشروع