الصفحة الرئيسية » UI / UX » إنشاء تخطيطات شبكة البناء السريع مع Bricks.js

    إنشاء تخطيطات شبكة البناء السريع مع Bricks.js

    لقد كان دائما بسيط جدا ل إنشاء شبكات مع مسج, استخدام الإضافات والبرامج التعليمية المجانية من المطورين.

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

    لصنع شبكة البناء بكسل الكمال انت بحاجة الى البرنامج المساعد مثل Bricks.js.

    هذا البرنامج المساعد مفتوح المصدر تماما وسريع يبعث على السخرية. أنه سوف تقديم الشبكة في أقل من نصف ثانية, حتى مع وجود عشرات العناصر على الصفحة.

    يتعرف معظم الناس على شبكات البناء من Pinterest لأنها شائعة التصميم. ولكن ، منذ ذلك الحين نمت لتصبح المستخدمة في العديد من المواقع الأخرى, جدا.

    لبدء استخدام Bricks.js ، ستحتاج بعض المحتوى و تخطيط الصفحة الافتراضي. يمكنك تثبيت المكون الإضافي مباشرة من npm أو من خلال GitHub إذا كان ذلك أسهل.

    مع الإعداد الأولي ، يمكنك تمرير ثلاث معايير محددة:

    1. حاوية - ا عنصر حاوية DOM للشبكة
    2. معباه - ل صفة، عزا الذي يحدد كيفية تدفق العناصر في الشبكة
    3. الأحجام - ل مجموعة من العروض والمزاريب, المعرفة بالبكسل

    يستخدم البرنامج المساعد كل هذه القيم لأتمتة شبكة البناء من البداية.

    ويمكنك حتى استخدامه لتحميل لانهائي إذا كنت تريد شبكات البناء التي تعمل تماما مثل Pinterest.

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

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

    ابدأ بنفسك عن طريق تنزيل الملفات من GitHub واتباع إرشادات التثبيت. قد يكون هذا مشوشًا في البداية ، ولكن كلما لعبت معه كلما كان إعداده أسهل.