نوشته‌هایی با برچسب Reset CSS

‌Blueprint CSS

فروردین ۱۹م

توسط فرود در CSS

۸ نظر

یکی از مهمترین قسمتهای برنامه نویسی وب برای من اینه که صفحاتو درست و بدون مشکل از همون اول به صورت مرتب دربیارم و نه اینکه اول کدنویسی رو انجام بدم و بعد تازه بیام و یه دستی بکشم به خروجی…
منتها اینکار خیلی زمانگیر و گاهی هم اعصاب خورد کن میشه. چپ و راست کردن این 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 &copy; 2011
		</div>
	</div>
<body>

</body>
</html>

قسمتهای style که مربوط به رنگ پسزمینه میشه رو کلا در نظر نگیرید اونها رو فقط گذاشتم که ناحیه ها از هم مجزا بشن. دیگه نیازی به سر و کله زدن با float و این جور چیزها نیست. این فریم ورک با ارایه یه سری کلاس آماده به شما اجازه میده که صفحه بندی مورد نظرتونو انجام بدید.
ادامه مطلب

, ,

Reset CSS

بهمن ۲۹م

توسط فرود در CSS

۴ نظر

همیشه توضیح اینکه چطوری میشه که همه بروزرها یه سایت رو به یه شکل نشون ندن و همه اونها سایت رو یک دست نشون بدن عذاب آور بوده. در حقیقت من میخوام اینبار یه کم درباره این قضیه که اصولا بهش Reset CSS هم میگن توضیح بدم. یه سری مسایل دیگه هم هست که در مورد CSS میتونه کمک کنه، البته این مسایل شاید یه کم قدیمی باشن برای حرفه ای ها ولی قبلا هم تو یه کامنت، در جواب یه کامنت دیگه گفتم، اگه حرفه ای نیست و اصلا بدرد نمیخوره میتونید راحت چشمتونو ببندید و یه سایت دیگه رو باز کنید که حرفه ای تره :D.

اینکه هر بروزری یه تفسیری از استاندارد داره خودش به اندازه کافی بد هست. اما اینکه هر بروزر یه چیزی رو بعنوان پیشفرض در نظر میگیره دیگه قابل چشمپوشی نیست. مثلا اگه یه عنصر margin نداشته باشه، یعنی صریحا براش یه مقدار تو سی اس اس استفاده نشده باشه اونوقت چی؟ همینو در باره border یا padding در نظر بگیرید. یا مثلا تگهایی مثل abbr یا del و امثال اینها، پیشفرضشون چیه؟ تگهای منطقی چی؟ strong تو طراحی هر کسی میتونه یه معنی داشته باشه، البته اینکه تقریبا همه بروزرها strong رو به عنوان بولد تتفسیر میکنن چیزی رو عوض نمیکنه،‌strong, em یا همه این تگها منطقی هستن و طرز تلقی شما از اونها مهمه.
اینجاست که Reset کردن سی اس اس بداد میرسه. این قسمت رو در نظر بگیرید :
ادامه مطلب

, ,