أعلى 5 بدائل Bootstrap

Bootstrap موجود في كل مكان ، لكنه ليس دائمًا الأداة المناسبة للوظيفة. إليك بعض البدائل الرائعة!

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

في الواقع ، بالنسبة للواجهات الأمامية الضعيفة حقًا ، يتم تحميل جميع ملفات Bootstrap CSS و JS يمكن أن يسبب سخامًا كبيرًا.

تحتوي هذه المقالة على هدفين:

  • توفير بدائل حية لا تشبه Bootstrap لـ Bootstrap
  • اشرح سبب رغبتك في التفكير في هذه البدائل عبر Bootstrap
  • أعتقد أن جزء التفسير مهم حقًا لأنه في معظم الحالات ، لا يدرك الناس حتى أن لديهم مشكلة أو أنهم يجعلون عملهم أكثر صعوبة من خلال اختيار Bootstrap. أخيرًا ، يرجى ملاحظة أن هذا ليس منشورًا مضادًا لـ Bootstrap بأي وسيلة. أحب Bootstrap 4 وأستخدمه متى استطعت. ولكن ، إذن ، أنا مطور فردي يجب أن يفكر في استخدام الحل الأكثر شيوعًا ؛ أيضًا ، أنا لست مطورًا لواجهة المستخدم بحد ذاتها ، لذلك لا أقلق بشأن الكثير من الأشياء عند إنشاء واجهات أمامية.

    وبهذا ، دعونا نلقي نظرة على البدائل المتوفرة لدينا.

    شبكة Flexbox

    فكر في الأمر لمدة دقيقة: السبب الأكبر لبدء استخدام Bootstrap وما زلت تستخدمه هو نظام شبكته. بالتأكيد ، لقد تطلب الأمر بعض التعود على الصفوف ، col-md-6 ، وما إلى ذلك ، الطبقات ، ولكن الآن من الطبيعي التفكير في التخطيط من حيث الصفوف ، والأعمدة ، والإزاحات ، وما إلى ذلك.

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

    إذا كانت الإجابة بنعم ، يمكنك أن تعمل بشكل أفضل مع شبكة Flexbox.

    شبكة Flexbox ، كما يوحي الاسم ، هي نظام شبكة يعتمد على CSS فليكس بوكس الخصائص. ومع ذلك ، على عكس تقنية CSS ، يتم تجريد كل التعقيدات بشكل جيد بحيث تركز فقط على وضع العناصر بالطريقة التي تريدها. أفضل جزء هو أن جميع الرموز وأسماء الفئات تحاكي ما تريده في Bootstrap 4 ، مما يعني أن التبديل بين هاتين الأداتين لا يتطلب أي احتكاك ذهني. على سبيل المثال ، إليك ما يبدو عليه رمز “space around” في شبكة Flexbox:

    <div class="row around-xs">
        <div class="col-xs-2">
            <div class="box">
                around
            </div>
        </div>
        <div class="col-xs-2">
            <div class="box">
                around
            </div>
        </div>
        <div class="col-xs-2">
            <div class="box">
                around
            </div>
        </div>
    </div>

    يبلغ حجم ملف CSS المصغر لنظام الشبكة هذا 10.7 كيلوبايت فقط مما يوفر لك عدة مئات من كيلوبايت في حجم التنزيل النهائي. هذه الأيام شبكة Flexbox هي المفضلة لدي لأنني لا أريد محاربة Bootstrap لتخصيصه بالكامل. أحب أن أبدأ بعناصر الفانيليا وأسلوبها بنفسي ، باستخدام Flexbox Grid أينما احتجت إلى ذلك.

      كيفية جعل بث Netflix أسهل باستخدام اختصارات لوحة المفاتيح

    يتعلم Flexbox هنا ، عبر الإنترنت.

    PureCSS

    ألن يكون من الجيد أن يتم تقسيم Bootstrap إلى وحدات نمطية ويمكنك استيراد الوحدة التي تحتاجها فقط؟

    نحن سوف، PureCSS تقدم وفعلت ذلك بالضبط – إنها مجموعة من الوحدات التي تغطي المجالات الوظيفية المختلفة لموقع الويب. يمكنك اختيار تنزيل واحد أو الكل ، ومع ذلك لن يتجاوز حجم التنزيل 3.7 كيلوبايت!

    نعم ، لقد قرأت ذلك بشكل صحيح.

    جميع الوحدات عند تجميعها معًا وضغطها بتنسيق gzip تبلغ 3.7 كيلوبايت ، على الرغم من أنها تصل إلى أكثر من ذلك بشكل فردي. يبلغ حجم وحدة الشبكة 0.8 كيلو بايت فقط ، بينما تبلغ وحدة القاعدة 1.0 كيلو بايت. يقول الفريق الذي يقف وراء PureCSS أنه تم إنشاؤه بالكامل مع وضع الأجهزة المحمولة في الاعتبار ، ولذلك تم فحص كل سطر من CSS بعناية للتأكد من كفاءته قبل تضمينه.

    لنفترض أنك تحتاج فقط إلى وحدة الشبكة والنماذج. حسنًا ، ما عليك سوى تنزيل هذين (جنبًا إلى جنب مع الوحدة النمطية Base) ، وستنتهي في أقل من 3.4 كيلوبايت! لا حاجة لتضمين CSS من وحدات الأزرار والجداول والقوائم إذا كنت لن تستخدمها.

    يحتوي PureCSS على فئاته ، على الرغم من أن الكود الناتج لا يحاكي Bootstrap الذي قد تكون معتادًا عليه:

    <div class="pure-g">
        <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
            <div class="l-box">
                <h3>Lorem Ipsum</h3>
            </div>
        </div>
        
        <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
           <div class="l-box">
               <h3>Dolor Sit Amet</h3>
           </div>
        </div>
        
        <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
           <div class="l-box">
               <h3>Proident laborum</h3>
           </div>
        </div>
        
        <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
           <div class="l-box">
               <h3>Praesent consectetur</h3>
           </div>
        </div>
    </div>

    ستلاحظ أنه لم يعد هناك شبكة مكونة من 12 عمودًا. يحتوي PureCSS على نظام شبكي خاص به يحدد مقدار العرض الذي يجب أن يتخذه العمود. لذلك ، تعني pure-u-lg-1-4 أن هذا العنصر يجب أن يأخذ 1/4 أو 25٪ من العرض المتاح على الشاشات الكبيرة. العرض كمضاعفات 1/5 متاح أيضًا.

    الكل في الكل ، PureCSS هي أداة CSS محررة ومذهلة (إطار عمل؟) يمكنك الاختيار من بينها والاختيار من بينها حسب الحاجة. ومع ذلك ، فإنه يأتي مع قدر لا بأس به من منحنى الشراء والتعلم حيث تحتاج إلى تعلم طريقة جديدة (مختلفة قليلاً) للقيام بالأشياء.

      كيفية تحميل الموسيقى على يوتيوب الموسيقى

    يحتوي PureCSS أيضًا على فئاته الخاصة وتصميمه الافتراضي ، لذا فهو لا يختلف كثيرًا عن Bootstrap.

    زيميت

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

    هناك أوقات يتعين عليك فيها تطوير الواجهة الأمامية لعرض أداء المنتج. الطريقة المثلى للقيام بذلك ، بالطبع ، هي إشراك مصمم / مطور واجهة المستخدم وإنشاء نماذج بالحجم الطبيعي على إحدى أدوات التخطيط الشبكي المتقدمة (يتبادر إلى الذهن Moqups و Blasmic وما إلى ذلك). ستكون الصفحات مثالية للبكسل ، ونظام الألوان أنيق ومختار جيدًا ، وستكون الصفحات مفتوحة للمشاركة ، والمراجعات ، والتعليقات ، وما إلى ذلك.

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

    • يسمح لك بالترميز بتنسيق HTML / CSS
    • خفيف الوزن
    • لديها مجموعة واسعة من المكونات الأساسية
    • لغة أسلوب لائقة ومتسقة
    • إذا أمكن ، يشبه النغمة “الرمادية” لتصميم الإطار السلكي
    • سهل التعلم
    • لديه بعض المعالجات المسبقة CSS مدمجة

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

    عرض الشجرة

    مسار التنقل

    نوافذ التبويب

    هناك العديد من الأشياء الجيدة لاستكشافها. تحقق منها هنا.

    لنلقِ نظرة على شكل الكود. إليك كيفية استخدام نظام الشبكة في Zimit:

    <div class="row">
       <div class="c12">
          <div class="row">
             <div class="c4">4 columns</div>
             <div class="c4">4 columns</div>
          </div>
          <div class="row">
             <div class="c4">4 columns</div>
             <div class="c4">4 columns</div>
          </div>
       </div>
    </div>

    يرمز الحرف “c” هنا إلى “عمود” ، لذا فإن “c4” يعني عمودًا يمتد على أربع وحدات (الشبكة بحجم 12 ، تمامًا مثل Bootstrap). يشبه إلى حد بعيد Bootstrap ، وهو حدسي جدًا ، في رأيي.

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

    بدء تشغيل HTML

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

      فهم UCaaS في عالم متصل [+6 Solutions for SMBs]

    بدء تشغيل HTML يقدم بديلا.

    ببساطة؛ إنها مجموعة من المكونات الأنيقة حقًا التي يمكنك وضعها في مشاريعك وتقليل وقت التطوير بشكل كبير. فيما يلي بعض المكونات الرائعة التي وجدتها:

    اسقاط

    أزرار

    علامات التبويب (في المنتصف وبها رموز)

    تجسد

    إذا كنت تحب Bootstrap لأنه يحتوي على حل جاهز لجميع مشكلات تصميم الويب الشائعة ، ولكنك من محبي أسلوب التصميم متعدد الأبعاد ، فيجب أن تجرب تجسد.

    إن التجسيد هو في الغالب مثل Bootstrap – نظام شبكة مكون من 12 نقطة وإزاحات ومكونات مألوفة مثل النماذج والبطاقات وما إلى ذلك. ومع ذلك ، فإنه يحتوي على بعض الأشياء الجيدة التي يمكن أن تروق للكثيرين.

    دفع وسحب

    تتيح لك ميزة الدفع / السحب الخاصة بـ Materialize CSS إعادة ترتيب الأعمدة. هذا يذكرنا بمعيار CSS Grid الجديد ، حيث يختلف التخطيط عن ترتيب العناصر.

    <div class="row">
          <div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
          <div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
    </div>

    ينتج عن هذا ما يلي:

    ستلاحظ أن الأعمدة قد بدلت أماكنها ، وهو أمر ربما لا يمكن تحقيقه في CSS التقليدي المستند إلى Bootstrap.

    الأشياء الجيدة جافا سكريبت

    هناك عدد غير قليل من ميزات وتأثيرات JavaScript التي تأتي مع Materialize. تلميحات الأدوات ، الخبز المحمص (الإشعارات المؤقتة مثل Android) ، Parallex ، Pushpin ، وما إلى ذلك ، هي بعض منها. أحد التأثيرات المذهلة التي أحببتها حقًا هو FeatureDiscovery ، والذي يسمح لك بشكل أساسي بتمييز عنصر على الصفحة في بعض الأحداث (على سبيل المثال ، الضغط على الزر) لجذب انتباه المستخدم إلى هذا العنصر. من الصعب وصفها بالكلمات بشكل كامل ، لذا توجه إلى https://materializecss.com/feature-discovery.html لمعرفة ما أعنيه.

    بشكل عام ، تعتبر Materialize بديلاً رائعًا لـ Bootstrap أو لأولئك الذين يتطلعون إلى اعتماد إطار عمل Material CSS كامل الميزات.

    استنتاج

    Bootstrap مرادف للتصميم سريع الاستجابة. كان Bootstrap هو الذي شاع مصطلح “تصميم الجوال أولاً” وأظهر كيف يمكن القيام به. ولكن بينما ينجز Bootstrap المهمة معظم الوقت ، فإن مجرد إنجاز المهمة لا يكفي دائمًا. إذا كنت تشعر أن Bootstrap يقيدك وأن احتياجاتك خاصة ، فسيساعدك أحد الخيارات المدرجة هنا. 🙂