یکی از مهمترین قسمتهای برنامه نویسی وب برای من اینه که صفحاتو درست و بدون مشکل از همون اول به صورت مرتب دربیارم و نه اینکه اول کدنویسی رو انجام بدم و بعد تازه بیام و یه دستی بکشم به خروجی…
منتها اینکار خیلی زمانگیر و گاهی هم اعصاب خورد کن میشه. چپ و راست کردن این div ها، تغییر دادن موقعیتشون، خصوصا اگه در حال طراحی یک سایت چند زبانه باشی که یکیش هم راست به چپه!
اوایل چند باری سعی کردم که با CSS خودم یه قالب کلی درست کنم، که موفق نبودم. یه دفعه که داشتم دنبال YAML: YAML Ain’t Markup Language میگشتم، به خاطر شباهت برخوردم به YAML : Yet Another Multicolumn Layout که تصمیم گرفتم تستش کنم ولی کلا ازش خوشم نیومد. زیادی شلوغش کرده بود و سربار زیادی رو به صفحه تحمیل میکرد.
به خاطر تجربه نسبتا ناخوشایندی که با YAML داشتم، تا یه مدت دنبال قالب کاری برای CSS نبودم، تا اینکه اتفاقی برخوردم به Blueprint: A CSS Framework و کلا نظرم عوض شد.
میتونید نسخه آخرشو از اینجا بگیرید یا اینکه از git استفاده کنید :
git clone https://github.com/joshuaclayton/blueprint-css.git
این یک CSS Framework خیلی سادست که در نهایت سادگی قابلیتهای فراوانی رو هم به شما میده. سیستمش هم سادست. با اضافه کردن یک (یا سه فایل در اصل که پایینتر توضیح میدم دربارشون ) میتونید از این فریم وورک استفاده کنید :
<!-- Framework CSS -->
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
فایل اولی screen.css فایل اصلیه. این فایل خودش در حقیقت تشکیل شده از چند قسمت که پایینتر دربارشون صحبت میکنم. فایل دوم، برای چاپ صفحه استفاده میشه و به شما این امکان رو میده که صفحات رو خیلی ساده بفرستید برای چاپ، بدون اینکه نیاز به کار خاصی باشه. اما سومی هم که طبق معمول، مربوط میشه به مشکلات IE خصوصا نسخ قدیمی که واقعا مکافات هستن.
در صورتی که دوست داشته باشید میتونید دو فایل دوم رو کنار بگذارید و چیزی رو هم روی مرورگرهای جدید از دست ندید به غیر از یک صفحه مناسب چاپ :) تصمیم با خودتونه.
فایل اصلی خودش ۴ قسمت بوده که توی پوشه src میتونید ببینیدشون، البته نیازی به بودن پوشه src در کار نهایی نیست، چون فایل screen.css حاوی همه قسمتها به صورت فشرده شده هست.
اولین قسمت فایل reset.css هست که من قبلا دربارش صحبت کردم و خودم هم چند نمونه رو معرفی کردم.
قسمت دوم typography.css هستش که حاوی یه سری کلاسهای مناسب برای فرمت دهی متن هست، کلاسهای برای کوچک یا بزرگ کردن، تغییر رنگ پسزمینه به زرد (highlight ) یا برای مخفی کردن (hide) و یه سری کلاس برای مشخص کردن متن (loud ) یا کم کردن تاثیر (quit).
قسمت سوم، در حقیقت سیستم جدول بندی رو برای صفحه ایجاد میکنه و اسمش هم grid.css هست. این سیستم به شما این امکان رو میده که با گذاشتن یه div با کلاس container (و البته showgrid برای نمایش جدول که در زمان طراحی خیلی کمک میکنه) یه سیستم ۹۵۰ پیکسلی داشته باشید که در وسط صفحه قرار میگیره و میتونه برای قرار دادن المنتها ازش استفاده بشه.
مثلا برای چنین شکلی :
ببینید :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
<div class="container showgrid">
<div id="head" class="span-24" style="background-color : red;"><h1>This is an example</h1></div>
<div id="navigation" class="span-4" style="background-color : blue;">
<ul>
<li>Navigation menu</li>
<li>Navigation menu</li>
<li>Navigation menu</li>
<li>Navigation menu</li>
<li>Navigation menu</li>
<li>Navigation menu</li>
</ul>
</div>
<div id="body" class="span-20 last" style="background-color : yellow;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div id="footer" class="span-24" style="background-color : gray; text-align: center;">
Copyright © 2011
</div>
</div>
<body>
</body>
</html>
قسمتهای style که مربوط به رنگ پسزمینه میشه رو کلا در نظر نگیرید اونها رو فقط گذاشتم که ناحیه ها از هم مجزا بشن. دیگه نیازی به سر و کله زدن با float و این جور چیزها نیست. این فریم ورک با ارایه یه سری کلاس آماده به شما اجازه میده که صفحه بندی مورد نظرتونو انجام بدید.
برای دیدن این کلاسها توصیه میکنم که این Cheat Sheet رو ببینید.
طریقه استفاده
گذشته از کلاسهایی که برای فرمها و پیغامها داره، بیشتر چیزی که من ازش میخوام امکان صفحه بندی سادست. بنابراین تنها قسمتی رو که دربارش میگم همین سیستم هست و باقیشو خودتون میتونید بررسی کنید.
برای استفاده از سیستم، باید یه div با کلاس container وجود داشته باشه که همه عناصر دیگه رو در خودش داشته باشه. به عبارتی این div دقیقا بعد از body شروع میشه و دقیقا قبل از body بسته میشه.
برای زمان تست، میتونید کلاس showgrid رو هم به این div اضافه کنید (برای افزودن یک کلاس به یک عنصر در html تنها کافیه که همه کلاسها توی خصیصه class نوشته بشن و با یک فاصله از هم جدا شن مثلا : class=”container showgrind” ) برای این کلاس showgrid باید فایل grid.png که در پوشه src قرارداره رو هم به پروژه اضافه کنید و در پوشه src کنار فایل screen.css قرار بدید.
اینجوری شما میتونید از کلاسهای مخصوص صفحه بندی استفاده کنید. اولین کلاس، span-X هست که X میتونه بین ۱ تا ۲۴ باشه مثلا span-10. بالاتر گفتم که این فریم وورک کل container رو به ۲۴ قسمت مساوی تقسیم میکنه، و span-10 برای مثال، یعنی این عنصر ۱۰ خانه از این جدول رو اشغال میکنه.
به عبارتی اگه شما مثلا چنین ساختاری داشته باشید :
<div class="container showgrid"> <div class="span-4">blablabla</div> <div class="span-20 last">blablabla</div> </div>
دو div در کنار هم در یک ردیف قرار میگیرن. اولی به اندازه ۴ خونه و دومی ۲۰ خونه رو اشغال میکنه. اگر دقت کنید برای دومی کلاس last هم استفاده شده که برای آخرین عنصر یک ردیف باید استفاده بشه و باعث میشه که آخرین عنصر margin چپ نداشته باشه، وگرنه اون چیزی که میخوایم نمیشه و عنصر دوم میاد خط بعدی.
گاهی اوقات لازم میشه که قبل و یا بعد از یک عنصر یه فضای خالی نیاز باشه. برای اینکار کلاسهای append-X و prepend-X معرفی شدن که این امکان رو میدن که فضای خالی قبل یا بعد از عنصر به وجود بیاد. BluePrint این فضای خالی رو با padding ایجاد میکنه و نکته مهم اینه که وقتی شما یک عنصر با کلاسهای (مثلا) span-10 و append-2 داشته باشید، عرض این عنصر 12 خانه خواهد شد و نه ۱۰ . نکته دوم هم اینه که append-X و prepend-X با هم نمیشه که استفاده بشن، چون هر کدوم اثر اون یکی رو خنثی میکنن و به خاطر اینکه prepend بعد از اون یکی تعریف شده، همیشه تاثیر اون باقی خواهد موند و نه append.
دو کلاس دیگه pull-X و push-X هستن. این دو کلاس از margin استفاده کردن برای کشیدن عنصر به سمت چپ یا راست. push عنصر رو به سمت راست و pull هم عنصر رو به سمت چپ میفرسته. نکته مهم اینه که pull و push جزیی از عرض عنصر نیستن.
کلاس prepend-top هم باعث میشه که عنصر از بالا 1.5em از بالا margin داشته باشه و append-bottom هم 1.5em از پایین .
همونطور که گفتم، Blue print کلاسهای دیگه ای رو هم معرفی کرده که میتونید توی راهنماش (و همچنین Cheat Sheet ) اونها رو ببینید و بررسی کنید.
برای دیدن مثال پوشه test رو که با خود فریم وورک دانلود کردید ببینید.
پشتیبانی از زبانهای راست به چپ
برای BP میشه افزونه نوشت. البته نه به معنی افزونه هایی که برای مثلا وردپرس مینویسیم، شاید اصلا اسم افزونه مناسب نباشه برای این مفهوم. یک افزونه برای زبانهای راست به چپ هم نوشته شده که متاسفانه کامل نیست و من خودم مجبور شدم تکمیلش کنم و اگه تنبلی اجازه بده اونو توی لیست بفرستم تا شاید به git اضافه بشه. برای استفاده از این افزونه کافیه که فایل اون رو بعد از فایل اصلی اضافه کنید و تمام. همه چی برعکس میشه :) نسخه فعلی این افزونه توی پوشه plugins/rtl قرارداره که برای استفاده ازش اینطوری عمل کنید :
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="blueprint/plugins/rtl/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
نسخه ای رو هم من تغییر دادم و میتونید از آخر این پست بگیریدش و ازش استفاده کنید. گرچه در آینده اگه اصلاحیه توسط تیم BP پذیرفته بشه از اینجا حذفش میکنم.
یکی از دلایلی که این پست رو نوشتم این بود که نظر شما رو درباره این فریم وورک و کلا فریم وورکهای CSS بدونم. لطفا نظراتتون رو دربارشون بنویسید.
لینک دانلود هک راست به چپ
