طراحی سایت واکنش‌گرا با فریم‌ورک Pure
در هنگام طراحی سایت برای سازگاری با دستگاه‌های مختلف یا به عبارت دیگر طراحی سایت واکنش‌گرا، استفاده از ابزارهایی که بتواند تغییرات عرض صفحه‌ی نمایش را به صورت مداوم در نظر بگیرد و بر اساس آن تغییراتی در ظاهر سایت به انجام برساند سبب افزایش کیفیت و کاهش زمان مورد نیاز برای طراحی سایت خواند شد.
فریم‌ورک Pure
ابزارهایی که در طراحی سایت واکنش‌گرا به کار گرفته می‌شوند، فریم‌ورک‌های ریسپانسیو نام دارند. تعداد زیادی فریم‌ورک CSS برای طراحی سایت واکنش‌گرا وجود دارند. یکی از این فریم‌ورک‌ها Pure نام دارد.
این فریم‌ورک توسط شرکت یاهو توسعه پیدا کرده است. به دلیل تغییرات گسترده در دنیای وب توسعه‌ی این فریم‌ورک متوقف شد. ولی هنوز بخش‌هایی از این فریم‌ورک از جمله بخش ریسپانسیو آن از جمله‌ی بهترین ابزارهای موجود برای طراحی سایت واکنش‌گرا به شمار می‌رود. به ویژه در زبان فارسی که پشتیبانی از سیستم راست به چپ مورد نیاز است، فریم‌ورک Pure بدون نیاز به تنظیماتی خاص به بهترین شکل ممکن این امکان را در اختیار طراحان سایت قرار می‌دهد.
سیستم گرید
اغلب فریم‌ورک‌های CSS برای طراحی سایت واکنش‌گرا از مفهومی به نام گرید برای پیاده‌سازی این قابلیت استفاده می‌کنند. سیستم گرید، ابزاری است که عرض صفحه را به بخش‌هایی مساوی تقسیم می‌کند. به دلیل تقسیم‌پذیری خوب عدد ۱۲ به بخش‌های کوچکتر معمولا از این عدد در فریم‌ورک‌ها استفاده می‌شود.
به این معنی که هر عنصر می‌تواند ضریبی از بخش‌های موجود در عدد ۱۲ را در صفحه اشغال کند. به عبارت دیگر هر عنصر موجود می‌تواند «یک دوازدهم»، «دو دوازدهم»، «سه دوازدم» ... تا «دوازده دوازدهم» از صفحه را به خود اختصاص دهد.
در عرض‌های مختلف صفحه‌ی نمایش یا موبایل و تبلت، این فریم‌ورک ریسپانسیو است که ضریب اختصاص یافته را به صورت خودکار تغییر می‌دهد. برای مثال یک عنصر ممکن است در موبایل «شش دوازدهم» صفحه، در تبلت «چهار دوازدهم» صفحه و در نمایشگر بزرگ «سه دوازدهم» عرض صفحه را به خود اختصاص دهد.
ایجاد گرید در فریم‌ورک ریسپانسیو Pure
ایجاد گرید در Pure با استفاده از دو نوع کلاس‌دهی به عناصر قابل انجام است. کلاس «pure-g» به عنصر والد اعضای گرید و کلاس «pure-u-xx-yy-zz» برای اعضای گرید. برای روشن‌تر شدن موضوع به مثال زیر توجه کنید:
|
1 2 3 4 5 6 |
<div class="pure-g"> <div class="pure-u-6-12 pure-u-4-12 pure-u-3-12"></div> <div class="pure-u-6-12 pure-u-4-12 pure-u-3-12"></div> <div class="pure-u-6-12 pure-u-4-12 pure-u-3-12"></div> <div class="pure-u-6-12 pure-u-4-12 pure-u-3-12"></div> </div> |
در تعیین نام کلاس برای اعضای گرید از سه بخش xx، yy، zz استفاده می‌کنیم.
بخش xx مشخص می‌کند که از چه اندازه‌ای به بالا، گرید چه اندازه‌ای داشته باشد. وارد کردن بخش xx الزامی نیست. اگر این بخش را تعیین نکنید، مقدار وارد شده برای حالت پیش‌فرض یا کوچک یا موبایل در نظر گرفته خواهد شد. برای مثال کلاس pure-u-1-12 مقدار پیش‌فرض عرض عنصر را «یک دوازدهم تعیین می‌کند.»
مقادیر قابل تعیین برای xx مساوی sm برای صفحات کوچک به بالا یا موبایل به بالا، md برای صفحات متوسط به بالا یا تبلت به بالا، lg برای صفحات بزرگ به بالا و xl برای اندازه‌های خیلی بزرگ خواهد بود.
وارد کردن چند مقدار در پی یکدیگر سبب می‌شود عناصر بر اساس عرض صفحه به صورت خودکار تغییر اندازه دهند.
بخش yy و zz هم تعیین‌کننده‌ی مفدار ضریب عرض عنصر نسبت به کل گرید خواهند بود. علاوه بر واحد اصلی یا ۱۲ امکان تعیین عرض عنصر بر اساس ضرایب کوچکتر داخل گرید هم امکان‌پذیر است برای مثال کلاس‌های pure-u-1-2 و pure-u-3-6 معادل pure-u-6-12 هستند.
مثال‌های دیگر
ایجاد یک گرید سه ستونی که در تمامی حالت‌ها به همین شکل باقی می‌ماند:
|
1 2 3 4 5 |
<div class="pure-g"> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> </div> |
ایجاد یک گرید سه ستونی که در موبایل تک ستونی می‌شود:
|
1 2 3 4 5 |
<div class="pure-g"> <div class="pure-u-1 pure-u-sm-1-3"></div> <div class="pure-u-1 pure-u-sm-1-3"></div> <div class="pure-u-1 pure-u-sm-1-3"></div> </div> |
ایجاد یک گرید ۶ ستونی که در تبلت سه ستونی و در موبایل تک ستونی می‌شود:
|
1 2 3 4 5 6 7 8 |
<div class="pure-g"> <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-6"></div> <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-6"></div> <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-6"></div> <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-6"></div> <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-6"></div> <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-6"></div> </div> |
استفاده از گرید Pure
برای استفاده ازگریدهای Pure به سایت این فریم‌ورک مراجعه کنید. ابزارهایی در این سایت وجود دارند که به شما اجازه می‌دهند نسخه‌های مخصوص به خود را ایجاد کنید. تغییرات قابل انجام در نسخه‌های سفارشی شامل تغییر ضرایب گریدها و تغییر نام پیشوندهای مورد استفاده هستند.
برای ایجاد سایت‌های ریسپانسیو، فریم‌ورک‌های متعدد دیگری نیز وجود دارند که در صورت تمایل می‌توانید آن‌ها را بررسی و مورد استفاده قرار دهید.
گزینه‌های جدیدتر
همان‌گونه که گفته شد، این فریم‌ورک دیگر توسعه پیدا نمی‌کند و برای استفاده از ابزارهای دیگر که قابلیت‌هایی مشابه و کارآمدی مناسب داشته باشند، می‌توانید موارد زیر را در نظر داشته باشید: