يمكن أن يساعدنا تصميم إطار عمل CSS في إنشاء صفحات عالية الجودة بسرعة وفعالية، ويساهم أيضًا في توحيد التعليمات البرمجية. وبطبيعة الحال، يعتمد كل إطار على جهود عدد لا يحصى من أسلافه، إليك إطار عمل CSS الموصى به - Blueprint CSS Framework
أطر عمل CSS + إعادة تعيين CSS: التصميم من الصفر
http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch
1. مقدمة
Blueprint هو ما يسمى بإطار عمل CSS، وبالمقارنة، فإن التعليقات الموجودة في كود المخطط مفصلة نسبيًا.
اتبع طريقة بناء إطار عمل CSS كما هو موضح في أطر عمل المصممين لـ Jeff Croft (أو النسخة الصينية من فهم أطر عمل الويب وكيفية بناء إطار عمل CSS):
هناك العديد من الطرق الممكنة للبدء في بناء إطار عمل، ولكن الأكثر شيوعًا والأكثر فائدة هو تلخيص CSS المشترك الخاص بك إلى أوراق أنماط فردية تغطي كل منها جزءًا معينًا من الكل. على سبيل المثال، قد يكون لديك ورقة أنماط تحددها أعلى الطباعة وآخر يتعامل مع إعادة التعيين الجماعي، يكمن جمال النهج في القدرة على تضمين الأنماط التي تحتاجها بشكل انتقائي فقط، وقد ينتهي بك الأمر إلى ستة أو سبعة أوراق أنماط مختلفة في إطار العمل الخاص بك، ولكن إذا لم يكن هناك مشروع معين. لا تحتاج إلى واحدة أو اثنتين منها، ولا يلزم تضمينها. يحتوي إطار العمل الذي أنشأناه في مكتبنا على خمس أوراق أنماط:.
إعادة تعيين.css - يعالج إعادة التعيين الشامل.
type.css - يتعامل مع الطباعة.
Grid.css - يتعامل مع شبكة التخطيط.
widgets.css—يتعامل مع عناصر واجهة المستخدم مثل علامات التبويب والقوائم المنسدلة وأزرار "قراءة المزيد".
base.css — يتضمن جميع أوراق الأنماط الأخرى، لذا نحتاج فقط إلى استدعاء base.css من مستندات HTML (X) الخاصة بنا لاستخدام إطار العمل بأكمله.
تم بناء المخطط بالمثل :
تقسيم وقهر :
فيما يتعلق بالتنظيم الوظيفي، يقوم البرنامج بتوزيع وظائف مثل التخطيط والطباعة والقطعة وإعادة التعيين والطباعة في ملفات CSS مختلفة. وهذا يجعل من السهل على المستخدمين استيراد الوظائف التي يريدون استخدامها فقط، بدلاً من استيراد جميع الملفات، ويحسن أداء تحميل الصفحة. في الوقت الحالي، يوفر قسم المكونات معالجة الأزرار فقط، ولم يحقق بعد نهج McKinsey's MECE ("المستقل المتبادل والشامل تمامًا").
واجهة موحدة :
على الرغم من أن الوظائف موزعة على ملفات CSS متعددة، عند الاستيراد، يلزم تضمين نفس الملف screen.css فقط. تتم معالجة تفاصيل الاستيراد المحددة في screen.css، الذي يوحد الواجهة الخارجية.
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />
وصف ملف CSS المتضمن في المخطط:
screen.css
هذا هو الملف الرئيسي لإطار العمل، وهو يستورد ملفات CSS أخرى من الدليل "lib"، ويجب تضمينه في كل صفحة.
على غرار وظيفة base.css الخاصة بـ Jeff Croft، ما عليك سوى تضمين هذا الملف ويمكن استيراده
print.css
يقوم هذا الملف بتعيين بعض قواعد الطباعة الافتراضية، بحيث يتم تضمين الإصدارات المطبوعة في كل صفحة.
تستخدم للتعامل مع الطباعة ويمكن تصنيفها على أنها القطعة.
ليب/grid.css
يقوم هذا الملف بإعداد الشبكة (هذا صحيح)، فهو يحتوي على الكثير من الفئات التي يمكنك تطبيقها على divs لإعداد أي نوع من الشبكات القائمة على الأعمدة.
يستخدم للتعامل مع تخطيط الصفحة (الأعمدة)
ليب/typography.css
يقوم هذا الملف بتعيين بعض الطباعة الافتراضية كما أنه يحتوي على بعض الطرق لبعض الأشياء الرائعة التي تتعلق بالنص الخاص بك.
يستخدم للتعامل مع تخطيط عناصر الصفحة.
ليب/reset.css
يقوم هذا الملف بإعادة تعيين قيم CSS التي تميل المتصفحات إلى تعيينها لك.
يستخدم لإعادة تعيين الصفحة وتحديد القيم الافتراضية لعناصر الصفحة التي لا تحدد سمات CSS.
ليب/buttons.css
يوفر بعض أزرار CSS الرائعة فقط.
يستخدم للتعامل مع الأزرار، والتي يمكن تصنيفها كعناصر واجهة مستخدم
ليب/compressed.css
نسخة مضغوطة من الملفات الأساسية استخدمها في كل موقع مباشر.
راجع screen.css للحصول على التعليمات
توفير ملفات CSS مضغوطة (بما في ذلك Grid.css، وtypography.css، وreset.css، وbuttons.css).
2. بحث حول استخدام كل وحدة
2.1 البحث في الشبكة.css
معالجة التوافق للتمركز عبر المستعرضات
بشكل عام، للتعامل مع الاختلافات بين Firefox وIE عند التعامل مع التوسيط، يتم استخدام الطرق التالية:
الجسم {محاذاة النص: المركز؛}div#container{الهامش الأيسر: تلقائي؛ الهامش الأيمن: تلقائي؛ العرض: 50em؛ محاذاة النص: اليسار؛}
تم الاسترجاع من: http://www.maxdesign.com.au/presentation/center/
كيفية التعامل مع المخطط:
body { text-align: center; /* IE6 Fix */ Margin:36px 0;}/* يجب أن تجمع الحاوية جميع الأعمدة الخاصة بك */ .container { text-align: left; : 0 auto; /* تخطيط المراكز */ width: 1150px; /* العرض الإجمالي */ }كيفية تنفيذ مخطط الأعمدة (الأعمدة):
يحدد المخطط .column و.span-x و.last، والتي يتم دمجها لتحقيق وظيفة العمود.
من بينها: يحدد .column السمة العائمة للعمود؛ ويحدد .span-x عرض العمود؛ ويحدد .last الهامش الأيمن على 0px،
| .column { float : left; Margin-right: 10px; padding: 0;}/* استخدم هذه الفئات لتعيين العرض الذي يجب أن يكون عليه العمود */ .span-1 { width: 30px }.span-2 { width : 70 بكسل؛ }.span-3 { العرض: 110 بكسل }.span-4 { العرض: 150 بكسل }....span-8 { العرض: }.span-9 { العرض: 350 بكسل؛ 10 { العرض: 390 بكسل; }....span-23 { العرض: 910 بكسل }.span-24 { العرض: 950 بكسل; : 1150px; هامش: 0; }/* العنصر الأخير في كتلة متعددة الأعمدة يحتاج إلى هذه الفئة */ .last { Margin-right: 0 } تنفيذ ثلاثة أعمدة: <div class ="container" > <div class ="columnspan-24"> الرأس </div> <div class ="columnspan-4"> الشريط الجانبي الأيسر </div> <div class ="columnspan-16"> المحتوى الرئيسي </div> <div class ="columnspan-4 last"> الشريط الجانبي الأيمن </div> </div> تنفيذ أربعة أعمدة: <div class ="container" > <div class ="columnspan-26" > Header </div> < div class ="columnspan-4"> الشريط الجانبي الأيسر </div> <div class ="columnspan-3 " > المحتوى الرئيسي 0 </div> <div class ="columnspan-25" > المحتوى الرئيسي 1 </ div div> <div class ="columnspan-4 last" > الشريط الجانبي الأيمن </div> </div> لاحظ أن العرض في .container (الذي يحدد عرض الصفحة بأكملها) قد تغير إلى 1150 بكسل عند تنفيذ الفراغ الأعمدة: بالنسبة للأعمدة المتعددة (على سبيل المثال، 5 أعمدة)، توجد أعمدة فارغة (على سبيل المثال، العمودان الأيسر والأيمن فارغان)، يمكنك استخدام .append-x و.prepend-x لملئها. من بينها، يضيف .append-x عمودًا فارغًا بعد العمود (الحشوة على اليمين)، ويضيف .prepend-x عمودًا فارغًا قبل العمود (الحشوة على اليسار). تعريف عام للحاوية /* يجب أن تجمع الحاوية جميع الأعمدة الخاصة بك */ .container { text-align: left; عرض */ } |
2.2 البحث عنset.css
يجب أن يأتي الكود الأصلي لـset.css من Eric Meyer. يمتلك Eric Meyer سجلين حول إعادة التعيين، حيث يتم استخدامهما للتعامل مع مشكلة القيم الافتراضية المختلفة عبر المتصفحات. توثيق إريك ماير ممتاز:
إعادة تعيين المنطق: http://meyerweb.com/eric/thinkts/2007/04/18/reset-reasoning/
إعادة تعيين معاد تحميل: http://meyerweb.com/eric/thinkts/2007/05/01/reset-reloaded/
لماذا إعادة تعيين
السبب الأساسي هو أن جميع المتصفحات لديها إعدادات افتراضية للعرض التقديمي، ولكن لا توجد متصفحات لها نفس الإعدادات الافتراضية (حسنًا، لا توجد عائلتين من المتصفحات — فمعظم المتصفحات المستندة إلى Gecko لها نفس الإعدادات الافتراضية.)
على سبيل المثال، تقوم بعض المتصفحات بوضع مسافة بادئة للقوائم غير المرتبة والمرتبة بالهوامش اليسرى، بينما يستخدم البعض الآخر الحشو الأيسر، في السنوات الماضية، قمنا بمعالجة هذه التناقضات على أساس كل حالة على حدة؛
لماذا تستخدم نمط إعادة التعيين بدلاً من المحدد العام
يستخدم ما يسمى بالمحدد العالمي * لتمثيل جميع عناصر المستند، على سبيل المثال
* { هامش: 0؛} بعض الموارد حول موضوع إعادة تعيين النمط:
مكتبة إعادة تعيين YUI: http://developer.yahoo.com/yui/reset/
http://leftjustified.net/journal/2004/10/19/global-ws-reset/
المقالات التالية هي في الواقع مقالات تناقش إطار عمل CSS أو نصائحها، ولكنها جميعها تشير إلى موضوع إعادة التعيين.
http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/
http://businesslogs.com/design_and_usability/my_5_css_tips.php
http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/
2.3 البحث في typography.css
يتم استخدام typography.css لتحديد تنسيق التخطيط الافتراضي (الخط الأساسي) لعناصر الصفحة:
ضبط النوع على الويب على الشبكة الأساسية:
http://alistapart.com/articles/settingtypeontheweb
2.4 البحث عن Buttons.css
إعادة اكتشاف عنصر الزر يناقش الفوائد المتنوعة لاستخدام عنصر الزر لاستبدال عنصر الإدخال. يوفر عنصر الزر وظائف أكثر ثراءً.
http://particletree.com/features/rediscovering-the-button-element
2.4 بحث Print.css
لدى إريك ماير مقالة حول تنفيذ وظيفة الطباعة في CSS، والتي يمكن استخدامها كمرجع لفهم print.css.
تصميم CSS: الذهاب إلى الطباعة
طباعة مختلفة
2.5 مضغوط.css
Compressed.css عبارة عن حزمة تعمل على ضغط العديد من ملفات المخططات، كما أنها تضغط ملف CSS، وتزيل المسافات غير المفيدة والأسطر الجديدة والتعليقات والنصوص الأخرى.
يتم استخدام هذه الطريقة عند النشر على أنظمة الإنتاج لتجنب استيراد ملفات CSS متعددة على الصفحة، كما أنها مفيدة لتحسين أداء الصفحة.
وفقًا للتعليمات الموجودة في lib/screen.css، يجب استخدام خدمة ضغط css المقدمة من المراهقين:
http://teenage.cz/acidofil/tools/cssformat.php
بالإضافة إلى ذلك، تشمل الخدمات المماثلة التي توفر تحسين وضغط CSS وجافا سكريبت ما يلي:
http://csstidy.sourceforge.net/ (مفتوح المصدر)
http://www.cssdrive.com/index.php/main/csscompressor/
http://www.cleancss.com/ (استنادًا إلى csstidy)
3. أمثلة الاستخدام
4. الوثائق المرجعية
http://code.google.com/p/blueprintcss/wiki/Tutorial
5. المشاريع ذات الصلة
مولد المخطط: http://kematzy.com/blueprint-generator/
طرابلس: http://monc.se/tripoli/
المقالة الموصى بها: http://www.cssdemos.com/2007/12/29/hands-on-with-blueprint-a-css-framework/