أفضل 21 إطارًا لأنظمة وشبكات HTML5 / CSS3

كانت أساليب التصميم التقليدية قبل بضع سنوات فقط تعني أنه كان عليك تصميم صفحة رئيسية بمفردها ، وربط الإطارات الشبكية ومربعات المحتوى معًا ثم الأمل في الأفضل ، ولكن هذه التقنية اختفت تدريجياً وأساليب جديدة أكثر حداثة لتطوير موقع الويب السريع ظهرت. والجدير بالذكر أن CSS3 قدمت Flex-box - وهي وظيفة شبكة سهلة الاستخدام يمكنك استخدامها لإنشاء تخطيطات المحتوى ، ولكن لا يزال - بعضها مقاوم ، بينما يتخذ البعض الآخر مناهج أكثر تعقيدًا للحصول على دقة تصميم مطلقة.

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

هل تريد المزيد من الأطر؟ جرب جولاتنا الأخرى:

• أطر عمل جافا سكريبت
• أطر HTML5
• أطر CSS3
• أطر عمل Node.js

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

شبكة بسيطة ميتة

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

بوربون أنيق

Bourbon هي مكتبة ناجحة جدًا من mixins لمعالج SASS المسبق. هذا بالطبع جعل Neat خيارًا جذابًا لأولئك الذين يستخدمون Bourbon و SASS بالفعل. يتيح Neat للمطورين الوصول إلى نظام الشبكة المرنة الذي يكون سريعًا وسهلاً بدرجة كافية لإعداده في دقائق ، ولكنه مرن إلى الحد الذي لا تصبح فيه التغييرات والتعديلات غير المحدودة مشكلة.

Grd

Grd هو نظام شبكة CSS يستخدم Flexbox كأداة خلفية لإنشاء تخطيطات متجاوبة مرنة وحديثة. باستخدام Live Demo ، يمكنك اللعب بالإعدادات وتخصيصات التصميم المختلفة لمعرفة ما إذا كان Grd يمكنه حل مشكلتك في الحصول على عنصر تصميم معين مدمج في سير عملك الحالي. وجدنا أنه من السهل إنشاء الرؤوس والتذييلات ومناطق المحتوى العامة باستخدام أي شيء سوى قائمة منسدلة من الإعدادات.

بنية

يستخدم الهيكل ، الذي يعتمد أيضًا على Flexbox ، أنماط بناء الجملة التقريرية (على غرار تلك الموجودة في Angular.js) من أجل تحديد الأقسام ومعلمات التخطيط. اشتكى بعض المطورين من أنه لا يمكن التحقق من صحة الترميز النهائي للصفحة ، ولكن الفكرة هي أنه باستخدام الهيكل يمكنك إنشاء شبكة تعريفية لا تعبث بسمات CSS التقليدية ، مثل الفئات وأسماء التعريف.

نظام الشبكة 960

استخدمت مئات الآلاف من مواقع الويب نظام 960 Grid الخاص بـ Nathan Smith لدعم تخطيط تصميمها. إنها أداة فعالة لتبسيط سير عمل مطوري الويب الذين يعملون بجد. من خلال اختيار تخطيطين مختلفين للأعمدة (12 و 16 على التوالي) ، يمكن للمطورين تمهيد الصفحة الرئيسية بسرعة والتي ستدعم أي نوع من المدخلات الديناميكية والثابتة. من الممكن إضافة المزيد من الأعمدة ، لكنك ستحتاج إلى التعامل مع الوثائق لفهم الاستخدام بشكل أكثر وضوحًا.

غير دلالة

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

شبكة بسيطة

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

شبكات csswizardry

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

شبكة عميقة

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

صينية

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

شبكة CSS الذكية

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

Gridlex

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

نظام الشبكة المستجيب

يحتوي نظام الشبكة المستجيبة على الكثير من الأمور ، اسم المجال المثالي ، والرؤية الواضحة والأدوات المطلوبة لجعل تصميم الشبكة سريع الاستجابة أمرًا سهلاً! يوفر Grid Generator إدخال نموذج بسيط حيث يمكنك تحديد عدد الأعمدة التي ترغب في استخدامها والهامش الذي ترغب في رؤيته بينها .. انقر فوق إرسال وستحصل على إخراج الكود جاهزًا من تخطيط الشبكة سريع الاستجابة التالي. المؤلف ، Graham ، سعيد بالقيام بكل العمل الشاق من أجلك إذا كنت ترغب في ذلك ، يمكنك الاتصال به في تذييل الصفحة.

بشكل شبكي

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

فورمستون

Formstone ليس نظام شبكة واحد مُدار في حد ذاته ، إنه في الواقع مكتبة لمطوري الواجهة الأمامية الذين يحتاجون إلى مكونات وعناصر ويب قابلة للتخصيص بدرجة عالية والتي تشكل صفحة ويب تقليدية تصادفها يوميًا. كونها مكتبة معيارية وسريعة الاستجابة ومؤتمتة - يمكن استخدام Formstone ليس فقط لغرض توسيع نطاق مشروع موقع ويب كبير ، ولكن أيضًا لاستخدام تخطيط الشبكة نفسه.

التمهيد

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

المؤسسة

Foundation هي مكتبة أمامية أخرى ناجحة تدعم التصميم سريع الاستجابة ، أحدث إصدار (Foundation 6) يجلب إلى الطاولة المزيد من الميزات والعناصر الحديثة التي يمكن أن تساعد المطورين على تزويد عملائهم بتصميمات متعددة الاستخدامات بشكل لا يصدق. تمنحك القوالب سهلة الاستخدام التي توفرها Foundation فرصة لأخذ قسط من الراحة من تطوير الشبكة بالكامل ، وبدلاً من ذلك التركيز على ما هو مهم - الأشياء التي ستضعها داخل تلك الشبكة نفسها.

هيكل عظمي

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

نظام الشبكة المستجيب 2

نظام الشبكة المستجيبة (الإصدار 2) هو أول نظام شبكة متنقل صغير الحجم للغاية ، ولكنه فعال للغاية في الأسلوب. يمكنك الاختيار من بين مجموعة من تخطيطات الأعمدة (24 ، 16 ، 12). يمكنك أيضًا تخصيص الهوامش والحشو بين الأعمدة ، واستخدام polyfill لإنشاء تخطيط تصميم ممتاز.

نظام الشبكة المستجيب لمشروعك التالي

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

HTML5 Boilerplate

HTML5 Boilerplate هو إطار متداول قوي (قالب) لمطوري الواجهة الأمامية. إنه للمطورين الذين يرغبون في بدء مشروعهم دون عناء المشاركة في أطر أكبر مثل Bootstrap أو Foundation.