آموزش فریم‌ورک Foundation-بخش۲-سیستم گرید

آموزش فریم‌ورک Foundation-بخش۲-سیستم گرید

بخش دوم – گریدبندی (Griding System)

سیستم گریدبندی فریم ورک فاندیشن

 

 

سیستم گریدبندی فریم ورک فاندیشن (Foundation Grid System)

 

در مقاله قبل، با فریم ورک فاندیشن آشنا شدیم و مزایا و امکاناتی که برای مدیران و طراحان وب سایت فراهم می کند را ذکر کردیم. و در نهایت نحوه دانلود فریم ورک foundation را بصورت سفارشی و شخصی سازی شده (Custom) را بررسی کردیم. در این مقاله، می خواهیم در مورد جزئیات گرید بندی این فریم ورک صحبت خواهیم کرد. و در مقالات بعدی، پلاگین اسلایدر جاوااسکریپتی اوربیت (Orbit Javascript Slider Plugin) را مورد بررسی قرار خواهیم داد.

 

سیستم گرید (The grid system):

فریم ورک فاندیشن تنها از نقطه شکست (Break Point) بالای ۷۶۸ پیکسل برای اعمال تغییرات ریسپانسیو استفاده می کند.

فاندیشن (foundation) یک فریم ورک ریسپانسیو (Mobile Friendly یا Mobile First) می باشد که برای نمایش در اسکرین های موبایل و تبلت هیچ مشکلی ندارد و کاملا واکنش گرا می باشد. این فریم ورک برخلاف اکثر فریم ورک های ریسپانسیو، تنها از یک نقطه شکست (بالای ۷۶۸ پیکسل-above 768px) برای اعمال تغییرات ساختاری برای پیاده سازی واکنش گرا بودن استفاده می کند.

سیستم گرید فریم ورک foundation دارای سه بخش است: گرید دسکتاپ (Desktop Grid) ، گرید موبایل (Mobile Grid) و گرید بلاک (Block Grid) . از آنجایی که فریم ورک فاندیشن بصورت Mobile First می باشد، ابتدا گرید موبایل را بررسی می کنیم:

 

گرید کوچک (The Small Grid):

 

گرید بندی کوچک (The Small Grid)

 

مثال اول: طراحی ستون ۱۲ تایی:

<div class="row">
    <div class="small-12 columns">
        <h2>This is Foundation</h2>
    </div>
</div>

 

در کد فوق، از سه کلاس زیر استفاده شده است:

  • Row: این کلاس، ستون های گرید را در خود جای می دهد. در این مثال، از ۱۲ ستون استفاده کرده ایم. پس نهایتا می توانیم ۱۲ ستون را در هر سطر (row) تعریف کنیم. در صورتی که به ستون های بیشتری نیاز داشته باشید، می توانید در بخش دانلود سفارشی، تا ۱۶ ستون را تعریف کنید و فریم ورک را دانلود کنید.
  • Small-12: تعداد ستونها را در سایز small تعریف می کند که در این مثال، ۱۲ ستون خواهیم داشت.
  • Columns: کلاس بالا یعنی small-12 تنها width را تعریف می کند. برای اینکه این اندازه به ستون واقعی تبدیل شوند، باید از کلاس columns استفاده کنیم.

 

در مثال فوق، با تعریف small-12 بیان کرده ایم که می خواهیم آن سطر در اندازه small تمام صفحه (full-width) باشد و تمام ۱۲ ستون را اشغال کند.

مثال دوم: طراحی ستون های ۸ و ۴ تایی:

اکنون به مثال زیر دقت کنید:

<div class="row">

    <div class="small-4 columns">

        <h2>This is a sidebar</h2>

    </div>

    <div class="small-8 columns">

        <h2>This is the content area</h2>

    </div>

</div>

 

در کد بالا، در یک سطر (row)، دو ستون small-4 و small-8 را تعریف کرده ایم که همانطور که از اعداد ۴ و ۸ مشخص است، هر ستون به اندازه ۴ و ۸ واحد در اندازه small را برای خود در نظر می گیرد.  مجموع این تعداد ستونها همان ۱۲ ستون خواهد شد (۴+۸=۱۲) . small-4 حدودا ۳۳٫۳% و small-8 عرضی حدود ۶۶٫۶% را به خود اختصاص می دهد.

استفاده از سیستم گرید بصورت تو در تو (Nested):

همانطور که احتمالا متوجه شده اید، می توانید از سیستم گرید بصورت تو در تو (Nested) استفاده کنید. به کد زیر نگاه کنید:

<div class="row">

    <div class="small-4 columns">

        <h2>This is a sidebar</h2>

        <div class="row">

            <div class="small-1 columns">

                <h6>#1</h6>

            </div>

            <div class="small-9 columns">

                <p>A post title</p>

            </div>

            <div class="small-2 columns">

                <button>Go</button>

            </div>

        </div>

    </div>

    <div class="small-8 columns">

        <h2>This is the content area</h2>

    </div>

</div>

همانطور که در مثال فوق می بینید، ستون ۴ تایی را به سه بخش ۱ و ۹ و ۲ تایی تقسیم کرده ایم. به این صورت می توانید به تعداد نامحدود، ستون در یک سطر داشته باشید.

 

گرید بزرگ (The Large Grid):

 

گرید بزرگ (The Large Grid)

لطفا کد زیر را در نظر بگیرید:

<div class="row">

    <div class="small-4 large-3 columns">

        <h2>This is a sidebar</h2>

    </div>

    <div class="small-8 large-9 columns">

        <h2>This is the content area</h2>

    </div>

</div>

 

استفاده از کلاس های large و small:

مشاهده می کنید که یک کلاس جدید بنام large به کلاس های قبل اضافه شده است (large-3 و large-9). این کلاس ها به مرورگر می گوید هنگامیکه وب سایت در اسکرین های دسکتاپ (large) به نمایش درآمد، ستون اول (یعنی سایدبار) بجای small-4 یعنی ۳۳٫۳% اندازه large-3 یعنی ۲۵% صفحه را به خود اختصاص دهد. و همینطور، بخش محتوا یعنی ستون دوم نیز در دسکتاپ، بجای ۸ ستون، ۹ ستون را شامل شود و فضای نمایش متن بیشتری داشته باشد.

وسط چین کردن محتوای ستون:

برای وسط چین کردن محتوای هر ستون می توانید براحتی با استفاده از کلاس های large-centered و small-centered اینکار را انجام دهید

کاربرد کلاس های push و pull:

همچنین برای جابجا کردن دو ستون مثلا ۳ تایی و ۹ تایی، می توانید بصورت زیرعمل کنید:

<div class="row">

    <div class="small-3 push-9 columns">3</div>

    <div class="small-9 pull-3 columns">9, last</div>

</div>

در کد بالا، ستون small-3 را توسط کلاس push-9 به تعداد ۹ ستون به راست یا چپ (بستگی به direction صفحه دارد) شیفت دادیم و ستون small-9 را توسط کلاس pull-3 به تعداد ۳ ستون به چپ یا راست منتقل کردیم. بنابراین توانستیم این دو ستون را با هم جابجا کنیم. یکی از کاربردهای اینکار این است که بعنوان مثال می توانید سایدبار را در اسکرین های large قرار دهید و در اسکرین های کوچک مانند موبایل، بدلیل اهمیت محتوای هر صفحه نسبت به سایدبار، به پایین بخش اصلی یا محتوا منتقل کنید.

 

گرید بلاک (The Block Grid):

 

گرید بلاک (The Block Grid)

 

پس از یادگیری گرید های کوچک (small) و بزرگ (large) نوبت به یادگیری گرید بلاک خواهد رسید.

کاربرد گریدبندی بلاک (Block Griding):

این نوع از گریدبندی، در مواقعی کاربرد دارد که بخواهیم داده هایی را بصورت یکجا در آن قرار دهیم و سطر و ستون را جدا نکنیم (مانند داده هایی که بصورت اتوماتیک از یک اپلیکیشن تولید می شوند و یا با یک کوئری، از دیتابیس خوانده می شوند). اگر کد زیر را در نظر بگیرید، بیشتر متوجه کاربرد این قضیه خواهید شد:

<ul class="small-block-grid-2 large-block-grid-4">

    <li><img src="../img/photo1.png"></li>

    <li><img src="../img/photo2.png"></li>

    <li><img src="../img/photo3.png"></li>

    <li><img src="../img/photo4.png"></li>

</ul>

در کد بالا، مشاهده می کنید که کلاس های مربوط به تعداد ستون ها در هر سطر را در المان ul تعریف کرده ایم و در li هایی که می توانند پشت سرهم بیایند، تصاویری نمایش می دهیم. بنابراین، در خروجی روی اسکرین های بزرگ مانند دسکتاپ، هر سطر دارای ۴ ستون (large-block-grid-4) خواهد بود و در موبایل، هر سطر دارای دو ستون (small-block-grid-2) می باشد.

 

ضمیمه بخش دوم

 

پلاگین اسلایدر اوربیت (The Orbit Plugin):

می خواهیم با معرفی یک پلاگین کاربردی، فضا را کمی تغییر دهیم! پلاگین اوربیت یکی از پلاگین های مفید و محبوب فریم ورک فاندیشن (Foundation Framework) می باشد.

 

پلاگین اسلایدر اوربیت (The Orbit Plugin)

 

در این پلاگین، المان هایی مانند تصویر (image)، ویدئو (Video) و حتی متن html را می توانید بصورت اسلایدری نمایش دهید. اگر این پلاگین بدرستی تنظیم شود و کاربرپسند طراحی شود، می تواند بسیار مفید باشد. کد زیر را در نظر بگیرید:

<ul data-orbit>

    <li>

        <img src="../img/demos/demo1.jpg" />

        <div class="orbit-caption">…</div>

    </li>

    <li>

        <img src="../img/demos/demo2.jpg" />

        <div class="orbit-caption">…</div>

    </li>

    <li>

        <img src="../img/demos/demo3.jpg" />

        <div class="orbit-caption">…</div>

    </li>

</ul>

 

ساختار پلاگین اسلایدر Orbit:

این پلاگین از ساختار لیست برای نمایش اسلایدها استفاده می کند. کل اسلایدر در یک ul واقع است و هر یک از اسلایدها در یک li به نمایش در میاید. در کد فوق در هر یک از li ها یک تگ تصویر استاندارد html یعنی <img> می بینید و یک div با کلاس orbit-caption ، که عبارتی را که می خواهیم در روی هر اسلاید نمایش داده شود، را در این div قرار میدهیم.

تنظیمات اولیه پلاگین اوربیت:

پلاگین اوربیت (Orbit Plugin) تنظیماتی برای صفحه بندی (paging) و تایمر و نمایش کنترل ها دارد که توسط اسکریپت جی کوئری (Jquery) انجام می شود:

در اینجا، پارامترهایی را که می توانید در این پلاگین تغییر دهید را بیان می کنیم:

timer_speed: 10000,

animation_speed: 500,

bullets: true,

stack_on_small: true

 

پارامترهای فوق می توانند سرعت انیمیشن هر اسلاید، زمان نمایش هر اسلاید و نمایش بولت (bullet) را تغییر دهد.

این موارد بعنوان تنظیمات اولیه (initial) پلاگین اوربیت می باشند و باید در بخش اسکریپت های صفحه html (یعنی قبل از تگ بسته body) تعریف شوند:

<script>

  $(document).foundation();

</script>

سپس پارامترهای موردنیاز را در آن تعریف کنیم:

<script>

$(document).foundation('orbit', {

  timer_speed: 10000,

  animation_speed: 500,

  bullets: true,

  stack_on_small: true

});

</script>

علاوه بر پارامترهای فوق، شما امکان اعمال کلاس به تمام المان های این اسلایدر را خواهید داشت. برای کسب اطلاعات بیشتر درباره اسلایدر اوربیت، به مستندات پلاگین اوربیت از وب سایت Foundation مراجعه کنید.

 

فایل های اسکریپت جاوا اسکریپت فریم ورک Foundation:

به تگ های اسکریپت زیر دقت کنید:

<script src="js/foundation.min.js"></script>

<!–

<script src="js/foundation/foundation.js"></script> 

<script src="js/foundation/foundation.dropdown.js"></script>

<script src="js/foundation/foundation.placeholder.js"></script>

<script src="js/foundation/foundation.forms.js"></script>

<script src="js/foundation/foundation.orbit.js"></script>

–>

 

 فایل foundation.min.js که فایل اصلی اسکریپت فریم ورک فاندیشن می باشد و باید در تمام صفحات تعریف شود. همانطور که مشاهده می کنید، سایر اسکریپت ها کامنت می باشند و برای استفاده از هر کدام باید آنرا از حالت کامنت خارج کنید. دقت کنید که مسیر قرارگیری فایل های جاوا-اسکریپت ممکن است برای شما متفاوت باشد.

در بخش سوم از آموزش فریم ورک foundation ، درباره منو (Navigation) صحبت خواهیم کرد.

 

منبع: https://webdesign.tutsplus.com/articles/foundation-for-beginners-the-grid-system–webdesign-12438


برچسب‌ها:

اسلایدر foundationاسلایدر orbitاسلایدر فاندیشنپلاگین orbitپلاگین اسلایدرسیستم گریدسیستم گریدبندیگرید بزرگگرید بلاکگرید در فاندیشنگرید کوچکگریدبندیگریدبندی foundation

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

16 + 16 =