فریم ورک 960Grid

دو طرح بندی را در تصویر زیر مشاهده می کنید.

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

جالب است توجه داشته باشید که طرح دومی هم می تواند زیبا و مناسب باشد ، چون می توان نمونه آن را در طبیعت ، هنر و حتی طراحی های منحصربفرد دید.

نکته در اینجاست که سیستم Grid از جمله ساده ترین و قوی ترین راه های ایجاد نظم و انظباط در طرح بندی صفحات وب است. ممکن است در ابتدای آزمایش یا تست این فریم ورک ها به نظر سخت و مشکل بیاید که با جلوتر رفتن به این عقیده می رسید که کار با آنها خیلی هم سفت و سخت نیست و کار شما را انعطاف پذیر کرده و به شما ابزاری برای ساختار بندی لازم در طرح هایتان را می دهد.

چرا من نیاز به یک سیستم Grid دارم؟

سیستم 960 Grid و دیگر سیستم های مشابه آن یک راه سریع و آسان برای ایجاد طرح بندی های مبتنی بر گراید با استفاده از CSS است. آنها این کار را با ارائه یک راهکار بهینه شده که در اکثر مرورگرها تست شده و عرض و ستون بندی های لازم در آنها تعیین شده است را به شما می دهند.

قبل از روی کار آمدن CSS3 ، دقیقا برای عرض و ستون بندی های ک صفحه وب باید از دستورات خسته کننده ریاضی استفاده می شد.

به عنوان مثال : اگر شما یک Container یا عرض 1000 پیکسل را بخواهید به سه ستون تقسیم کنید ، هر ستون برابر با 333px خواهد شد و حدود 1/3 پیکسل باقی خواهد ماند.

علاوه بر این هر ستون می بایست دارای Margin از راست و چپ باشد. اگر ما به سمت راست و چپ هر ستون 10 پیکسل اضافه کنیم پس باید از عرض هر ستون مقدار 20px را کم کنیم تا ستون ها در کنار یکدیگر قرار گیرد.

حالا با توجه به توضیح بالا ما سه ستون داریم با عرض 313px و 10 پیکسل Margin از راست و چپ هر ستون ( پس در نتیجه ما 999 پیکسل استفاده کرده ایم نه 1000 پیکسل )

آیا می خواهید در 1000 پیکسل 4 ستون داشته باشید ؟ پس در نتیجه جمع Margin ها برابر 4 ستون 80px شده و عرض هر ستون هم برابر با 230px می باشد.

در نهایت اگر می خواهید یک ساید بار اضفه کنید پس 250px عرض سایدبار و 750px عرض باکس محتوا می شود که حالا باید از هر کدام از این ارقام 20px برای Margin راست و چپ کم کنید که به ترتیب 230px برای سایدبار و 730px برای بخش محتوا باقی می ماند.

گیج کننده شد ؟

دیگر طراحان هم همین نظر را دارند. در صورتی که ما علم هوا فضا یاد نمی دهیم و فقط به شما توضیح می دهیم که چگونه به صورت یک طراح وب فکر کنید و یاد بگیرید ، چون ستون بندی ها بارها و بارها در کارهای طراحی وب شما تا ابد کاربرد دارند.

راه حل ؟ پیدا کردن شخصی که به واقع یک دیوانه و خوره ی طراحی وب باشد و برایتان ستون هایی که می خواهید را به CSS اضافه کند تا بتوانید رایگان استفاده کنید! درست فهمیدید منظور ما ناتان اسمیت ( Nathan Smith ) سازنده گراید بندی 960 Grid Ssystem است.

سیستم 960Grid

960 Grid یک روش ساده برای ساخت سایت بر مبنای اصول ستون بندی تا 960 پیکسل است.

دلیل اینکه چرا 960 پیکسل انتخاب شده به این دلیل است که خواسته شده وب سایت در تمام دستگاه ها و گدجت های قدیمی و امروزی برای کاربر به راحتی و درستی به نمایش در آید.

960gs از دو نوع ستون بندی استفاده می کند ، یکی 12 ستونه و دیگری 16 ستونه ( یک ورژن 24 ستونه هم دارد که واقعا به درد اشخاصی می خورد که نیاز به کنترل بیشتر بر روی ستون ها دارند )

در حالت 12 ستونه اولین ستون 60px و به ترتیب ستون های بعدی هر بار 80px به آن اضافه می شود.

بنابر این عرض ستون های موجود به ترتیب 60 , 140 , 220 , 300 , 380 , 460 , 450 , 620 , 700 , 860 , 940 پیکسل است.

در نسخه 16 ستونه به صورت مشابه 12 ستونه است با این تفاوت که ستون اول 40px و برای ستون های بعدی هر بار 60px اضافه می گردد.

بنابر این عرض ستون های موجود این سری 40 , 100 , 160 , 220 , 280 , 340 , 400 , 460 , 520 , 580 , 640 , 700 , 760 , 820 , 880 , 940 پیکسل است.

نوع کلاس بندی ستون ها در CSS

اگر شما عکس بالا را نگاه کنید می بینید که در هر خط ستون های آبی رنگ قرار دارد و آن ستون ها در 960gs هر کدام دارای یک کلاس هستند.

برای ایجاد یک ستون کافیست کلاس مربوط به هر ستون را بلد باشید و آن کلاس را به div مورد نظرتان بدید .

کلاس های تعریف شده در 960gs برای راحتی کار بر اساس تعداد ستون ها تنظیم شده است. برای نوع 12 ستونه از کلاس grid-1 داریم تا grid-12 ( برای 16 ستونه تا grid-16 داریم )

بنابر این حالا با توجه به توضیحات بالا به عکس زیر نگاهی بیندازید. حال دیگر باید با ساخت باکس و ستون به روش قدیمی خاتمه داده و فقط کلاس و عدد هر ستون را بدهید و بقیش حله!

این سیستم نامگذاری واقعا از یک روش مخلوط اما بسیار ساده استفاده کرده تا در ذهن شما باقی بماند. برای استفاده کافیست یادتان باشد از ورژن 12 ستونه دارید استفاده می کنید یا 16 ستونه .

به عنوان مثال اگر شما از نسخه 12 ستونه استفاده می کنید فرض کنید می خواهید کل صفحه را به سه ستون مساوی تقسیم کنید . حال کافیست عدد 12 را بر 3 تقسیم کنید که جواب عدد 4 است که باید به عنوان عدد کلاس انتخاب شود. حال یعنی شما باید 3 div با کلاس grid-4 ایجاد کنید و درون هر کدام موارد خود را قرار دهید. به همین راحتی.

اگر از نسخه 16 ستونه استفاده می کنید و کل صفحه را می خواهید 4 ستون مساوی کنید عدد 16 را بر 14 تقسیم کرده و جواب که عدد 4 است کلاس ستون های شما می شود. اما این بار شما چهار div با کلاس grid-4 باید ایجاد کنید.

اگر تا به حال شما اصلا از سیستم 960gs استفاده نکرده اید ، توصیه می کنم اصلا به پیچیدگی ظاهری آن نگاه نکنید و به عبارتی گول نخورید. حتما به مدت یکساعت وقت صرف کنید و کدهایش را بررسی کنید و به عمق سادگی آن پی ببرید.

بکشید یا فشار دهید ( Pull & Push )

960gs به شما اجازه می دهد اگر زمانی عناصر صفحه خیلی شلوغ شد یا نیاز داشتید ستون ها را به یکدیگر نزدیک یا دور کنید از روش Push یا Pull استفاده کنید.

به عنوان مثال عکس زیر را نگاه کنید. در قسمت اول عکس ما چهار ستون با کلاس grid-3 داریم. در قسمت دوم عکس اگر نگاه کنید ستون اول از سمت راست را به سمت چپ Push کردیم ، یعنی هل دادیم و ستون اول از سمت چپ را به سمت راست Pull کردیم یعنی از جای خودش به جای دیگر کشیدیم .

به خاطر داشته باشید شما می توانید آیتم ها را تا جایی که می خواهید فشار دهید . به عنوان مثال اگر می خئواهید ستون شما به دو ستون آنطرف تر حرکت کند کافیست کلاس push-2 را به div اضافه کنید.

به عنوان مثال عکس زیر را ببینید که شامل لوگو و دیگر باکس های صفحه است. حالا فرض کنید بعدا نیاز دارید که جای لوگو را در وسط صفحه تعیین کنید. در روش قدیمی شما می بایست دوباره از نو تکه های قبلی را کدنویسی می کردید ، اما حالا یک Pull و Push کار را تمام می کنیم.

تبدیل از Pull و Push

حالا با استفاده از کد زیر اگر نگاه کنید با کلاس های Pull و Push جای لوگو را در وسط تعیین می کنیم.

[html]<br />
&lt;div class=&quot;grid_6 push_3&quot;&gt;<br />
&lt;p&gt;logo&lt;/p&gt;<br />
&lt;/div&gt;</p>
<p>&lt;div class=&quot;grid_3 pull_6&quot;&gt;<br />
&lt;p&gt;text column&lt;/p&gt;<br />
&lt;/div&gt;</p>
<p>&lt;div class=&quot;grid_3&quot;&gt;<br />
&lt;p&gt;text column&lt;/p&gt;<br />
&lt;/div&gt;</p>
<p>&lt;div class=&quot;grid_12&quot;&gt;<br />
&lt;p&gt;big box&lt;/p&gt;<br />
&lt;/div&gt;<br />
[/html]

و حالا نتیجه آن به صورت زیر است.

بعد از Pull و Push

ایجاد فضاهای باز

اگر زمانی نیاز داشتید دو ستون را از یکدیگر جدا کنید و بین آنها فاصله زیاد قرار دهید کافیست از کلاس Prefix یا Suffix استفاده کنید . این کلاس شبیه Pull و Push حساب می شود اما با آنها تفاوت دارد.

عکس زیر کاملا گویای تمام موردی است که در بالا گفتیم.

همانطور که نگاه می کنید در عکس مثال بالا از کلاس Suffix-3 برای ایجاد 3 بلوک فضای خالی استفاده کردیم.

اول و آخر

اگر توصیه کنید ستون اول و آخر 10px از کناره ها هر کدام فاصله دارند. اگر مایل بودید اولین ستون به گوشه چسبیده باشد از کلاس Alpha استفاده کنید و اگر می خواهید آخرین ستون به گوشه ها چسبیده باشد از کلاس Omega بهره ببرید.

نکات نهایی

شما 5 نکته را همواره برای استفاده از 960gs به یاد داشته باشید:

1- از کلاس Container-12 برای ورژن 12 ستونه و از کلاس Container-16 برای ورژن 16 ستونه استفاده کنید.

2- از کلاس های grid-1 , grid-3 و … برای تعیین عرض ستون ها استفاده کنید. اگر می خواهید تمام صفحه را به صورت افقی از ستون ها پر کنید حواستان باشد اعداد جلوی کلمه grid بعد از جمع شدن باید یا 12 یا 16 در بیاد و بیشتر نشود. مانند ( grid-4+grid-2+grid-6=12 )

3- از کلاس push و pull برای جابجایی ستون ها به ستونی دیگر استفاده کنید.

4- برای ایجاد فضای خالی بین ستون ها از کلاس prefix , suffix استفاده کنید.

5- از کلاس alpha و omega برای فیکس کردن ستون ها در سمت راست و چپ استفاده کنید.

همچنین در 960 Grid System از قبل css reset قرار داده شد و شما نیازی به گذاشتن دوباره آن ندارید. این Reset CSS بر اساس کدی که Eric Meyer اجرا کرده گذاشته شده و محبوب ترین نوع CSS Reset است.