أصدقائي المبرمجين،،،
طبعا في أساتذة أكتر مني علم بالموضوع … لكن حبيت اتكلم سريعا عشان اعمل تمهيد للحاجات اللي بنشرها…
قبل ما نتكلم عن الـframeworks تعالو نشوف الطريقة العادية عشان نعمل تنسيق للعناصر بـ CSS (Cascading StylrSheet):
نشوف مع بعض مثال بسيط:
<div>
<h3>Hello World!</h3>
</div>
عندنا طرق كتير جدا بالـCSS عشان اتحكم في لون النص المكتوب Hello World!
انا هلخصها في 3 طرق:
الطريقة الأولى
ممكن في صفحة الCSS استدعي الـh3 وأغير اللون:
h3 {
color: green;
}
الطريقة الثانية
ممكن استدعي الـdiv نفسه وأغير اللون… (ملحوظة: لو في اي نصوص تانية جوا الـdiv مع hello world ، كلهم هياخدو نفس اللون:
div {
color: green;
}
الطريقة الثالثة
ممكن اعمل حاجة اسمها class name (أختار اسم مميز) بحيث اربط الحاجة اللي عايز اغير لونها بيه واغير من الCSS
تعالو نختار class مثلا اسمه cat:
<div>
<h3 class="cat">Hello World!</h3>
</div>
أي حاجة مكتوب فيها الclass ده هتحمل الخصائص اللي هنحددها في CSS:
.cat{
color: green;
}
كدة لو معانا نصوص تانية ممكن اختصر واحط معاها تصنيف cat لو انا عايزها بنفس اللون:
<div>
<h3 class="cat">Hello World!</h3>
<h3 class="cat">You are logged in!</h3>
<h3 class="another-color">How can I help?</h3>
</div>
لو نلاحظ في class تاني اسمه another-color ،، هستخدم فيه لون مختلف:
.another-color{
color: blue;
}
كدة عرفنا فايدة الclass names ،، لكن مع المشاريع التقيلة والطويلة جدا، هيكون عدد الclasses كتير وفي احتمال لطول الوقت ومضاعفة المجهود في الشغل عشان اظبط موقع العناصر في الصفحة وحاجات تانية كتير…!!!
أهلا بالFrameWorks !
الframework ده ملفCSS معمول جاهز فيه class names جاهزة… كل اللي هعمله هوا اني احط الclass names دي مع العناصر اللي محتاجها تظهر بشكل معين… وطبعا في frameworks لل javascripts بردو…
في مواقع كتير جدا زي:
Bootstrap: http://getbootstrap.com/
Foundation: http://foundation.zurb.com/
Yaml: http://www.yaml.de/
960 Grid: http://960.gs/
Susy: http://susy.oddbird.net/
كلها بتوفر frameworks جاهزة وبتوفر وقت ومجهود ضخم في تصميم المواقع…
أرجو تكون المعلومة وصلت…
