اولین باری که من سیستم ۹۶۰Grid را به نوعی کشف کردم ، فورا به هیجان آمده و طرح بندی های مورد نیازم را با آن ایجاد کردم. با این حال از آنجایی که من هم مثل بقیه از همان ابتدا به صورت آماتوری طراحی وب را شروع کردم ، وقتی که فایل مربوط به این فریم ورک را دانلود کردم در همان ابتدا بسیار پیچیده به نظر می رسید ، اما با استفاده از آن توانستم طرح های خوبی را پیاده کنم.
ما سعی کردیم تا این مطلب را مخصوص طراحان وب و توسعه دهندگان وب که علاقه مند هستند تا از یک سیستم مناسب برای طرح های خود استفاده نمایند ، قرار دهیم.
در اینجا تمرکزمان را روی فریمورک ۹۶۰grid گذاشته ایم ، اما مطمئنا پس از خواندن این راهنما در می یابید که سیستم های مشابه دیگری که حتی از این فریم ورک بهتر هستند نیز وجود دارد که حس بسیار خوب و ابزاری کارآمد برای طرح بندی های شما خواهند بود.
دو طرح بندی را در تصویر زیر مشاهده می کنید.
هر چند در هر دو تصویر یک نوع سادگی و یک طرح با مستطیل ها ایجاد شده است ، اما به نظر می رسد که طرح اولی از طرح پایین آن بهتر است. با این حال با مقایسه طرح بالایی با پایینی می توان به نظمی که در طرح اولی وجود دارد پی برد که برعکس آن در طرح دومی از اشکال تصادفی و نامنظم استفاده شده است.
جالب است توجه داشته باشید که طرح دومی هم می تواند زیبا و مناسب باشد ، چون می توان نمونه آن را در طبیعت ، هنر و حتی طراحی های منحصربفرد دید.
نکته در اینجاست که سیستم Grid از جمله ساده ترین و قوی ترین راه های ایجاد نظم و انظباط در طرح بندی صفحات وب است. ممکن است در ابتدای آزمایش یا تست این فریم ورک ها به نظر سخت و مشکل بیاید که با جلوتر رفتن به این عقیده می رسید که کار با آنها خیلی هم سفت و سخت نیست و کار شما را انعطاف پذیر کرده و به شما ابزاری برای ساختار بندی لازم در طرح هایتان را می دهد.
چرا من نیاز به یک سیستم Grid دارم؟
سیستم ۹۶۰ Grid و دیگر سیستم های مشابه آن یک راه سریع و آسان برای ایجاد طرح بندی های مبتنی بر گراید با استفاده از CSS است. آنها این کار را با ارائه یک راهکار بهینه شده که در اکثر مرورگرها تست شده و عرض و ستون بندی های لازم در آنها تعیین شده است را به شما می دهند.
قبل از روی کار آمدن CSS3 ، دقیقا برای عرض و ستون بندی های ک صفحه وب باید از دستورات خسته کننده ریاضی استفاده می شد.
به عنوان مثال : اگر شما یک Container یا عرض ۱۰۰۰ پیکسل را بخواهید به سه ستون تقسیم کنید ، هر ستون برابر با ۳۳۳px خواهد شد و حدود ۱/۳ پیکسل باقی خواهد ماند.
علاوه بر این هر ستون می بایست دارای Margin از راست و چپ باشد. اگر ما به سمت راست و چپ هر ستون ۱۰ پیکسل اضافه کنیم پس باید از عرض هر ستون مقدار ۲۰px را کم کنیم تا ستون ها در کنار یکدیگر قرار گیرد.
حالا با توجه به توضیح بالا ما سه ستون داریم با عرض ۳۱۳px و ۱۰ پیکسل Margin از راست و چپ هر ستون ( پس در نتیجه ما ۹۹۹ پیکسل استفاده کرده ایم نه ۱۰۰۰ پیکسل )
آیا می خواهید در ۱۰۰۰ پیکسل ۴ ستون داشته باشید ؟ پس در نتیجه جمع Margin ها برابر ۴ ستون ۸۰px شده و عرض هر ستون هم برابر با ۲۳۰px می باشد.
در نهایت اگر می خواهید یک ساید بار اضفه کنید پس ۲۵۰px عرض سایدبار و ۷۵۰px عرض باکس محتوا می شود که حالا باید از هر کدام از این ارقام ۲۰px برای Margin راست و چپ کم کنید که به ترتیب ۲۳۰px برای سایدبار و ۷۳۰px برای بخش محتوا باقی می ماند.
گیج کننده شد ؟
دیگر طراحان هم همین نظر را دارند. در صورتی که ما علم هوا فضا یاد نمی دهیم و فقط به شما توضیح می دهیم که چگونه به صورت یک طراح وب فکر کنید و یاد بگیرید ، چون ستون بندی ها بارها و بارها در کارهای طراحی وب شما تا ابد کاربرد دارند.
راه حل ؟ پیدا کردن شخصی که به واقع یک دیوانه و خوره ی طراحی وب باشد و برایتان ستون هایی که می خواهید را به CSS اضافه کند تا بتوانید رایگان استفاده کنید! درست فهمیدید منظور ما ناتان اسمیت ( Nathan Smith ) سازنده گراید بندی ۹۶۰ Grid Ssystem است.
سیستم ۹۶۰Grid
۹۶۰ Grid یک روش ساده برای ساخت سایت بر مبنای اصول ستون بندی تا ۹۶۰ پیکسل است.
دلیل اینکه چرا ۹۶۰ پیکسل انتخاب شده به این دلیل است که خواسته شده وب سایت در تمام دستگاه ها و گدجت های قدیمی و امروزی برای کاربر به راحتی و درستی به نمایش در آید.
۹۶۰gs از دو نوع ستون بندی استفاده می کند ، یکی ۱۲ ستونه و دیگری ۱۶ ستونه ( یک ورژن ۲۴ ستونه هم دارد که واقعا به درد اشخاصی می خورد که نیاز به کنترل بیشتر بر روی ستون ها دارند )
در حالت ۱۲ ستونه اولین ستون ۶۰px و به ترتیب ستون های بعدی هر بار ۸۰px به آن اضافه می شود.
بنابر این عرض ستون های موجود به ترتیب ۶۰ , ۱۴۰ , ۲۲۰ , ۳۰۰ , ۳۸۰ , ۴۶۰ , ۴۵۰ , ۶۲۰ , ۷۰۰ , ۸۶۰ , ۹۴۰ پیکسل است.
در نسخه ۱۶ ستونه به صورت مشابه ۱۲ ستونه است با این تفاوت که ستون اول ۴۰px و برای ستون های بعدی هر بار ۶۰px اضافه می گردد.
بنابر این عرض ستون های موجود این سری ۴۰ , ۱۰۰ , ۱۶۰ , ۲۲۰ , ۲۸۰ , ۳۴۰ , ۴۰۰ , ۴۶۰ , ۵۲۰ , ۵۸۰ , ۶۴۰ , ۷۰۰ , ۷۶۰ , ۸۲۰ , ۸۸۰ , ۹۴۰ پیکسل است.
نوع کلاس بندی ستون ها در CSS
اگر شما عکس بالا را نگاه کنید می بینید که در هر خط ستون های آبی رنگ قرار دارد و آن ستون ها در ۹۶۰gs هر کدام دارای یک کلاس هستند.
برای ایجاد یک ستون کافیست کلاس مربوط به هر ستون را بلد باشید و آن کلاس را به div مورد نظرتان بدید .
کلاس های تعریف شده در ۹۶۰gs برای راحتی کار بر اساس تعداد ستون ها تنظیم شده است. برای نوع ۱۲ ستونه از کلاس grid-1 داریم تا grid-12 ( برای ۱۶ ستونه تا grid-16 داریم )
بنابر این حالا با توجه به توضیحات بالا به عکس زیر نگاهی بیندازید. حال دیگر باید با ساخت باکس و ستون به روش قدیمی خاتمه داده و فقط کلاس و عدد هر ستون را بدهید و بقیش حله!
این سیستم نامگذاری واقعا از یک روش مخلوط اما بسیار ساده استفاده کرده تا در ذهن شما باقی بماند. برای استفاده کافیست یادتان باشد از ورژن ۱۲ ستونه دارید استفاده می کنید یا ۱۶ ستونه .
به عنوان مثال اگر شما از نسخه ۱۲ ستونه استفاده می کنید فرض کنید می خواهید کل صفحه را به سه ستون مساوی تقسیم کنید . حال کافیست عدد ۱۲ را بر ۳ تقسیم کنید که جواب عدد ۴ است که باید به عنوان عدد کلاس انتخاب شود. حال یعنی شما باید ۳ div با کلاس grid-4 ایجاد کنید و درون هر کدام موارد خود را قرار دهید. به همین راحتی.
اگر از نسخه ۱۶ ستونه استفاده می کنید و کل صفحه را می خواهید ۴ ستون مساوی کنید عدد ۱۶ را بر ۱۴ تقسیم کرده و جواب که عدد ۴ است کلاس ستون های شما می شود. اما این بار شما چهار div با کلاس grid-4 باید ایجاد کنید.
اگر تا به حال شما اصلا از سیستم ۹۶۰gs استفاده نکرده اید ، توصیه می کنم اصلا به پیچیدگی ظاهری آن نگاه نکنید و به عبارتی گول نخورید. حتما به مدت یکساعت وقت صرف کنید و کدهایش را بررسی کنید و به عمق سادگی آن پی ببرید.
بکشید یا فشار دهید ( Pull & Push )
۹۶۰gs به شما اجازه می دهد اگر زمانی عناصر صفحه خیلی شلوغ شد یا نیاز داشتید ستون ها را به یکدیگر نزدیک یا دور کنید از روش Push یا Pull استفاده کنید.
به عنوان مثال عکس زیر را نگاه کنید. در قسمت اول عکس ما چهار ستون با کلاس grid-3 داریم. در قسمت دوم عکس اگر نگاه کنید ستون اول از سمت راست را به سمت چپ Push کردیم ، یعنی هل دادیم و ستون اول از سمت چپ را به سمت راست Pull کردیم یعنی از جای خودش به جای دیگر کشیدیم .
به خاطر داشته باشید شما می توانید آیتم ها را تا جایی که می خواهید فشار دهید . به عنوان مثال اگر می خئواهید ستون شما به دو ستون آنطرف تر حرکت کند کافیست کلاس push-2 را به div اضافه کنید.
به عنوان مثال عکس زیر را ببینید که شامل لوگو و دیگر باکس های صفحه است. حالا فرض کنید بعدا نیاز دارید که جای لوگو را در وسط صفحه تعیین کنید. در روش قدیمی شما می بایست دوباره از نو تکه های قبلی را کدنویسی می کردید ، اما حالا یک Pull و Push کار را تمام می کنیم.
تبدیل از Pull وPush
حالا با استفاده از کد زیر اگر نگاه کنید با کلاس های Pull و Push جای لوگو را در وسط تعیین می کنیم.
view source
print?
۰۱ <br />
۰۲ <div class="grid_6 push_3"><br />
۰۳ <p>logo</p><br />
۰۴ </div></p>
۰۵ <p><div class="grid_3 pull_6"><br />
۰۶ <p>text column</p><br />
۰۷ </div></p>
۰۸ <p><div class="grid_3"><br />
۰۹ <p>text column</p><br />
۱۰ </div></p>
۱۱ <p><div class="grid_12"><br />
۱۲ <p>big box</p><br />
۱۳ </div><br />
و حالا نتیجه آن به صورت زیر است.
بعد از Pull و Push
ایجاد فضاهای باز
اگر زمانی نیاز داشتید دو ستون را از یکدیگر جدا کنید و بین آنها فاصله زیاد قرار دهید کافیست از کلاس Prefix یا Suffix استفاده کنید . این کلاس شبیه Pull و Push حساب می شود اما با آنها تفاوت دارد.
عکس زیر کاملا گویای تمام موردی است که در بالا گفتیم.
همانطور که نگاه می کنید در عکس مثال بالا از کلاس Suffix-3 برای ایجاد ۳ بلوک فضای خالی استفاده کردیم.
اول و آخر
اگر توصیه کنید ستون اول و آخر ۱۰px از کناره ها هر کدام فاصله دارند. اگر مایل بودید اولین ستون به گوشه چسبیده باشد از کلاس Alpha استفاده کنید و اگر می خواهید آخرین ستون به گوشه ها چسبیده باشد از کلاس Omega بهره ببرید.
نکات نهایی
شما ۵ نکته را همواره برای استفاده از ۹۶۰gs به یاد داشته باشید:
۱- از کلاس Container-12 برای ورژن ۱۲ ستونه و از کلاس Container-16 برای ورژن ۱۶ ستونه استفاده کنید.
۲- از کلاس های grid-1 , grid-3 و … برای تعیین عرض ستون ها استفاده کنید. اگر می خواهید تمام صفحه را به صورت افقی از ستون ها پر کنید حواستان باشد اعداد جلوی کلمه grid بعد از جمع شدن باید یا ۱۲ یا ۱۶ در بیاد و بیشتر نشود. مانند ( grid-4+grid-2+grid-6=12 )
۳- از کلاس push و pull برای جابجایی ستون ها به ستونی دیگر استفاده کنید.
۴- برای ایجاد فضای خالی بین ستون ها از کلاس prefix , suffix استفاده کنید.
۵- از کلاس alpha و omega برای فیکس کردن ستون ها در سمت راست و چپ استفاده کنید.
همچنین در ۹۶۰ Grid System از قبل css reset قرار داده شد و شما نیازی به گذاشتن دوباره آن ندارید. این Reset CSS بر اساس کدی که Eric Meyer اجرا کرده گذاشته شده و محبوب ترین نوع CSS Reset است.
