سیستم گرید 960 (2)

همانطوری که از اسم چارچوب معلوم است، همه صفحاتی که با استفاده از 960gs طراحی شوند، دارای بخش اصلی به عرض 960 پیکسل خواهند بود که بقیه عناصر صفحه را در بر می‌گیرد و سپس این بخش اصلی به 12 یا 16 ستون مساوی تقسیم می‌گردد. به عنوان مثال به شکل 1 که صفحه اصلی یک سایت است توجه کنید، این سایت برای ترازبندی عناصر صفحه خود از سیستم گرید 960 با 12 ستون استفاده کرده است. در شکل 2 ستون‌ها به طور واضح نمایش داده شده است.

example_formalize
شکل 1: صفحه اصلی سایت فرمالایز
example_formalize_grids
شکل 2: صفحه اصلی سایت فرمالایز با ستون‌ها، که برای درک بهتر 960gs نمایش داده شده است.

چرا عرض 960 پیکسلی؟ زیرا 960 پیکسل، عرض مناسبی برای بازه وسیعی از پلتفرم‌ها است که توسط آنها صفحات وب مرور می‌شوند. اساسا عرض 960 پیکسلی اجازه می‌دهد که مانیتورهایی با عرض 1024 پیکسل، سایت را به طور دقیق و بدون اسکرول بار افقی نمایش دهند. با این عرض همیشه فضایی به اندازه 10 پیکسل در سمت راست و چپ ستون اصلی موجود می‌باشد، به این معنی که نمایش‌گرهای کوچکتر نیز قادر خواهند بود محتوا را از سمت چپ‌ترین بخش تا سمت راست‌ترین بخش بدون اشکال نمایش دهند. بعلاوه، همه اعداد در 960gs اعداد کامل هستند که مبتنی بر نسبت طلایی می‌باشند – یعنی مسئله فاصله غیر عادی و مسئله نقطه ممیزی دیگر وجود نخواهد داشت.

سیستم گرید 960 (1)

سیستم گرید 960سیستم گرید 960 (960gs) یک چارچوب CSSای است که کمک می‌کند توسعه دهندگان سایت، الگوی اولیه طراحی‌ها را خیلی سریع ایجاد نمایند. چارچوب‌های زیادی برای بخش طراحی موجود می‌باشد که همگی کمک می‌کنند که بخش دشوار طراحی اولیه الگو و تنظیم موقعیت عناصر HTML نسبت به یکدیگر خیلی سریع و بدون هیچ مشکلی انجام گیرد. سیستم گرید 960 نیز یکی از این چارچوب‌ها است.

1 – مسئله دقیقا چیست؟
دو الگوی اولیه زیر را در نظر بگیرید، در شکل زیر الگوی اولیه دو صفحه را مشاهده می‌کنید که هر دو صفحه از 6 بلوک مشابه تشکیل شده است. همانطورکه از شکل واضح است طراحی بالایی بدون عیب و نقص می‌باشد اما در طراحی پایین عناصر با یکدیگر تراز نیستند و الگوی اولیه بسیار نامناسب می‌باشد. با کمک سیستم گرید 960 می‌توان به سادگی عناصر صفحه را دقیقا در موقعیت پیش بینی شده قرار داد.

مقایسه ترازبندی صحیح و غیر صحیح
شکل 1: مقایسه ترازبندی صحیح و غیر صحیح [1]

2 – روش کار کردن با سیستم گرید 960
در سیستم گرید 960 تعدادی کلاس از پیش تعریف شده موجود می‌باشد. کافی است که فایل CSS سیستم گرید 960 را در بخش header صفحه اضافه کنید تا به کلاس‌ها دسترسی داشته باشید و سپس هنگام طراحی اولیه صفحه/سایت از این کلاس‌ها استفاده نمایید.

3 – منابع

 [1] http://sixrevisions.com/web_design/the-960-grid-system-made-easy/