چیدن ستون ها در فریمورک foundation

در آموزش قبلی نحوه تقسیم بندی صفحه و ایجاد بلاک یا ستون های مختلف در صفحه رو با توجه به grid توضیح دادیم اگه نمیدونید این چیزا چی هستند بهتره که اموزش قبلی رو از اینجا (کلیک کنید) بخونید و دوباره به همین اموزش برگردید.

در فریمورک foundation بعد از اینکه ستون ها یا column ها رو ایجاد کردید میتونید توی صفحه جابه جا کنیدشون 😀 این جابه جایی به صورت افقی (روی محور x ها) توسط خود فریمورک انجام میشه. جابه جایی ها بر حسب اندازه ی grid ها انجام میشه , شما به جای اینکه بیاید از سایزهایی مثل پیکسل استفاده کنید میاید بر اسال سایز عرض گرید (grid) ستون های خودتون رو جابه جا میکنید.

جابه جایی ها در سه حالت ممکنه رخ بده : (منظورم از سایز عرض صفحه یا width صفحه نمایشگر هست)

small-offset : برای صفحاتی با سایز ۰ تا ۷۴۰ پیکسل فعال میشه

medium-offset : برای صفحاتی با سایز بین ۷۴۰ تا ۱۰۲۴ پیکسل فعال میشه

large-offet : برای صفحاتی با سایز بزرگتر از ۱۰۲۴ فعال میشه!

نکته : اگه small-offset رو به تنهایی به کار ببرید صفحات بالاتر از خودشم پوشش میده یعنی برای تمام صفحات فعال میشه! و همینطور اگه medium-offset رو تنها به کار ببرید برای صفحات ۷۴۰ به بالا فعال میشه! اگه متوجه نشدید و قاطی کردید نگران نباشید 😀 منم اولش همینجوری شدم! در ادامه چندتا مثال میزنم تا متوجه بشید.

هر کدوم از مقدار های small-offset و medium-offset و large-offset مقادیری بین ۱ تا ۱۲ رو به دنباله خودشون به صورت مثلا small-offset-12 قبول میکنند.

به مثال زیر دقت کنید: (پیش نمایش رو میتونید از اینجا ببینید)

در مثال بالا یک ردیف ساختم و درون اون یک ستون با اندازه ۲ گرید قرار دادم. بعدش اون رو دو گرید(grid) جا به جا کردم. دقت کنید که جابه جایی ها به سمت راست انجام میشن. اگه شما مثلا عدد ۵ رو به offset بدید ستون شما به اندازه ۵ گرید به سمت راست جابه جا میشه! دوستان عزیز جمع اندازه ی ستون و مقدار جابه جایی اون اگه از ۱۲ بیشتر بشه ستون از عرض صفحه ی شما بیرون میزنه. یک قانون کلی که وجود داره این هست که جمع اندازه ی کل گرید ها و جابه جایی های درون یک سطر اگه بیشتر از ۱۲ بشه محتوا از عرض صفحه بیرون میزنه و کاربر مجبور میشه که صفحه رو اسکرول کنه!!! مثلا به دستورات زیر دقت کنید: (پیش نمایش رو میتونید از اینجا ببینید)

در مثال بالا اگه دقت کنید یک اسکرول افقی به صفحه اظافه میشه و شما باید صفحه رو اسکرول کنید تا بتونید عرض سایت رو به صورت کامل ببینید!

دوستان عزیز شما میتونید با استفاده از offset ها برای سایت خودتون چیدمان های جالبی ایجاد کنید , به مثال زیر دقت کنید: (پیش نمایش رو میتونید از اینجا ببینید)

در مثال بالا من یه حالت پله مانند ساختم که رسپانسیو نیز هست 😀 این فقط یک مثال هست و کاربرد انچنانی نداره!

با استفاده از offset ها شما میتونید یک ستون رو به مرکز یک ردیف بیارید , بدین صورت که سایز ستون هرچقدر که باشه کافیه که مقدار grid باقیمونده رو تقسیم بر ۲ کنید و نصف اون رو به offset بدید , مثلا اگه سایز ستون من ۶ باشه مقدار باقیمونده (مقدار کل ۱۲ گرید هست) برابر با ۶ میشه که اگه از مقدار ۳ برای افست استفاده کنم ستون من به مرکز افقی صفحه میاد. اگه مقدار باقیمونده عددی فرد شد میتونید از margin استفاده کنید تا ستون رو به مرکز یک سطر انتقال بدید. به مثال زیر دقت کنید: (پیش نمایش رو میتونید از اینجا ببینید)

در مثال بالا ما به ستون خودمون جوری offset دادیم که به مرکز صفحه (مرکز از لحاظ افقی) بیاد.

دوستان عزیز با استفاده از اینکه افست رو در حالت های small یا large یا medium استفاده میکنید , میتونید حالات مختلفی از offset رو برای صفحات رسپانسیو داشته باشید , به مثال زیر دقت کنید:(پیش نمایش رو میتونید از اینجا ببینید)

در مثال بالا مقدار offset برای اندازه های موبایلی(small) برابر با ۲ , برای اندازه های صفحه های مانیتور متوسط (medium) برابر با ۵ و برای مانیتور های بزرگ ۴ است.

اگه برای افست حالت های medium یا large یا small رو ذکر نکنید ممکنه شرایط زیر به وجود بیاد:

  • اگه مقدار افست رو برای small مشخص کرده باشید اما برای medium و large مشخص نکرده باشید حالت small همه ی صفحات رو پوشش میده و توی همه ی صفحات مقدار افست اعمال میشه
  • اگه مقدار medium رو ذکر کرده باشید اما مقدار small و large رو ذکر نکرده باشید , افست برای صفحات medium و large اعمال میشه و در حالت small افست صفر خواهد بود(افست نخواهیم داشت).
  • اگه مقدار large رو ذکر کرده باشید اما مقدار small و medium رو ذکر نکرده باشید , افست برای صفحات large فقط اعمال میشه و در حالت medium و small افست برابر با صفر خواهد بود
  • اگه مقدار small و large رو ذکر کرده باشید اما مقدار medium رو ذکر نکرده باشید , افست برای صفحات large و small اعمال میشه و همچنین برای حالت medium از افست حالت small استفاده خواهد شد.

امیدوارم بتونید با استفاده از فریمورک foudantion صفحات خفن درست کنید و به کارهای شما سرعت ببخشه! دوستانی که سوال دارند میتونن از انتهای همین پست مطرح کنند تا پاسخ بدم.

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟