The 960 Grid System Toolbox & Resources
تم إنشاء نظام الشبكة 960 من قبل ناثان سميث كوسيلة لتبسيط سير عمل تطوير الويب من خلال توفير أبعاد شائعة الاستخدام ، على أساس عرض 960 بكسل.
تم تطوير 960.gs (أو أي إطار CSS) في المقام الأول لنماذج أولية سريعة ، مما يقلل من المهام المتكررة والمملة ، ولكنه أيضًا أكثر من مناسبة للاستخدام في أي مشروع لتصميم الويب.
سيعطي موقعك أساسًا منظمًا وراسخًا لبناء وتصميم أسلوب التصميم الخاص بك.
في هذه المقالة ، ستجد برامج تعليمية ، وهي عبارة عن عرض لمواقع تم تصميمها باستخدام 960.gs ، و spin offs ، وموضوعات WP الأساسية المبنية على 960.gs والأطر البديلة الممكنة ، إذا لم تعجبك شبكة 960 لسبب ما النظام.
داخل حزمة التنزيل هناك أوراق رسم قابلة للطباعة ، تخطيطات تصميم وملف CSS يحتوي على قياسات متطابقة.
لديك اثنين من القوالب ، 12 شبكة عمود مقسمة إلى أجزاء من 60 بكسل وشبكة 16 عمود مقسمة إلى 40 بكسل. يحتوي كل عمود على 10 بكسل من الهوامش على اليسار واليمين ، مما يؤدي إلى إنشاء مزاريب عريضة 20 بكسل بين الأعمدة.
الصفحة الرئيسية : 960.gs Homepage .
تحميل : قم بتنزيل 960.gs .
عرض توضيحي: شاهد صفحة العرض 960.gs .
960.gs التعليمية
960 CSS Framework - تعلم الأساسيات
هذا هو برنامج تعليمي أساسي رائع للبدء ، كتبه Stefan Vervoort من divitodesign. يتم أخذك من خلال أساسيات تحميل الإطار ، بحيث يمكنك البدء في التطوير باستخدام 960.gs سريعًا.
العمل مع 960.gs
برنامج تعليمي آخر يأخذك من خلال أساسيات تثبيت 960.gs ، مفيدة بشكل خاص لـ CSS التي تم تحديها.
نظرة تفصيلية على 960 CSS Framework
بمجرد أن تغتنم الفرصة لقضاء بعض الوقت مع 960.gs ، ستندهش من مقدار الوقت الذي يمكن حفظه عند تطوير مشاريع الويب الخاصة بك.
النماذج الأولية مع الشبكة 960 CSS Framework
تتناول هذه المقالة عملية النماذج الأولية بأكملها ، فهي تشرح أساسيات الشبكة 960 ، وتخطط الشبكة لتصميم وترميز النموذج الأولي. في أسرع وقت.
بناء موضوع جريدة مع WP_Query وإطار CSS 960
سيعلمك هذا البرنامج التعليمي كيفية استخدام WP_Query لإنشاء سمة جريدة من ثلاثة أعمدة تحتوي على كل مشاركات مدونتك الرئيسية في العمود الرئيسي ، وقابلها إلى جانب مجموعة من المشاركات من فئة محددة. باستخدام إطار 960 CSS لتخطيط وبقية الموضوع ، يظهر لك كيف سيؤدي ذلك إلى زيادة الإنتاجية بشكل كبير.
تصميم موضوع مدونة جديدة على شبكة 960
يدرس هذا البرنامج التعليمي لكتابة موضوع مدونة في Photoshop مصمم للاستخدام في إطار 960. تم تصميم هذا البرنامج التعليمي لنظرية تصميم الويب أكثر من تقنية Photoshop ، ولكنه يقضي وقتًا أطول في نظرية التصميم والتطبيق.
960 Spin Offs
Typogridphy - A Typographical and Grid Layout CSS Framework
Typogridphy هو إطار عمل CSS تم إنشاؤه للسماح لمصممي الويب ومطوري الواجهة البرمجية بتصنيف تخطيطات الشبكة ذات التصميم الطباعي بسرعة. انها تسمح لك بإنشاء تخطيطات شبكة متعددة الجوانب وجذابة ، وتحقق صحة xHTML الصارمة و CSS. كما أنه يستخدم طريقة مطبعية تعرف باسم "إنشاء الإيقاع العمودي" ، حيث يتم عرض جميع الأسطر المجاورة من النص أفقيًا ، بغض النظر عن فواصل الأسطر والفقرات الجديدة.
عرض توضيحي: Typogridphy تجريبي
Overture - Fluid 960 Grid System 1.0
وضعت من قبل ستيفن باو من Design7 أنشأ مكتبة تحتوي على عناصر HTML شائعة الاستخدام ، يجمعها مع CSS للطباعة والتصميم ، وإضافة بعض التأثيرات الأساسية من مكتبات JavaScript الشائعة (بشكل أساسي MooTools). عند التنزيل ، يمكنك الاختيار من بين ثلاثة قوالب: 960 بيكسل بعرض ثابت ، عرض سائل ب 12 عمود أو عرض سائل يبلغ 16 عمودًا . هذه القوالب مذهلة ، عليك أن ترى التفاصيل لتصديقها.
عرض توضيحي: عرض تجريبي .
عرض
تم بناء جميع المواقع الجميلة أدناه باستخدام نظام الشبكة 960:
وورد المواضيع
تمامًا مثل 960.gs الفعلية ، فإن سمات WP هذه غير متوازنة فعليًا وبها وظائف أساسية جدًا ، ولكن تم إنشاؤها باستخدام 960.gs. مفيد جدا لأي مطور WP.
5 سنوات وورد الموضوع
موضوع الفسفور الابيض الأساسي الذي بني باستخدام 960.gs.
960bc وورد موضوع
إن موضوع 960bc هو في الأساس لوحة فارغة مع الحد الأدنى من التصميم ولا توجد صور تعتمد على نظام الشبكة 960 (12 عمودًا فقط) لمطوّري WordPress الذين يرغبون في العمل ضمن مخطط تقليدي قائم على الشبكة.
البدائل الممكنة
قد يكون اختيار إطار CSS أمرًا صعبًا ، إذا كان 960.gs غير مناسب لك ، فربما يمكنك تجربة بعض الإطارات أدناه.
مخطط: إطار عمل CSS
Blueprint هو إطار عمل CSS ، والذي يهدف إلى تقليل وقت التطوير في CSS. فهي تمنحك أساسًا متينًا من CSS لبناء مشروعك على أعلى ، مع شبكة سهلة الاستخدام ، وطباعة معقولة ، وحتى ورقة أنماط للطباعة. إنه أقل إنتفاخًا بكثير من إطار YUI ، وربما يكون على قدم المساواة مع 960.gs من حيث سهولة الاستخدام.
CSS-بويليربليت
من أحد مؤلفي المخطط. لقد قام بإنشاء إطار عمل غير محدد يوفر العناصر الأساسية لبدء أي مشروع. هذا الإطار خفيف ويسعى إلى عدم اقتراح اصطلاحات التسمية غير الدلالية.
العناصر - A لأسفل إلى إطار CSS
تم تصميمه لمساعدة المصممين على كتابة CSS بشكل أسرع وأكثر كفاءة. تتجاوز العناصر كونها مجرد إطار ، بل هي سير العمل الخاص بالمشروع. لديها كل ما تحتاجه لإكمال مشروعك.
WYMstyle - إطار CSS - نظرة عامة
يهدف هذا المشروع إلى توفير مجموعة من ملفات CSS المعيارية المختبرة ، والتي يمكن استخدامها للتصميم السريع لمواقع الويب.
بعد متعدد تخطيط متعدد | YAML
"تخطيط متعدد الأطوار آخر" (YAML) عبارة عن إطار (X) HTML / CSS لإنشاء تخطيطات عائمة حديثة ومرنة. الهيكل متعدد الاستخدامات للغاية في برامجه ومتاح للمستخدمين النهائيين الوصول إليه.
CleverCSS
CleverCSS هي لغة ترميزية صغيرة لـ CSS مستوحاة من Python والتي يمكن استخدامها لبناء ورقة أنماط بطريقة نظيفة ومنظّمة. في العديد من الطرق يكون أنظف وأكثر قوة من CSS2.
sparkl CSS Framework
تجمع Sparkl بين علامات POSH و CSS المضاد للرصاص وجافا سكريبت غير مزعجة في إطار واحد سهل الاستخدام لتطوير الويب ، مما يجعل من السهل إنشاء مواقع مضادة للرصاص تتوافق مع معايير الويب. ويستخدم إطارًا معياريًا ، مما يتيح لك استخدام ما تحتاج إليه وترك ما لا تريده.
jQuery UI CSS Framework
يتضمن Query UI إطار CSS قويًا مصممًا لإنشاء أدوات jQuery المخصصة. يتضمن الإطار فئات تغطي مجموعة كبيرة من احتياجات واجهة المستخدم الشائعة ، ويمكن معالجتها باستخدام jQuery UI ThemeRoller. من خلال بناء مكونات واجهة المستخدم الخاصة بك باستخدام jQuery UI CSS Framework ، سوف تعتمد اتفاقيات ترميز مشتركة وتتيح سهولة تكامل الشفرات عبر المجتمع المساعد بشكل عام.
مكتوبة حصرا ل WDD بواسطة بول أندرو من Speckyboy.com
هل تستخدم 960gs لمواقع الويب الخاصة بك؟ ما هي المزايا الرئيسية؟ نود أن نسمع منك ...