كلنا نبدأ في مكان ما. كمصممة جديدة ، لم يكن بإمكاني أن أقل اهتماما بالهيكل في تصاميمي. أود أن افتح Photoshop ، وأضغط على البكسل حتى أصنع شيئًا اعتقدت أنه يبدو رائعًا. كما تعلمت أن أكون رمزًا ، كانت عمليتي شبيهة بالمثل.
أنا لا ننظر إلى الوراء في الأيام الماضية مع الكثير من الولاء. كان عملي قذراً وغير مركّز. لم يكن لدي أهداف واضحة. كبداية ، أفترض أن هذا ليس سيئًا للغاية ، مع الأخذ في الاعتبار أن معظم تعليمي في التصميم جاء من مواقع Photoshop التعليمية ، ولم يكن عملي فظيعًا.
ولكن بعد ذلك تعلمت عن أنظمة الشبكات. لقد نسيت بالضبط متى وكيف أصبحت شائعة الاستخدام في تصميم الويب ، ولكن فجأة ، كان كل موقع مرتبط بالتصميم على شبكة الإنترنت قد اندلعت فيه مقالات حول 960.gs ، أو بعض أنظمة الشبكات الأخرى. تم التأكيد على أهمية توفير بنية بصرية ثابتة في تخطيطاتنا من قبل جميع الأسماء الكبيرة ، وتحولت إلى اتجاه.
وبسرعة ، أصبح الاتجاه معيارًا صناعيًا ، والآن لا يفكر معظمنا مرتين حول ما إذا كنا سننفذ نظامًا شبكيًا أم لا. السؤال الوحيد هو ، أي واحد؟ هل سنذهب مع واحدة من الأسماء الكبيرة أو أقل شهرة ، أو حتى أن نختار منطقتنا؟
في هذا المقال ، أود إلقاء نظرة على الخيار الثاني: أنظمة شبكات جديدة وأقل شهرة. هناك دائما شخص ما يخرج بطرق جديدة لحل المشاكل المختلفة للتخطيط ، وأعتقد أنه من المهم أن تكون على دراية بأكبر عدد ممكن من المناهج ، لذلك دعونا ننظر إلى بعض أطر الشبكات الأساسية.
34Grid هو كل شيء عن توزيع العمود متساوية. يمكن أن تستوعب التوزيعات غير المتكافئة أيضًا ، ولكن هذا ليس الهدف الأساسي من نظام الشبكة هذا. لأولئك منكم الذين يريدون تقسيم معظم صفحاتك أو كلها إلى أجزاء متساوية أفقيا ، هذا هو إطار عملك.
كيف تعمل
تم تصميم إطار العمل ليكون قابلاً للتكيف مع احتياجاتك ، لذا لا تحتاج إلى التنزيل والانتقال فقط. تحتاج إلى تكوين الشبكة الخاصة بك على الصفحة الرئيسية للمشروع أولاً. يتيح لك النموذج السريع تحديد عدد الأعمدة التي تناسب صفًا ، ومدى أهمية الهوامش ، وما إذا كان سيتم تطبيق تحويلات CSS3 على أعمدتك عندما يتغير حجم إطار العرض لديك.
يتم تقسيم التعليمة البرمجية نفسها إلى ملفين CSS: أحدهما مع التعليمات البرمجية الأساسية والآخر مع كافة استعلامات الوسائط. فصول CSS بسيطة. سيؤدي تطبيق ".col_1" إلى عمود إلى ملء الصف بنسبة 100٪. سيعمل ".col_2" على إنشاء عمود بعرض 50٪ ، وهكذا.
بالإضافة إلى ذلك ، يتم تغيير حجم عناصر img ، والعناصر ، وبعض العناصر الأخرى تلقائيًا. هناك فئة إضافية لمساعدة كائنات الفيديو تتصرف. يقدم الموقع الإلكتروني للمشروع نصيحة حول كيفية تضمين Facebook و Twitter للعب بطريقة لطيفة.
عيوب
لا يبدو أن هناك أي طريقة لدمج الأعمدة ، أو إنشاء ترتيبات أعمدة أكثر تعقيدًا داخل صف واحد. من ناحية أخرى ، إذا كنت لا تحتاج إلى تعقيد ، وترغب فقط في إطار بسيط يمكنك ضبطه كلما احتجت إلى ذلك ، ستقوم 34Grid بهذه المهمة.
شبكة بسيطة هو خيار متجاوب يبلغ الحد الأقصى للعرض 1140 بكسل. بعبارة أخرى ، في حين أنها مصممة للعب مع الأجهزة اللوحية والهواتف ، فإن Simple Grid تتأكد من عدم استبعاد شاشات أكبر.
كيف تعمل
وكما يوحي الاسم ، فإن نظام الشبكة هذا خفيف الوزن. كل شيء يأتي في ملف CSS غير مضغوط أربعة كيلوبايت.
تم تصميم أسماء الفئات لفهمها بسهولة: ".col-2-6" سوف يقسم الصف إلى ستة أعمدة ، ويحدد عرض العمود إلى عمودين عريضين. يمكن تقسيم كل صف إلى عمود واحد ، ".col-1-1" ، أو اثنين ، ثلاثة ، أربعة ، إلخ. على طول الطريق حتى اثني عشر.
عيوب
مثل 34Grid ، لا يبدو أن هناك أي نص من أجل تعشيق الأعمدة. أيضا ، الطريقة التي يتم بها التعامل مع الهوامش للأعمدة الأولى والأخيرة ، قد تسبب صعوبات عند إنشاء ، على سبيل المثال ، معرض صور.
هذا هو لأي شخص يفضل شبكة بسيطة مع أسماء فئة الإنجليزية سهل. إنها سريعة الاستجابة وسهلة الفهم ، ويتم تنفيذها بسرعة.
كيف تعمل
بعد وضع العناصر المعتادة ".container" و ".grid" ، يتم تنفيذ الأعمدة بالطريقة القديمة. يتم استخدام فئة واحدة (".unit") لتعريف السمات العامة لعمود ، ويتم استخدام فئة أخرى لتحديد العرض. يمكن تقسيم الصفوف إلى 2-5 أعمدة ، وكل أسماء الفئات تبدو كالتالي: "واحد من ثلاثة ، .2 من ثلاثة".
وشملت أيضا بعض الأنماط المطبعية الأساسية.
عيوب
ومرة أخرى ، يعد هذا إطار عمل شبكي مخصص للتخطيطات غير المعقدة ، لذلك لا يوجد مخصص للأعمدة المتداخلة. وهناك أيضًا نقطة فاصل واحدة ، يتم تعيينها على عرض إطار العرض الذي يبلغ 650 بكسل ، لذلك قد تنتهي بعض الأعمدة في وقت مبكر إلى حد كبير.
مات (اكا نعمة ) قليلا مثلي. إنه يحب التصميم ، لكنه لا يحب الرياضيات بقدر كبير. ونتيجة لذلك ، له الشبكات التناسبية يبدو أن نتخلص من الحسابات التي لا نهاية لها قدر الإمكان اعتمادا على box-sizing خاصية. والنتيجة هي نظام شبكي كامل وخفيف الوزن إلى حد كبير يغطي قواعدك للتصميم سريع الاستجابة.
كيف تعمل
عندما أقول أن هذا النظام يعتمد على box-sizing ، أعني أن يتم إعطاء الأعمدة نسبة العرض دون المحاسبة عن المزاريب. يتم تحديد المزاريب الثابتة العرض بواسطة padding . و box-sizing يتأكد من تشغيل الأعمدة بشكل جيد معًا.
يتم تعريف عروض الحضيض ومعظم القياسات الأخرى باستخدام "ems". صحيح أن اسم هذه الشبكة ، فئات الأعمدة هي متناسبة (أي .col-one-third ، .col-two-thirds ) ، والأعمدة هي أكثر أو أقل إلى حد لا يمكن تهدئته ، وهو شيء أحب كثيرا.
يتم تضمين الفئات لتغيير أبعاد العمود في ثلاث نقاط فاصل مختلفة. يتم تنظيم استعلامات وسائل الإعلام نفسها بطريقة "المحمول أولاً" ، تمشيا مع الممارسات القياسية.
هناك ورقة أنماط منفصلة لبرنامج Internet Explorer 8 وأقدم. إن مشاهدة IE8 لا تدعم استعلامات الوسائط ، ولا تدعم الإصدارات الأقدم من ذلك box-sizing ، يتم توفيرها مع تخطيط عرض ثابت.
كما تم تضمين ملفات SASS (كلا .sass و .scss) للتخصيص السريع والسهل لنظام الشبكة.
عيوب
لا تمانع في عرض المزيد من الأعمدة للعمل مع (fifths و sixs و eighths). خلاف ذلك ، هذا هو نظام شبكة خالية إلى حد كبير وجيدة مقربة.
من أنظمة الشبكات المتقدمة في هذه القائمة ، واحد٪ هي أبسط ، لكنها ليست كاملة بأي حال من الأحوال. وهي مصممة لاستيعاب شاشات أكبر إلى حد ما ، وعناصر UI كبيرة ، إذا كانت صفحتها الرئيسية أي إشارة.
يأتي الاسم من حقيقة أنه يتم حساب عرض الشبكة والعبر بحيث يساوي 99٪ دائمًا ، بدلاً من 100٪. هذا يلغي الحاجة إلى بعض من الكسور العشرية المتكررة أكثر تعقيدا وعدد التقريب الذي غالبا ما يضطر المتصفحات للقيام به.
كيف تعمل
وتنقسم الشبكة نفسها إلى الأعمدة الاثني عشر الكلاسيكية. الطبقات بسيطة ( .onerow ، .col1 ، .col6 ) ، وأحب أن تستخدم ، في الغالب ، فئة واحدة فقط لكل عمود.
يتم تضمين نقطتي توقف افتراضيًا: 768 بكسل ، و 1024 بكسل. إذا كنت صريحًا ، فإن ذلك يبدو أولًا قليلاً ... كبير ... ولكن يمكنك دائمًا إضافة نقطة فاصل أخرى إذا كنت بحاجة إلى واحد. يتم أيضًا تقديم مثالين لعرض تخطيط سطح المكتب: 1000 بكسل و 1200 بكسل.
في الصفحة الرئيسية للمشروعات ، يمكنك تنزيل ملفات إجراءات Photoshop و PSDs المناسبة للاستهزاء بالمخططات مع نظام الشبكة هذا.
عيوب
مشكلتي الكبيرة هنا هي المشاكل المعتادة. أولاً: لا توجد أعمدة تعشيش. الأعمدة التعشيش جيدة ، والناس! ثاني: يحتاج العمود الأخير في كل صف إلى .last فئة تطبق عليه.
إطار الشبكة CSS عبر المستعرض الذي لا يخفي بكسل في هوامش! هذا هو شعار ل Flurid، وستعرض لك نظرة سريعة على الوثائق سبب ذلك: لا يريد منشئ Flurid حقاً كسر تخطيطك. أبدا.
إليك الشيء ، نظرًا للطريقة التي يعمل بها التقريب الفرعي للبكسل ، يقول المتصفح أحيانًا "قم ببرغيه" ووضع العمود الأخير في الصف في مكان ما لا ينبغي أن يذهب إليه. تم تصميم Flurid لتحقيق الثبات ، بحيث يعمل التصميم دائمًا ، حتى في الإصدارات القديمة من IE. (يتم سرد التوافق كـ IE5 +.)
كيف تعمل
يحتوي Flurid على جميع الميزات التي ستحتاج إليها: الأعمدة العادية والأعمدة المختلطة والأعمدة المتداخلة والأعمدة التي تم نقلها. قائمة عروض وفصول الأعمدة الممكنة واسعة النطاق ، وتستند إلى النسبة ، لذا ستحتاج إلى منح نفسك الوقت الكافي للتعرف عليها.
يتم توفير بعض الوثائق الكاملة المعقولة عبر GitHub ، بالإضافة إلى ملحق jQuery يضيف ميزات إضافية - نعم ، يأتي مع ملحق jQuery الخاص به ، والذي يوفر أعمدة ارتفاع متساوية ، ويمكن وضع فئات بديلة على أعمدتك ، لمتعة التصميم الخاصة بك.
عيوب
هذا غذر .last الطبقة مرة أخرى. ومع ذلك ، وفقا للوثائق ، هناك سبب وجيه لذلك في هذه المرة.