توری
جغد همانند دیگر فریم‌وورک‌های مطرح طراحی وب، از یک سیستم توری (grid) واکنش‌گرای ۱۲ ستونی استفاده می‌کند. این سیستم به شما کمک خواهد کرد تا در سریعترین زمان، قوی‌ترین و بهترین طراح‌ها را توسعه دهید.
ظرف‌ها
پیشنهاد می‌کنیم خطوط محتوایی خود را داخل ظرف‌ها (contianer) قرار دهید. با وجود آن که ظرف‌ها الزامی نیستند، اما یک بخش بسیار کارآمدی از سیستم توری را تشکیل می‌دهند. ظرف‌ها باعث می‌شوند تا بتوانیم وسط صفحه را داشته باشیم و محتوا را نگهداری کنیم.
برای داشتن یک ظرف تمام عرض، کلاس joqd container-narrow را استفاده کنید.
و برای داشتن یک ظرف با عرض متغیر (وابسته به اندازه‌ی صفحه) باید کلاس‌های joqd container بکار رود.
<body>
<main class="joqd container">
<!-- محتوای سایت -->
</main>
</body>ستون‌ها
خط
ستون‌ها باید داخل خطوط (row) خاصی قرار داشته باشند تا بتوانند گروه‌های افقی تشکیل دهند. خط با کلاس joqd row ساخته می‌شود.
<main class="joqd container">
<section class="joqd row">
<!-- محتوای سایت -->
</section>
</main>ستون
در توری جغد ۱۲ ستون (column) وجود دارند که شما می‌توانید بنابر طرح خود، از آن‌ها استفاده کنید.
محتوا باید داخل ستون‌ها باشند و فقط ستون‌ها حق دارند فرزند مستقیم خطوط باشند.
desktop-1 نشان دهنده‌ی آن است که عرض ستون در نمایشگرهای بزرگ (دسکتاپ‌ها) برابر یک دوازدهم خط است
محتویات هر ستون از کنار‌های خود ۱۲ پیکسل فاصله دارد (padding: 12px). در صورتی که مایل هستید این فاصله‌ها را از بین ببرید از کلاس joqd no-padding استفاده کنید. اما اگر فقط می‌خواهید شیار‌های کناری از بین بروند، از کلاس joqd no-gaps استفاده کنید.
تفاوت کلیدی توری جغد با دیگر فریم‌وورک‌ها این است که در جغد ستون‌ها از سمت راست چیده می‌شوند.
<div class="joqd row"> <div class="joqd amber desktop-1">۱</div> <div class="joqd deep-orange-darken-2 desktop-1">۲</div> <div class="joqd amber-accent-4 desktop-1">۳</div> <div class="joqd orange-darken-2 desktop-1">۴</div> <div class="joqd yellow-darken-1 desktop-1">۵</div> <div class="joqd amber-darken-1 desktop-1">۶</div> <div class="joqd amber desktop-1">۷</div> <div class="joqd orange-darken-1 desktop-1">۸</div> <div class="joqd yellow-darken-1 desktop-1">۹</div> <div class="joqd amber desktop-1">۱۰</div> <div class="joqd orange-darken-1 desktop-1">۱۱</div> <div class="joqd amber-darken-3 desktop-1">۱۲</div> </div>
ستون‌ها تا زمانی که مجموع ۱۲ رو حفظ کنند، می‌توانند با ترکیب‌های مختلفی کنار هم قرار گیرند.
<div class="joqd row"> <div class="joqd blue desktop-4 desktop-4">۴</div> <div class="joqd blue-darken-3 desktop-8">۸</div> </div> <div class="joqd row"> <div class="joqd cyan-lighten-3 desktop-6">۶</div> <div class="joqd blue-darken-1 desktop-2">۲</div> <div class="joqd indigo-accent-4 desktop-1">۱</div> <div class="joqd blue desktop-3">۳</div> </div> <div class="joqd row"> <div class="joqd light-blue-darken-1 desktop-3">۳</div> <div class="joqd indigo desktop-3">۳</div> <div class="joqd blue desktop-3">۳</div> <div class="joqd light-blue-darken-2 desktop-3">۳</div> </div>
اما زمانی که مجموع از ۱۲ بیشتر شود، آخرین ستون به سطر بعدی منتقل می‌شود.
<div class="joqd row"> <div class="joqd green-darken-2 desktop-6">۶</div> <div class="joqd green desktop-4">۴</div> <div class="joqd light-green-darken-1 desktop-5">۵</div> <div class="joqd green-lighten-1 desktop-7">۷</div> <div class="joqd light-green-darken-4 desktop-2">۲</div> <div class="joqd green-lighten-3 desktop-4">۴</div> <div class="joqdlime desktop-1">۱</div> </div>
ستون‌های تو در تو
همچنین می‌تواند از ستون‌ها به صورت تو در تو استفاده کرد (داخل هر ستون یک عنصر خط ساخت).
<div class="joqd row"> <div class="joqd red desktop-12 align-center thin-border white-border">۱۲<div class="joqd row"> <div class="joqd red-accent-1 desktop-6 align-center thin-border red-border">۶<div class="joqd row"> <div class="joqd red-accent-2 desktop-4 align-center thin-border red-accent-1-border">۴</div> <div class="joqd red-accent-4 desktop-4 align-center thin-border red-accent-1-border">۴</div> <div class="joqd pink-accent-3 desktop-4 align-center thin-border red-accent-1-border">۴</div> </div> </div> <div class="joqd red-lighten-2 desktop-6 align-center thin-border red-border">۶<div class="joqd row"> <div class="joqd red-accent-3 desktop-4 align-center thin-border red-lighten-2-border">۴</div> <div class="joqd red-darken-1 desktop-4 align-center thin-border red-lighten-2-border">۴</div> <div class="joqd red-darken-4 desktop-4 align-center thin-border red-lighten-2-border">۴</div> </div> </div> </div> </div> </div>
کشیدن و هل دادن ستون‌ها
در طراحی‌های واکنشگرا، اغلب چیدمان و محل‌های قرار گیری عناصر و ستون‌ها در هر دستگاه متفاوت است. به همین منظور به کمک عملیات‌های کشیدن و هل دادن جغد می‌توان ستون‌ها را (در دستگاه‌های مختلف) جا به جا کرد.
طرز کار کشیدن و هل دادن به این صورت است که ابتدا دستگاه مشخص می‌شود و سپس بسته به نوع عمل، کلاس -push- برای هل دادن و کلاس -pull- را برای کشیدن و سپس مقدار ستون‌های تکان داده شدن تعیین می‌شود.
<div class="joqd row"> <div class="joqd brown desktop-5 desktop-push-7">۵</div> <div class="joqd brown-darken-2 desktop-7 desktop-pull-5">۷</div> <div class="joqd brown-lighten-1 desktop-6 desktop-push-6">۶</div> </div>
دستگاه‌ها
برای واکنشگرا کردن یک وب‌سایت به کمک جغد، لازم است تا با دستگاه‌هایی که در جغد تعریف شده‌اند را بشناسید. به کمک این دستگاه‌ها (و کلاس‌های مربوطه‌شان) می‌توانید برای هر اندازه‌ی صفحه یک طرح و چینش متفاوت داشته باشید.
|
دستگاه |
پیشوند کلاس |
عرض ظرف |
عرض ستون‌ها |
عرض شیار |
|---|---|---|---|---|
|
موبایل |
|
اتوماتیک |
اتوماتیک |
24px |
|
تبلت |
|
750px |
~62px |
24px |
|
لپتاپ |
|
970px |
~81px |
24px |
|
دسکتاپ |
|
1170px |
~97px |
24px |