آموزش جامع فریم ورک فاندیشن [Foundation]

آموزش فریم‌ورک Foundation-بخش1-معرفی و مقدمه

بخش اول (معرفی و مقدمه و دانلود فریم ورک فاندیشن)

معرفی فریم‌ورک فاندیشن Foundation و نحوه دانلود آن

مقدمه فریم ورک فاندیشن:

طراحی رابط کاربری یا User Interface (UI) یکی از مواردی است که در هنگام تولید و توسعه یک وب سایت و یا اپلیکیشن و یا نرم افزار، می تواند چالش انگیز باشد. اگر بخواهید برای هر پروژه از ابتدا رابط کاربری را طراحی کنید، مسلما وقت گیر می باشد. طراحان حرفه ای رابط کاربری (UI کارها) ممکن است به این نتیجه برسند که خودشان یک چارچوب (Framework) برای رابط کاربری پروژه های خود طراحی کنند. اما در نظر داشتن تمام نکات ریز، آپدیت کردن مداوم فریم ورک، نگهداری و توسعه (Maintenance and Development) آن می تواند بسیار مشکل باشد.

نیاز و خواسته اکثر برنامه نویسان (programmer) و توسعه دهندگان (developers) اینست که رابط کاربری که برای محصولشان مورد استفاده قرار می دهند، کدباز (Open Source)، منعطف (Flexible) و از همه مهمتر دارای داکیومنت خوبی (Well-Documented) باشد. بسیار خب. با این تفاسیر، اگر یک فریم ورکی با این مشخصات وجود داشته باشد و رایگان نیز باشد! برای برنامه نویسان و طراحان قالب، می تواند گزینه خوبی می تواند باشد. در این مقاله می خواهیم فریم ورک فاندیشن (Foundation) را معرفی کنیم.

فریم ورک فاندیشن (Foundation Framework) چیست؟

فریم ورک فاندیشن از ابزار و امکانات زیادی برای طراحی ریسپانسیو و قابل مشاهده در موبایل (Mobile First) بهره می برد. این فریم ورک توسط HTML و CSS و JQUERY طراحی شده است و از مدرن ترین تکنولوژی های طراحی در آن استفاده شده است. فریم ورک FOUNDATION در تمام مرورگرها بدرستی کار می کند. تنها مرورگری که با FOUNDATION مشکل دارد (یا به بیان صحیح تر ، FOUNDATION با آنها مشکل دارد!) نسخه های 8 به قبل مرورگر اینترنت اکسپلورر (IE) می باشد. به جدول زیر دقت کنید:

ویژگی‌های اختصاصی فریم‌ورک فاندیشن:

شرکت سازنده این فریم ورک ، ZURB ، در طراحی و ساخت این فریم ورک، از مجموعه ابزارهای مختلفی برای برنامه نویسان (DEVELOPERS) و طراحان (DESIGNERS) استفاده کرده است. شما می توانید با توجه به نیاز خود، از تمام و یا بخشی از این ابزارها استفاده کنید و یا یک امکان جدید به فریم ورک فاندیشن نسخه قدیمی خود اضافه کنید و یا حتی امکان این وجود دارد که بخشی از این ابزارها را به عنوان یک ویژگی جدید (FEATURE) به یک فریم ورک دیگر اضافه کنید.

پس بطور کلی، فریم ورک فاندیشن (FOUNDATION) یک فریم ورک مدرن و قدرتمند می باشد که برای طیف وسیعی از کاربران طراحی شده است. ویژگی های خوبی پیشنهاد می دهد، رایگان است و دارای یک جامعه بزرگ آماری می باشد که در صورت بروز مشکل برای شما، می توانند به شما برای رفع آن مشکل کمک کنند.

مرجع اصلی این فریم ورک وب سایت Foundation.zurb.com می باشد. آخرین نسخه قابل دانلود این فریم ورک نسخه 6 می باشد.

دانلود آخرین نسخه فریم ورک Foundation

برندهای معتبری که از فاندیشن Foundation استفاده کرده‌اند:

 وب سایت Zurb اداعا می‌کند که برندهای معروف زیر از فریم ورک فاندیشن (Foundation Framework) استفاده کرده اند:

HTC و HP و Ford و Mini-Cooper و Subaru و Samsung و …

بعنوان مثال با مراجعه به وب سایت Subaru تصویر زیر را خواهیم داشت:

همانطور که مشاهده می کنید، فریم ورکی که برای طراحی قالب این وب سایت استفاده شده است، فریم ورک Foundation می باشد.

وب سایت مینی‌کوپر (Mini-Cooper) نیز از فریم فاندیشن برای طراحی رابط کاربری خود بهره برده است:

چرا باید از فریم ورک FOUNDATION استفاده کرد؟

این روزها ، استفاده از فریم ورک ها در بین طراحان و برنامه نویسان رونق فراوانی پیدا کرده است. فریم ورک FOUNDATION عملکردها و ویِژگی های متعددی دارد و از سیستم گریدبندی (Grid) بصورت درصدی (Percentage-Based) بهره می برد. دارای اسلایدر جی کوئری می باشد و پلاگین لایت باکس (Light Box) دارد. المنت های HTML زیادی دارد که بصورت کاربرپسندی استایل دهی شدند که بصورت پیش فرض ، ریسپانسیو می باشند. توسط فریم ورک فاندیشن، می توانید فرم های سفارشی بسازید که المان های فرم مانند چک باکس و تسکت باکس را می توانید براحتی استایل دهی کنید. این فریم ورک همچنین دارای سیستم گریدبندی سفارشی در حالت موبایل می باشد که طراح یا برنامه نویس، بتواند براحتی طراحی محصول خود را در اندازه های موبایل و دسکتاپ (Desktop) شخصی سازی کند. به تصویر زیر نگاه کنید:

فریم ورک foundation در نسخه های 4 به بعد، تغییرات و اصلاحاتی در کدهای خود اعمال کرده است که باعث بهبود عملکرد این فریم ورک برای کاربران مختلف شده است. در هر جا که نیاز به توضیح است، کامنت گذاشته است و حذف و اضافه کردن توابع در این فریم ورک راحت و سرراست می باشد.

دانلود فریم ورک فاندیشن (Download Foundation Framework):

با مراجعه به لینک دانلود فریم ورک foundation ، تصویر فوق را مشاهده خواهید کرد. برای مشاهده صفحه فوق، روش دیگر اینست که به صفحه اصلی وب سایت فریم ورک فاندیشن مراجعه کرده و در تصویر زیر روی دکمه Download کلیک کنید تا وارد صفحه اصلی دانلود آن شوید:

دارای 4 نسخه است که می توانید در بخش اول (دکمه آبی رنگ) کل فریم ورک را بصورت کامل دانلود کنید. در بخش دوم، نسخه سبک تر آنرا خواهید داشت که تنها موارد ضروری و موردنیاز را در خود دارد. در بخش سوم، می توانید بصورت سفارشی، این فریم ورک را دانلود کنید و در بخش آخر نیز آنرا بصورت SCSS خواهید داشت.

سفارشی‌سازی فریم‌ورک foundation:

اگر بخواهید امکانات و ویژگی هایی از این فریم ورک را متناسب با نیاز خود، حذف و یا اضافه کنید، مطابق تصویر زیر، می توانید موارد لازم را تیک بزنید. بعنوان مثال، اگر تنها سیستم گریدبندی CSS را بخواهید، فقط تیک Grid را فعال کنید و بقیه موارد را از حالت تیک خارج کنید.

حتی امکان اعمال رنگ موردنظرتان برای بدنه (body) و یا متون قالب وب سایت وجود دارد. همچنین امکان تعیین رنگ های اصلی (primary) و ثانویه (secondary) کل وب سایت و باکس های پیام خطا، موفقیت و… وجود دارد. برای وب سایت های فارسی می توان گزینه Text-Direction را از Left-to-Right به Right-to-Left تغییر دهید. اگر می خواهید باکس های موجود در کل وب سایت (مانند دکمه، div، card و …) دارای Border-Radius باشد، می توانید بصورت کلی (Global) و با واحد پیکسل (px) آنرا تعیین کنید. امکان دیگر اینست که می توانید width و max-width تعریف شده در نقاط شکست (break-points) را نیز تغییر دهید. تعداد ستون های دلخواه (Custom Grid) خود را نیز می توانید تعریف کنید.

دانلود نسخه سفارشی‌شده فریم‌ورک فاندیشن:

در نهایت، پس از اینکه ویژگی ها و امکانات دلخواه و موردنیاز خود را انتخاب کردید، مطابق تصویر زیر، روی دکمه Download Custom Build کلیک کنید تا فریم ورک Foundation سفارشی شده شما را دانلود کنید:

در صورتی که در این فرآیند دچار مشکل شدید و سوالی برایتان پیش آمد می توانید به بخش مستندات (Documents) وب سایت Foundation مراجعه کنید.

در بخش دوم از آموزش فریم ورک فاندیشن، در مورد گریدبندی (Grid System) فریم ورک فاندیشن و المان های تب، دکمه، منو و برخی دیگر از المان های کلیدی UI (رابط کاربری) صحبت خواهیم کرد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مثال دوم: طراحی ستون های 8 و 4 تایی:

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

<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 را تعریف کرده ایم که همانطور که از اعداد 4 و 8 مشخص است، هر ستون به اندازه 4 و 8 واحد در اندازه small را برای خود در نظر می گیرد.  مجموع این تعداد ستونها همان 12 ستون خواهد شد (4+8=12) . small-4 حدودا 33.3% و small-8 عرضی حدود 66.6% را به خود اختصاص می دهد.

استفاده از سیستم گرید بصورت تو در تو (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>

همانطور که در مثال فوق می بینید، ستون 4 تایی را به سه بخش 1 و 9 و 2 تایی تقسیم کرده ایم. به این صورت می توانید به تعداد نامحدود، ستون در یک سطر داشته باشید.

گرید بزرگ (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 یعنی 33.3% اندازه large-3 یعنی 25% صفحه را به خود اختصاص دهد. و همینطور، بخش محتوا یعنی ستون دوم نیز در دسکتاپ، بجای 8 ستون، 9 ستون را شامل شود و فضای نمایش متن بیشتری داشته باشد.

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

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

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

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

<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 به تعداد 9 ستون به راست یا چپ (بستگی به direction صفحه دارد) شیفت دادیم و ستون small-9 را توسط کلاس pull-3 به تعداد 3 ستون به چپ یا راست منتقل کردیم. بنابراین توانستیم این دو ستون را با هم جابجا کنیم. یکی از کاربردهای اینکار این است که بعنوان مثال می توانید سایدبار را در اسکرین های large قرار دهید و در اسکرین های کوچک مانند موبایل، بدلیل اهمیت محتوای هر صفحه نسبت به سایدبار، به پایین بخش اصلی یا محتوا منتقل کنید.

گرید بلاک (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 هایی که می توانند پشت سرهم بیایند، تصاویری نمایش می دهیم. بنابراین، در خروجی روی اسکرین های بزرگ مانند دسکتاپ، هر سطر دارای 4 ستون (large-block-grid-4) خواهد بود و در موبایل، هر سطر دارای دو ستون (small-block-grid-2) می باشد.

ضمیمه بخش دوم

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

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

در این پلاگین، المان هایی مانند تصویر (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) صحبت خواهیم کرد.

آموزش فریم‌ورک Foundation-بخش3-منو Navigation

بخش سوم – منو (Navigation)

منو در فریم ورک فاندیشن (Navigation in Foundation Framework):

در بخش قبل با گریدبندی (Griding System) در فاندیشن آشنا شدیم. در این بخش به معرفی انواع منو navigation در این فریم ورک خواهیم پرداخت.

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

پلاگین Section (The Section Plugin):

توسط پلاگین section میتوانید المان هایی مانند منو و تب را بصورت هم افقی و هم عمودی پیاده سازی کنید:

کد زیر را در نظر بگیرید:

<div class="section-container auto" data-section>

  <section>

    <p class="title" data-section-title><a href="#">Section 1</a></p>

    <div class="content" data-section-content>

      <p>Content of section 1.</p>

    </div>

  </section>

  <section>

    <p class="title" data-section-title><a href="#">Section 2</a></p>

    <div class="content" data-section-content>

      <p>Content of section 2.</p>

    </div>

  </section>

</div>

کد فوق ممکن است نسبت به کدهایی که تاکنون دیده ایم پیچیده تر باشد و نیاز به توضیح بیشتر داشته باشد. پس آنرا به بخش های کوچکتر تقسیم می کنیم:

اتریبیوت data-section:

هر المانی را که پیاده سازی می کنید، فارغ از اینکه منو یا تب یا آکاردئون باشد، در div اول، کلاس section-container بهمراه auto باید تعریف شود. در همین div باید یک اتریبیوت (attribute) بنام data-section تعریف کنید. بدون هیچ مقداری. این اتریبیوت بیانگر نوع المانی است که میخواهیم پیاده سازی کنیم. بطور پیش فرض، فاندیشن در صورتی که چیزی ننویسیم، آکاردئون را می سازد. برای تولید یک المان خاص مانند تب، منو و … باید بجای کلمه auto، یکی از عبارات tabs، accordion، vertical-nav و horizontal-nav را تعریف کنیم.

ایجاد section برای محتوا:

وقتی div های لازم را تعریف کردید، نوبت آنست که محتوای موردنظرتان را قرار دهید. یک عنوان نیاز است و یک لینک:

<section>

    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>

    <div class="content" data-section-content>

      <p>Content of section 1.</p>

    </div>

</section>

مشاهده می شود که هر section با یک تگ section دربرگرفته شده است. برای راحتی و خوانایی بیشتر section تعریف شود بهتر است اما می توانید بجای section از تگ div نیز استفاده کنید. بلافاصله پس از تگ section تگ p داریم که دارای کلاس title می باشد که داخل آن یک تگ a یعنی لینک تعریف می شود. سپس یک تگ div با کلاس content برای ایجاد بخش محتوای هر section تعریف می شود.

نکته: در صورت استفاده از vertical-nav ، در اندازه اسکرین موبایل این المان به آکاردئون تبدیل می شود.

لینک‌دهی عمقی (Deep Linking):

فرض کنید می خواهید به تب سوم یک المان تب لینک دهید. یعنی با کلیک روی یک لینک خاص در صفحه A، تب سوم از صفحه B باز شود. بصورت پیش فرض، همواره تب اول فعال (ACTIVE) است. فریم ورک فاندیشن برای این مشکل، راه حلی دارد. ابتدا باید در div اول، اتریبیوت زیر را تعریف کنیم:

data-options=”deep_linking: true”

سپس با آدرسی مانند www.Mohtavaban.com/B/#Section3 تب سوم (Section3) از صفحه B بصورت پیش فرض فعال می شود و تصویری مشابه زیر خواهید دید:

کد زیر را نگاه کنید:

<div class="section-container auto" data-section data-options="deep_linking: true">

  <section>

    <p class="title" data-section-title><a href="#section1">Section 1</a></p>

    <div class="content" data-slug="section1" data-section-content>

      <p>Content of section 1.</p>

    </div>

  </section>

  <section>

    <p class="title" data-section-title><a href="#section2">Section 2</a></p>

    <div class="content" data-slug="section2" data-section-content>

      <p>Content of section 2.</p>

    </div>

  </section>

</div>

علاوه بر تعریف اتریبیوت data-options برای div اول (یعنی section-container) باید یک اتریبیوت بنام data-slug برای div محتوا (یعنی content) تعریف کنید تا عملیات Deep Linking تکمیل شود.

منوی کناری (Side Nav):

المان Side Nav از فریم ورک فاندیشن، روشی ساده است برای پیاده سازی منوی عمودی. کد html آن بسیار ساده می باشد و اجازه استفاده از جداکننده (divider) را نیز بین منوها می دهد. کد زیر را در نظر بگیرید:

<ul class="side-nav">

  <li class="active"><a href="#">Link 1</a></li>

  <li><a href="#">Link 2</a></li>

  <li class="divider"></li>

  <li><a href="#">Link 3</a></li>

  <li><a href="#">Link 4</a></li>

</ul>

مشاهده می کنید که منوی کناری (Side Nav) مانند تمام منوهای دیگر یک ul (Unordered List) می باشد که با تعریف کلاس side-nav به آن، می توانید یک منوی عمودی مانند تصاویر زیر داشته باشید:

برای مشخص کردن منوی فعال از کلاس active استفاده کنید و برای تعریف جداکننده، از divider استفاده کنید.

Sub Nav در فریم ورک فاندیشن:

المان Sub Nav بیشتر برای مواردی مانند فیلتر کردن مطالب (Filtering Content) بکار می رود. کد آن شبیه المان Side Nav می باشد. تفاوت اصلی این دو المان اینست که Sub Nav از description list بجای unordered list استفاده می کند. چیزی بنام divider در این المان وجود ندارد. اما هنوز می توانید لینک فعال را با تعریف کلاس active مشخص نمائید. کد زیر را مشاهده کنید:

<dl class="sub-nav">

  <dt>Filter:</dt>

  <dd class="active"><a href="#">All</a></dd>

  <dd><a href="#">Photos</a></dd>

  <dd><a href="#">Videos</a></dd>

  <dd><a href="#">Music</a></dd>

</dl>

تصویر زیر هم مربوط به المان Sub Nav می باشد:

صفحه بندی (Pagination):

Pagination نیز یک مدل از منو می باشد. بیایید نگاهی به کد یک Pagination بیاندازیم:

<ul class="pagination">

  <li class="arrow unavailable"><a href="">&laquo;</a></li>

  <li class="current"><a href="">1</a></li>

  <li><a href="">2</a></li>

  <li><a href="">3</a></li>

  <li><a href="">4</a></li>

  <li class="unavailable"><a href="">&hellip;</a></li>

  <li><a href="">12</a></li>

  <li><a href="">13</a></li>

  <li class="arrow"><a href="">&raquo;</a></li>

</ul>

یونیکد فلش‌های چپ و راست:

همانطور که مشاهده می کنید، دو li اول و آخر، شامل فلش های چپ و راست (arrow-left و arrow-right) می باشد. می توانید در داخل آنها از یونیکد هایی مانند &lsaquo; و &laquo; و یا حتی &larr; استفاده کنید. برای مشاهده لیست کامل یونیکدهای قابل استفاده، به وب سایت Unicode-table مراجعه کنید. تصویر زیر یک المان صفحه بندی را نشان می دهد:

در المان Pagination، بجای کلاس active کلاس current داریم. کلاس جدیدی که در این المان وجود دارد، unavailable می باشد. بدلیل کد ساده ای که دارد، می توان از آن در سیستم های مدیریت محتوا مانند وردپرس نیز استفاده کنید.

نکات صفحه‌بندی در المان pagination:

نکته1:  برای وسط چین کردن المان صفحه گذاری، می توان از کلاس pagination-centered استفاده کرد. مانند سایر المان های فریم ورک foundation، این المان نیز واکنش گرا می باشد و براحتی می توان به آن استایل داد.

نکته2:  فریم ورک فاندیشن (Foundation) مانند اکثر فریم ورک های معتبر و معروف، واکنش گرا (responsive) می باشد. اما با اینحال، بهتر است هر چند وقت یکبار، وب سایت خود را در ابزار تست واکنش گرایی گوگل تست کنید.

در بخش چهارم از سری آموزشی فریم ورک فاندیشن foundation، با نوار بالا (top bar) در این فریم ورک قدرتمند آشنا می شویم.

آموزش فریم‌ورک Foundation-بخش4-نوار بالا Top bar

بخش چهارم – نوار بالا (Top Bar)

نوار بالا در فریم ورک فاندیشن (Top Bar in Foundation)

در بخش قبل یک المان مهم و کاربردی می باشد. این بدین معنی نمی باشد که استفاده از آن در طراحی یک وب سایت الزامی باشد. تقریبا در نیمی از قالب هایی که توسط فاندیشن پیاده سازی می شوند وجود دارند. باید با توجه به پروژه و نوع وب سایتی که می خواهید طراحی کنید، چک کنید ببینید که آیا نیاز است از المان نوار بالا (Top Bar) در آن استفاده کنید یا خیر. سفارشی سازی استایل های آن، مانند سایر المان ها کار راحتی می باشد اما تنظیماتی نیز دارد.

ساختار ضروری (The Essential Structure):

ساختار این المان به این صورت است که باید با تگ nav شروع شود و کلاس top-bar برای آن تعریف کنیم.

درون تگ nav، یک ul تعریف می شود که کلاس title-area دارد. درون این ul دو تا li تعریف می شوند که برای حالت موبایل منو می باشد. اولین li عنوان وب سایت می باشد و در دومی، دکمه بازشوی منو (Menu-Icon) قرار می گیرد. کد منو را بصورت زیر خواهیم داشت:

<nav class="top-bar">

    <ul class="title-area">

        <li class="name">

             <h1><a href="#">Top Bar Title </a></h1>

        </li>

        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>

        </li>

    </ul>

</nav>

افزودن لینک های والد (Adding Parent Links):

افزودن لینک های والد، مرحله بعدی از طراحی منو می باشد. قبل از بسته شدن تگ nav یک section با کلاس top-bar-section تعریف کنید که شامل یک ul و چند li می باشد.

کلاس جداکننده ای که قبلا در مقالات قبل داشتیم، در المان منوی افقی نیز داریم. بعد از هر آیتم از منو (li) می توانید از این کلاس برای جداسازی آیتم های منو استفاده کنید.

کد منو بصورت زیر خواهد شد:

<section class="top-bar-section">

    <ul class="left">

        <li class="divider"></li>

        <li class="active"><a href="#">Main Item 1</a></li>

        <li class="divider"></li>

        <li><a href="#">Main Item 2</a></li>

        <li class="divider"></li>

    </ul>

</section>

کلاس جدیدی که در کدهای فوق مشاهده می کنید کلاس left می باشد که برای ul تعریف شده است. اگر آنرا به right تغییر دهیم، آیتم های منو به سمت راست خواهند رفت (این کلاس برای طراحی راست-به-چپ برای قالب فارسی کاربرد خواهد داشت)

آیتم هایی که تاکنون در منو تعریف کردیم، بصورت افقی نمایش داده می شوند و در اسکرین های کوچک مانند موبایل، بصورت بازشو (dropdown) خواهند بود.

افزودن زیرمنو (Adding Submenu):

در زیرمجموعه هر یک از آیتم های فوق می توان آیتم های دیگری تعریف کرد که بصورت تو در تو (Nested) باشند. نکته ای که باید در این موارد رعایت شود، تعریف کلاس has-dropdown برای آیتم والد می باشد و برای ul داخلی باید کلاس dropdown تعریف شود. به کد زیر نگاه کنید:

<li class="has-dropdown"><a href="#">Main Item 3</a>

    <ul class="dropdown">

        <li><label>Dropdown Level 3 Label</label></li>

        <li><a href="#">Dropdown Level 3a</a></li>

        <li><a href="#">Dropdown Level 3b</a></li>

        <li class="divider"></li>

        <li><a href="#">Dropdown Level 3c</a></li>

    </ul>

</li>

<li class="divider"></li>

برای مشخص بودن منوی فعال، مانند قبل، می توانید از کلاس active استفاده کنید. زیرمنوها (Submenus) در اندازه اسکرین های دسکتاپ، بصورت استاندارد (تصویر فوق) نمایش می یابند اما در موبایل به صورت زیر در می آیند:

تنظیمات اضافی (Additional Settings):

برخلاف نام نوار بالا (Top Bar)، شما می توانید در هر جای قالب خود که مایل باشید از آن استفاده کنید. توسط کلاس fixed می توانید آنرا به بالای صفحه بچسبانید. ضمنا اگر می خواهید طول آن بصورت تمام صفحه نباشد (full-width) با افزودن کلاس contain-to-grid به آن، آنرا به اندازه گرید خود محدود کنید. خوشبختانه شما می توانید در آن واحد از هر دو کلاس fixed و contain-to-grid استفاده نمائید.

فرض کنید سناریو به این صورت است: شما می خواهید منوی افقی، بصورت وسط چین و در container محدود باشد و همچنین بعد از اسکرول کاربر به پایین، منو به بالای صفحه بچسبد. کد آن بصورت زیر خواهد شد:

<div class="contain-to-grid sticky">

    <nav class="top-bar">

        <!--nav content-->

    </nav>

</div>

افزودن باکس جستجو (Adding Search Input):

علاوه بر امکانات و تنظیمات فوق، ممکن است شما یک باکس جستجو در بخش منوی افقی وب سایت خود بخواهید و یا بخش ثبت نام در خبرنامه و یا… برای تعریف یک Search Input در منو، باید به li مربوطه، کلاس has-form را اعمال کنیم. کد زیر را در این زمینه در نظر بگیرید:

<li class="has-form">

    <form>

        <div class="row collapse">

            <div class="small-8 columns">

                <input type="text">

            </div>

            <div class="small-4 columns">

                <a href="#" class="alert button">Search</a>

            </div>

        </div>

    </form>

</li>

همانطور که ملاحظه می کنید، می توانید برای مرتب شدن فرم جستجو، از گریدبندی فریم ورک فاندیشن استفاده کرد. در این مثال، تعداد 8 ستون برای تکست باکس جستجو و 4 ستون برای دکمه Search در نظر گرفته شده است.

نوار راهبری (Breadcrumbs):

نوار راهبری در سیستم های مدیریت محتوا مانند وردپرس که تعداد صفحات و محتوای زیادی دارند مرسوم می باشد و استفاده از آن باعث می شود که کمی از پیچیدگی سلسله مراتب صفحات کاسته شود و کاربر متوجه شود در کدام صفحه حضور دارد. برای پیاده سازی این المان در فریم ورک Foundation براحتی می توانید با افزودن کلاس breadcrumbs به ul و یا nav به این منظور برسید. مشخص است که در صورت استفاده از ul، آیتم ها باید در li تعریف شوند که هر کدام دارای anchor tag می باشند. اگر از nav استفاده می شود، کافیست همان تگ های لینک تعریف شوند. به کد زیر دقت کنید:

<ul class="breadcrumbs">

    <li><a href="#">Home</a></li>

    <li><a href="#">Features</a></li>

    <li class="unavailable"><a href="#">Gene Splicing</a></li>

    <li class="current"><a href="#">Cloning</a></li>

</ul>

در بخش پنجم از سری آموزشی فریم ورک Foundation ، نحوه سفارشی‌سازی منوی بالا (top bar) را آموزش می دهیم.

آموزش فریم‌ورک Foundation-بخش5-سفارشی‌سازی منو

بخش پنجم: سفارشی سازی منوی بالا (Top Bar Customization)

سفارشی‌سازی منوی بالا در فریم‌ورک فاندیشن

در بخش قبل، نحوه پیاده‌سازی نوار بالا (TOP BAR) آموزش داده شد. در این بخش می خواهیم چگونگی سفارشی سازی این المان مهم را آموزش دهیم.

فریم ورک فاندیشن، امکانات و ویژگی های خوبی برای بخش منوی بالا (Top Bar) در نظر گرفته است و شاخصه مهم رابط کاربری وب سایت هایی است که با این فریم ورک طراحی شده اند. در این سری مقالات، قصد داریم روش سفارشی سازی متفاوتی را برای این المان مطرح کنیم و بتوانید آن در هرجای صفحه وب که در نظر دارید، قرار دهید.

شروع سفارشی سازی منوی بالا (Getting started):

اول از همه، ما نیاز به آخرین نسخه فریم ورک foundation داریم. پس با مراجعه به مقاله ای که درباره نحوه دانلود فرم ورک فاندیشن بود، و یا مراجعه به بخش دانلود وب سایت فریم ورک فاندیشن، آنرا طبق نیازهای خود دانلود کرده و فایل زیپ (zip) دریافتی را از حالت زیپ خارج کنید (unzip یا extract). ما در این بخش فقط با فایل index.html سروکار داریم. می خواهیم استایل های دلخواه و موردنیاز خود را در style.css تعریف کنیم تا روی استایل های پیش فرض تعریف شده برای نوار بالا (Top Bar) بنشیند و بقول معروف کلاس ما روی کلاس های قبلی، override شود.

لطفا تصویر پس زمینه (background) منوی افقی سفارشی را دانلود کرده و در فولدری بنام img قرار دهید. (اگر فولدر img وجود ندارد، آنرا ایجاد کنید)

تنظیمات ساختار کدهای HTML:

قدم اول: نشانه گذاری کلی (General Markup):

فایل index.html شامل یک سری کدهای HTML می باشد. اسکریپت ها و استایل های موجود در تگ هدر head tag را بدون هیچ تغییری به حال خود رها کنید. فقط باید مطمئن شویم که کدهای top bar بدرستی کار می کنند.

شما می توانید بقیه کدهای واقع در تگ body را پاک کنید تا کدهای مربوط به نوار بالا را در آنجا تعریف کنیم. طراحی موردنظر ما بصورت تمام صفحه (full width) و ساده می باشد و پیچیده نیست.

ما در این قالب به 4 بخش اصلی هدر (header)، منو (navigation)، محتوا (content) و فوتر (footer) نیاز داریم و هر بخش را با متون تستی پر می کنیم. به هر بخش (area) یک کلاس full-width اختصاص می دهیم. در داخل هر یک از این area ها یک div با کلاس row تعریف می کنیم. سپس در این row یک div دیگر با کلاس های large-12 و columns باید تعریف کنیم تا سیستم گرید (Grid system) فریم ورک فاندیشن را بطور کامل اجرا کرده باشیم.

کدهای html زیر را در نظر بگیرید:

<!-- HEADER AREA -->

<header class="full-width header-area">

    <div class="row">

        <div class="large-12 columns">

            <h2>Foundation-4 Custom Top Bar</h2>

        </div>

    </div>

</header>

<!-- NAVIGATION AREA -->

<div class="full-width navigation-area">

    <div class="row">

        <div class="large-12 columns">

            <nav class="top-bar"></nav>

        </div>

    </div>

</div>

<!-- CONTENT AREA -->

<div class="full-width content-area">

    <div class="row">

        <div class="large-12 columns">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumque facere explicabo esse quaerat veritatis laboriosam eius modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor nam reiciendis unde aliquam numquam necessitatibus odio et perspiciatis facere nihil inventore ullam aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum aut optio repudiandae at! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, nobis suscipit molestias voluptas veritatis aspernatur accusamus excepturi rem quaerat impedit animi voluptate at facilis aliquid cum fugit labore omnis provident recusandae autem. Doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deleniti quasi!</p>

        </div>

    </div>

</div>

<!-- FOOTER AREA -->

<div class="full-width footer-area">

    <div class="row">

        <div class="large-12 columns">

            &copy; 2013

        </div>

    </div>

</div>

قدم دوم: نشانه‌گذاری نوار بالا (Top bar markup):

پیش از اینکه وارد مبحث استایل‌دهی و css منوی بالا شویم، باید ساختار html آن را تعریف کنیم تا منو بتواند بدرستی کار کند. برای پیاده سازی منوی فریم ورک فاندیشن، به 5 المان اصلی نیازمندیم:

• nav with class=”top-bar”
• ul with class=”title-area”
• li with class=”toggle-topbar” = to expand the menu in mobile layout
• section with class=”top-bar-section”
• ul with class=”left” and ul with class=”right”

اکنون نوبت آنست که این 5 المان اساسی منو را پیاده‌سازی کنیم:

نکته: در این مقاله آموزشی، ما می خواهیم نحوه طراحی و پیاده سازی یک منوی سفارشی (custom navigation menu) را آموزش دهیم. یکی از مواردی که می خواهیم سفارشی سازی کنیم، بخش مربوط به لوگو در منو می باشد. در این مثال قصد داریم لوگو (متن یا عکس) را از منو حذف کنیم. بدین منظور، باید داخل المان li با کلاس name چیزی ننویسیم و آنرا خالی رها کنیم. این li در ul با کلاس title-area قرار دارد.

اکنون بیایید چند آیتم و زیرمنو به منوی خود اضافه کنیم. برای تعریف یک li که زیرمنو دارد، کافیست کلاس has-dropdown را برای آن تعریف کنیم. سپس در این li یک ul با کلاس dropdown تعریف می کنیم. برای مشخص کردن آیتم فعال و جاری باید class=”active” را برای آن li تعریف کنیم. در این مثال، ul با کلاس right را خالی رها می کنیم. بطور معمول از این قسمت برای نمایش باکس جستجو در منوی اصلی استفاده می شود.

کد زیر را در این زمینه مشاهده نمائید:

<!-- Nav Wrap -->

<nav class="top-bar">

    <ul class="title-area">

        <!-- Title Area -->

        <li class="name"></li>

        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->

        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>

    </ul>

    <!-- The Section wrap -->

    <section class="top-bar-section">

        <!-- Left Nav Section -->

        <ul class="left">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#">About us</a></li>

            <li><a href="#">Our products</a></li>

            <li><a href="#">Portfolio</a></li>

            <li><a href="#">Blog</a></li>

            <li><a href="#">Prices</a></li>

            <li class="has-dropdown">

                <a href="#">Features</a>

                <ul class="dropdown">

                    <li><a href="#">Modalboxes</a></li>

                    <li><a href="#">Submenu's and navigation</a></li>

                    <li><a href="#">Price tables</a></li>

                    <li><a href="#">Buttons</a></li>

                    <li><a href="#">Button groups</a></li>

                    <li><a href="#">Labels, Keystrokes and Tooltips</a></li>

                    <li><a href="#">Alert boxes</a></li>

                    <li><a href="#">Columns</a></li>

                </ul>

            </li>

            <li><a href="#">Contact</a></li>

        </ul>

        <!-- Right Nav Section -->

        <ul class="right"></ul>

    </section>

</nav>

قدم سوم: مشاهده نتیجه:

اکنون وقت آنست که منوی ایجاد شده را در مرورگر سیستم خود مشاهده نمائید. تا بدین جا توانسته‌ایم یک منوی افقی (horizontal navigation) را با ساختار اولیه و ساده پیاده سازی کنیم. در صورتی که می خواهید منوی بالا را در جای دیگری غیر از بالای مرورگرتان نمایش دهید، فقط کافیست المان nav با کلاس top-bar را در یک div با کلاس row و div با کلاس columns تعریف کنید.

وقتی اندازه صفحه مرورگرتان را کوچک می کنید، نحوه نمایش منو در نقاط شکست پیش فرض (break point) تغییر خواهد کرد.

قدم بعدی استایل دهی به منوی بالا می باشد. در بخش بعدی، با نحوه تعریف استایل های لازم برای این المان آشنا می شویم.

انجام تنظیمات CSS منو:

قدم اول: استایل‌دهی کلی (General Styling):

اگر تاکنون فایل css مجزایی نساخته اید، یک فایل بنام style.css ایجاد کرده و آنرا در فولدر css فریم ورک فاندیشن قرار دهید. فراموش نکنید آنرا در تگ head صفحات وب سایت خود تعریف (include) کنید. مانند کدهای زیر، آنرا در زیر تعریف foundation.css قرار دهید:

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width">

    <title>Foundation 4</title>

    <link rel="stylesheet" href="css/foundation.css">

    <link rel="stylesheet" href="css/style.css">

    <script src="js/vendor/custom.modernizr.js"></script>

</head>

اگر فایل style.css خود را در پایین Foundation.css تعریف نکنید، استایل های تعریف شده توسط شما بر روی استایل های پیش فرض فاندیشن override نخواهد شد.

بسیار خب، اکنون اگر موافق باشید یک سری استایل به 4 بخش هدر، منو، محتوا و فوتر بدهیم. برای منوی اصلی سایت از یک تصویر بک گراند استفاده می کنیم که قبلا این عکس را دانلود کرده ایم. برای هر بخش کلاس full-width را تعریف کرده ایم تا مطمئن شویم تمام بخش ها و المان های وب سایت مان بصورت تمام صفحه در تمام مرورگرها نمایش می یابد.

استایل های زیر را در نظر بگیرید:

body {

    background-color: #ccc;

}

/** Set the backgrounds for the different sections **/

.header-area {

    background-color: #2d465c;

    min-height: 160px;

}

.navigation-area {

    background-image: url('../img/navigation-container.jpg');

    background-repeat: repeat-x;

}

.content-area {

    padding: 50px 0 70px 0;

}

.footer-area {

    background-color: #1f1f1f;

    color: #fff;

    min-height: 50px;

    padding: 20px 0 0 0;

}

.full-width {

    min-width:100%;

    position: relative;

}

h2 {

    color: #fff;

    font-weight: normal;

    margin-top: 50px;

}

قدم دوم: استایل‌های منوی بالا (Top bar styles):

اگر الان منو را در مرورگر مشاهده کنید، کمی بهم ریخته می باشد. به این دلیل می باشد که منو هنوز استایل های پیش فرض foundation را لود می کند. تعدادی کلاس وجود دارد که باید برای استایل‌دادن به منوی اصلی override شوند و مجددا تعریف گردند. ابتدا رنگ بک گراند پیش فرض منو (.top-bar) را تغییر می دهیم. سپس Height و line-height منو (.top-bar) را به 58px آپدیت می کنیم. در استایل های زیر، کامنت ها را برای اطلاعات بیشتر بخوانید:

/** Changes background color, height and margin of the border **/

.top-bar {

    background: none;

    height: 58px;

    line-height: 58px;

    margin-bottom: 0;

}

/** Removes black background on menu bar **/

.top-bar-section ul {

    background: none;

    text-transform: uppercase;

}

/** Removes black background on menu item **/

.top-bar-section li a:not(.button) {

    background: none;

    line-height: 58px;

    padding: 0 27px;

}

رنگ پس زمینه مشکی پیش فرض را حذف کردیم (توسط background:none) ارتفاع و ارتفاع بین خطوط (height and line-height) مربوط به top-bar را به 58 پیکسل تغییر دادیم و بک گراند ul را نیز حذف کردیم و حروف آن را به بزرگ تغییر دادیم (uppercase). اکنون اگر مرورگر خود را رفرش کنید، تغییرات اعمال شده اند.

در مرحله بعد می خواهیم آیتم های دارای زیرمنو (dropdown) را استایل دهی کنیم. آیتم های منو (menu item) آیتم فعال (active item) و وضعیت hover منو. استایل های زیر را در این زمینه در نظر بگیرید. لطفا به کامنت های مربوط به هر کلاس دقت کنید:

/** Changes the active menu item from default black to a gradient **/

.top-bar-section ul li.active > a {

    background:  rgb(0, 0, 0);

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;

    color: #fff;

}

/** Changes the hover state of non active menu items **/

.top-bar-section li:hover a {

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;

    color: #fff;

}

/** Changes non active menu items text color to black **/

.top-bar-section ul li > a {

    color: #2d2d2d;

}

/** Changes the hover state of dropdown menu items **/

.top-bar-section ul.dropdown li a:hover:not(.button) {

    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);

}

/** IMPORTANT fill for the ul dropdown container **/

.top-bar-section ul.dropdown {

    background: #333;

    color: #fff;

}

/** This fixes the position and the color of the dropdown arrow **/

.top-bar-section .has-dropdown > a:after {

    border-color: rgba(0, 0, 0, 1) transparent transparent;

    margin-top: 2.5px;

}

توسط استایل های فوق، تغییرات زیادی را در منوی بالا اعمال کرده ایم. در ابتدا، رنگ بک گراند پیش فرض آیتم فعال (active) را حذف کردیم و سپس آنرا به رنگ گرادینت css جایگزین کردیم (linear-gradient)

سپس برای وضعیت hover آیتم های منو، یک رنگ گرادینت دیگری تعریف کرده ایم. برای مشخص‌تر شدن تکست آیتم های غیر‌فعال (non-active) در منو، رنگ آنرا خاکستری تیره درنظر گرفتیم.

هنگامیکه با ماوس بر روی یک منوی دارای زیرمنو (has-dropdown) می رویم، با تعریف کلاس .top-bar-section li:hover می توان رنگ پس زمینه و نیز رنگ متن آن منوی والد را تغییر دهیم تا مشخص شود آیتم فعال در منو کدام آیتم می باشد.

قدم سوم: مشاهده نتیجه:

مرورگر خود را رفرش کنید تا استایل هایی که اکنون تعریف کرده اید، روی منو اعمال شوند و نتیجه کارتان را ببینید. کارمان هنوز تمام نشده است. باید مطمئن شویم با کوچک کردن مرورگر (برای تست دستگاه های کوچک تر مانند موبایل) منو بهم نمی ریزد و ریسپانسیو می باشد. بدین منظور باید از قابلیت مدیا کوئری (media query) در CSS استفاده کنیم.

تنظیمات مدیا کوئری (Setting up the Media Query):

قدم اول: مدیا کوئری (Media Query):

در دیزاین سفارشی خود یک سری کارها را باید انجام دهیم تا منو در اسکرین های کوچکتر نیز بدرستی نمایش یابد. این تغییرات معمولا شامل تغییر رنگ متن، رنگ پس زمینه، padding آیتم ها و line-height می باشد. به کدهای css  زیر بهمراه کامنت های هریک از کلاس ها دقت کنید:

@media only screen and (max-width: 942px) {

    /* Makes the responsive menu fit in the navigation container and change its background to black */

    .top-bar ul {

        background-color: rgba(0, 0, 0, 0.5);

        padding-bottom: 13px;

    }

    /* Change non active menu item color to black */

    .top-bar-section ul li > a {

        color: #fff;

    }

    /* Gives the dropdown ul a black fill */

    .top-bar-section ul {

        background: #000;

    }

    /* Give the BACK button after going in a submenu the appropriate filling */

    .top-bar-section .dropdown li.title h5 a {

        line-height: 57px;

    }

    /* This fixes the position and the color of the dropdown arrow */

    .top-bar-section .has-dropdown > a:after {

        border-color: rgba(255, 255, 255, 1) transparent transparent;

        margin-top: 2.5px;

    }

} /* end media query */

قدم دوم: از نتیجه لذت ببرید:

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

نتیجه‌گیری (Conclusion):

دقت داشته باشید که لزومی ندارد منوی سایت حتما در بالای سایت قرار بگیرد. بلکه در هر جا که بخواهید می توانید آنرا نمایش دهید. فقط کافیست در div های row و columns تعریف شود.

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

در بخش بعد درباره دکمه (button) و لیست بازشو (dropdown list) صحبت می کنیم.

آموزش فریم‌ورک Foundation-بخش6-دکمه و لیست بازشو

بخش ششم: دکمه (Button) و لیست بازشو (DropDown List)

دکمه و لیست بازشو در فریم‌ورک Foundation

در بخش قبل، نحوه سفارشی سازی منوی بالا (Top Bar Customization) در فریم ورک foundation را توضیح دادیم.

 در این بخش از آموزش فریم ورک فاندیشن (Foundation Framework) المان های دکمه (Button)، لیست بازشو (Dropdown) و پلاگین Clearing را بررسی می کنیم.

دکمه ها (Buttons):

فریم ورک فاندیشن، مجموعه ای از دکمه ها را در اختیار طراحان وب قرار می دهد که پیاده سازی آنها بسیار ساده می باشد. فقط کافیست کلاس button را به المان موردنظر خود مانند لینک، div، دکمه و یا input اعمال کنیم تا دکمه هایی مانند تصویر زیر را داشته باشیم:

با افزودن کلاس button دکمه ای با استایل های پیش فرض را خواهیم داشت. اما همانطور که در تصویر فوق مشاهده می کنید، می توانید استایل های متفاوتی به دکمه ها اعمال کنید. کدهای زیر را در نظر بگیرید:

<!-- Size Classes -->

<a class="button" href="#">Default Button</a>

<a class="tiny button" href="#">Tiny Button</a>

<a class="small button" href="#">Small Button</a>

<a class="large button" href="#">Large Button</a>

<!-- Color Classes -->

<a class="button secondary" href="#">Secondary Button</a>

<a class="button success" href="#">Success Button</a>

<a class="button alert" href="#">Alert Button</a>

<!-- Radius Classes -->

<a class="button radius" href="#">Radius Button</a>

<a class="button round" href="#">Round Button</a>

<!-- Disabled Class -->

<a class="button disabled" href="#">Disabled Button</a>

همانطور که در کد بالا می بینید، می توانید سایز، رنگ و خواصی مانند خمیدگی اطراف دکمه (border-radius) و فعال و غیرفعال بودن دکمه (Disabled) را تعیین کنید. اما همچنان می توانید استایل های دلخواه خود را به دکمه ها اعمال کنید. می توانید برای داشتن دکمه ای با تمام خواص فوق، بصورت زیر عمل کنید:

کلاس button برای داشتن دکمه، کلاس small برای تعیین سایز دکمه، کلاس success برای رنگ دکمه، کلاس round برای گرد کردن دور دکمه و کلاس disabled برای غیرفعال کردن دکمه.

گروه های دکمه (Button Groups):

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

<ul class="button-group">

    <li><a class="small button" href="#">Button 1</a></li>

    <li><a class="small button" href="#">Button 2</a></li>

    <li><a class="small button" href="#">Button 3</a></li>

</ul>

تصویر زیر نیز نمایانگر گروه هایی از دکمه ها می باشد:

همچنین می توانید مانند قبل، کلاس های round و disabled و … را به هریک از دکمه ها اضافه کرد.

نوارهای دکمه (Button Bars):

برای تعریف چندین گروه دکمه در کنار هم، از کلاس button-bar استفاده می کنیم. این کلاس را به یک div اعمال می کنیم و درون آن باید چند گروه دکمه تعریف کنیم. کد زیر را در نظر بگیرید:

<div class="button-bar">

<ul class="button-group">

    <li><a class="small button" href="#">Button 1</a></li>

    <li><a class="small button" href="#">Button 2</a></li>

    <li><a class="small button" href="#">Button 3</a></li>

</ul>

<ul class="button-group">

    <li><a class="small button" href="#">Button 1</a></li>

    <li><a class="small button" href="#">Button 2</a></li>

    <li><a class="small button" href="#">Button 3</a></li>

</ul>

</div>

تصویر زیر را خواهیم داشت:

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

دکمه های بازشو (Dropdown Buttons):

برای داشتن یک دکمه بصورت بازشو، باید علاوه بر کلاس button، کلاس dropdown را نیز برای دکمه تعریف کنید. علاوه بر این، باید یک اتریبیوت بنام data-dropdown را نیز برای آن تعریف کنید. مقدار این اتریبیوت برابر آیدی ul می باشد. کد زیر را در نظر بگیرید:

<a class="button dropdown" href="#" data-dropdown="drop1">Dropdown Button</a>

</pre>

<ul class="f-dropdown" id="drop1">

    <li><a href="#">This is a link</a></li>

    <li><a href="#">This is another</a></li>

    <li><a href="#">Yet another</a></li>

</ul>

مقدار اتریبیوت data-dropdown باید با آیدی ul برابر باشد. در مثال فوق برابر drop1 می باشد. نکته ای که برای ایجاد یک دکمه بازشو باقی می ماند، افزودن کلاس f-dropdown به ul می باشد. تصویر زیر را ملاحظه کنید:

پلاگین Clearing:

این پلاگین به شما این امکان را می دهد که یک لایت باکس زیبا داشته باشید. پلاگین Clearing یک پلاگین ایجادلایت باکس است که سرعت لود بالایی دارد. ابتدا کد مربوط به این پلاگین را مشاهده کنید:

<ul class="clearing-thumbs" data-clearing="">

    <li><a href="path/to/your/img"><img alt="" src="path/to/your/img-th" /></a></li>

    <li><a href="path/to/your/img"><img alt="" src="path/to/your/img-th" /></a></li>

    <li><a href="path/to/your/img"><img alt="" src="path/to/your/img-th" /></a></li>

</ul>

مجددا در آن از لیست نامرتب (unordered یا ul) استفاده شده است. کلاس clearing-thumbs را به ul اضافه کنید بهمراه اتریبیوت data-clearing که مقدار خالی دارد. درون این ul مسلما باید چندین li تعریف شود که در هر کدام لینک و تصویر موردنظر قرار می گیرد. تصویر زیر را مشاهده کنید:

لازم به ذکر است که پلاگین clearing از گرید بلاک (block grid) استفاده می کند.

در بخش هفتم از آموزش فاندیشن، نحوه سفارشی سازی فرم های وب سایت را آموزش می دهیم.

آموزش فریم‌ورک Foundation-بخش7-فرم سفارشی

بخش هفتم: فرم های سفارشی (Custom Forms)

طراحی فرم‌های سفارشی در فریم‌ورک فاندیشن

در بخش قبل، المان های دکمه (button) و لیست بازشو (DropDown List) را بررسی کردیم.

پس از بررسی و سفارشی سازی دکمه ها در فریم ورک فاندیشن، در ادامه این سری از مقالات، می خواهیم نحوه سفارشی سازی فرم ها و المان های مربوط به آن را بررسی کنیم. در این آموزش، روی یک فرم تماس با ما (contact us form)، کار خواهیم کرد. تصویر زیر را مشاهده کنید:

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

به منظور استفاده از امکان شخصی سازی فرم ها، باید فایل foundation.forms.js را به صفحه وب سایت خود اضافه کنید.

طریقه کارکرد این پلاگین بدین صورت است که المان های فرم اولیه را مخفی (hidden) می کند و توسط div و anchor tag و … المان های دلخواه را ایجاد می کند و بین المان های جدید و اولیه فرم، تعاملی ایجاد می کند تا در عملکرد فرم تاثیری نگذارد.

فرم تماس با ما (The Contact Form):

در دنیای وب، مرسوم ترین فرمی که می تواند در یک وب سایت وجود داشته باشد، فرم تماس با ما است. مانند تگ فرم استاندارد html، یک تگ فرم بنویسید و برای سفارشی سازی آن، کلاس custom را برای آن تعریف کنید. برای اینکه مطابق تصویر فوق، دو ستون در یک سطر داشته باشیم، نیاز است در یک div با کلاس row، دو تا div با کلاس large-6 columns تعریف شود. کد زیر را مشاهده کنید:

<form class="custom">

  <div class="row">

    <div class="large-6 columns">

    </div>

    <div class="large-6 columns">

    </div>

  </div>

</form>

اکنون با ستون سمت چپ شروع می کنیم. ابتدا لطفا تصویر زیر را ملاحظه کنید:

در سطر اول، برای خوش آمدگویی به کاربر، جنسیت کاربر (Mr. یا Mrs.) را از طریق یک لیست بازشو (dropdown) از کاربر می پرسیم و در مقابل آن، کاربر باید نام خود را وارد کند. در سطر بعدی، ایمیل کاربر را داریم و سپس یک لیست بازشو برای انتخاب نحوه آشنایی با ما آمده است. کد html این قسمت بصورت زیر است:

<div class="row collapse">

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

    <select>

      <option>Mr.</option>

      <option>Mrs.</option>

      <option>Miss.</option>

      <option>Ms.</option>

      <option>Dr.</option>

    </select>

  </div>

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

    <input type="text" placeholder="Name" />

  </div>

</div>

<input type="email" placeholder="Email" />

<select id="contactDropdown">

  <option DISABLED>How did you find us?</option>

  <option>Google</option>

  <option>A friend told me</option>

  <option>Not sure, where am I?</option>

</select>

باید مطمئن شوید که المان select (لیست بازشو) دارای id باشد. برای ادغام این بخش با بقیه فرم، باید آنرا در یک div با کلاس large-6 تعریف کنیم. سپس به سراغ بخش سمت راست می رویم. تصویر زیر را برای این بخش در نظر بگیرید:

کد زیر مربوط به بخش سمت راست فرم (تصویر بالا) می باشد:

<textarea placeholder="Message"></textarea>

<div class="row">

  <div class="large-6 small-6 columns">

    <label>Send me spam&nbsp;&nbsp;

      <input type="checkbox" CHECKED style="display:none" />

    </label>

  </div>

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

    <label>CC me?</label>

  </div>

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

    <div class="switch tiny">

      <input id="x" name="switch-x" type="radio" checked>

      <label for="x" onclick="">No</label>

      <input id="x1" name="switch-x" type="radio">

      <label for="x1" onclick="">yes</label>

      <span></span>

    </div>

  </div>

</div>

<input class="button small large-12" type="submit" value="Send Message" />

سوئیچ ها (Switches):

برای روشن/خاموش کردن (on/off) فیلدی در فرم بصورت ویژوالی بکار می رود. با یک div شروع می شود که کلاس switch دارد و سپس می توان اندازه آنرا تعریف کرد. در این مثال tiny در نظر گرفتیم. شما می توانید small و یا large را نیز برای سایز سوئیچ تعریف کنید. برای گرد شدن اطراف این المان، می توانید کلاس rounded را به آن اضافه کنید. در ساختار سوئیچ، از دو input بهمراه دو برچسب (label) استفاده شده است. برای هر حالت (state) یک input و label. کد زیر را ملاحظه کنید:

<div class="switch tiny">

  <input id="x" name="switch-x" type="radio" checked>

  <label for="x" onclick="">No</label>

</div>

همانطور که مشاهده می شود، هر input یک id یکتا دارد که در اتریبیوت for برای label مربوط به آن، همین آیدی یعنی x را تعریف کرده ایم.

سایر المان های فرم (Other form elements):

برای داشتن دکمه رادیویی (radio button) باید سه input با نوع radio با نام های یکسان تعریف کنید و در هریک، بصورت inline استایل display:none را بنویسید. مانند کد زیر:

<input name="radio1" type="radio" style="display:none;" CHECKED />

<input name="radio1" type="radio" style="display:none;" />

<input name="radio1" type="radio" disabled style="display:none;">

برای داشتن یک بخشی بنام پیشوند (prefix)، بصورت زیر می توانید کد خود را تعریف کنید:

<div class="row collapse">
 <div class="large-9 small-9 columns">
  <span class="prefix">http://webdesign.tutsplus</span>
 </div>
 <div class="large-3 small-3 columns">
  <select>
   <option>.com</option>
   <option>.co</option>
   <option>.ca</option>
  </select>
 </div>
</div>

در مثال فوق، ابتدا در div با کلاس large-9 المان prefix تعریف شده و سپس یک select در large-3 می آید که می توان پسوند سایت را (مانند com یا info یا…) از لیست آن انتخاب کرد.

پیام های خطا (Error Messages):

هر فرمی، مسلما حداقل یک فیلدی دارد که پر کردن آن توسط کاربر الزامی می باشد و در صورت خالی بودن آن و submit کردن فرم، کاربر باید با پیغام خطا روبرو شود. با کلاس error مشخص می شود که می توان این کلاس را به المان هایی مانند label یا input بدهیم تا حالت خطای قرمزرنگ را مشاهده کنیم. کد زیر را در نظر بگیرید:

<form>

  <div class="row">

    <div class="large-6 columns">

      <label class="error">Error</label>

      <input type="text" class="error" />

      <small class="error">Invalid entry</small>

    </div>

    <div class="large-6 columns error">

      <label>Another Error</label>

      <input type="text" />

      <small>Invalid entry</small>

    </div>

  </div>

  <textarea class="error" placeholder="Message..."></textarea>

  <small class="error">Invalid entry</small>

</form>

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

ابزار مفید (Useful Tools):

وقتی که به مرحله انتخاب رنگ برای قالب وب سایت می رسید، شما نمی توانید بدون کمک یک گرافیست یا طراح (designer) اینکار را انجام دهید. ابزار مفیدی که در این زمینه می تواند بسیار بدرد شما بخورد، وب سایت Colourco می باشد. در این وب سایت می توانید بخش های مختلف وب سایت تان را با حرکت ماوس روی نمایشگر انتخاب کنید و همچنین از تمپلیت های آماده این وب سایت واقع در منوی سایدبار سمت چپ (مانند مونوکرومیک و …) استفاده کنید.

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

در بخش هشتم از سری آموزشی فریم ورک foundation، المان های progress، tooltip، alert و… را مورد بررسی قرار می دهیم.

آموزش فریم‌ورک Foundation-بخش8-alert-tooltip

بخش هشتم: آموزش المان‌های progress, alert, tooltip, …

المان‌های Tooltip، Chart، Progress، Alert

در بخش قبل، نحوه شخصی سازی فرم تماس با را در فریم ورک Foundation آموزش دادیم. در این بخش از آموزش فریم ورک فاندیشن، المان های Progress و Alert و Tooltip را بررسی می کنیم و از آنها در یک فرم نمونه استفاده خواهیم نمود.

تولتیپ (Tooltip):

المان Tooltip برای نمایش توضیحی درباره یک لینک، تصویر، چک باکس و… بکار می رود. در مثال این مقاله می خواهیم درباره یک المان چک باکس بنام Send me spam، توضیح اجمالی بدهیم. ابتدا به تصویر زیر نگاه کنید:

سپس کد زیر را مشاهده کنید:

<label class="has-tip">

    <span class="has-tip" title="Don't worry we won't really send you any spam this is just to display a checkbox." data-tooltip="" data-width="300">Send me spam</span>

    <input style="display: none;" type="checkbox" checked="checked" />

</label>

همانطور که مشاهده می کنید، به المانی که می خواهیم تولتیپ برای آن نمایش داده شود کلاس has-tip را اضافه می کنیم و یک اتریبیوت بنام data-tooltip برای span مربوطه با مقدار خالی تعریف می کنیم (data-tooltip=””). با تعریف اتریبیوت data-width می توانید طول تولتیپ را مشخص کنید. و در نهایت در اتریبیوت title باید متن موردنظر خود را جهت نمایش به شکل تولتیپ تعریف کنید.

افزودن تعامل (Adding Interactivity):

در مقالات قبل، نحوه تعریف و استفاده از المان های فرم در فریم ورک فاندیشن را آموزش دادیم. در این مقاله، می خواهیم یک لایه جدید به المان های قبلی فرم بیافزاییم. توسط افزودن مراحل (stages) به دکمه ارسال فرم (Submit Button). یک المان Progress (برای نمایش مقدار پیشرفت پر شدن فرم) و یک پیامی مبنی بر موفقیت آمیز بودن ارسال فرم خواهیم داشت و در نهایت ورودی های کاربر را پس از ارسال فرم، پاک می کنیم. مسلما تا وقتی که این فرم را به یک زبان سمت سرور (مانند php) متصل نکنیم، این فرم بصورت عملی کار نخواهد کرد. همچنین می توانید توسط Ajax باعث شوید تا صفحه وب پس از ارسال فرم، بارگذاری مجدد (Refresh) نشود و مثلا یک تصویر loading gif به کاربر نمایش دهیم. برای کسب اطلاعات بیشتر و یادگیری ارسال فرم بصورت آژاکسی، به مقاله وب سایت Tutsplus مراجعه نمائید.

المان Progress:

می توانید در بالای دکمه ارسال فرم، المان Progress را تعریف کنید و از همان کلاس های تعریف شده برای دکمه (مانند rounded) استفاده کنید. تصویر زیر را مشاهده کنید:

با تعریف کد زیر یک Progress bar خواهید داشت:

<div class=”progress round” id=”progress” style=”display: none;”></div>

شخصی سازی المان progress:

کدهای زیر را در نظر بگیرید. 4 المان progress تعریف شده است با رنگ ها و width های متفاوت:

<div class="secondary progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">

  <div class="progress-meter" style="width: 25%"></div>

</div>

<div class="success progress">

  <div class="progress-meter" style="width: 50%"></div>

</div>

<div class="warning progress">

  <div class="progress-meter" style="width: 50%"></div>

</div>

<div class="alert progress">

  <div class="progress-meter" style="width: 75%"></div>

</div>

در المان اول، رنگ progress خاکستری (secondary) می باشد و دارای طول 25%

در المان دوم، رنگ progress سبز (success) می باشد و دارای طول 50%

در المان سوم، رنگ progress زرد (warning) می باشد و دارای طول 75%

در المان چهارم، رنگ progress قرمز (alert) می باشد و دارای طول 75%

تصویر زیر نمایانگر نحوه نمایش این progressbar ها در مرورگر می باشد:

نمایش پیام به کاربر:

بهتر است پس از اینکه کاربر فرم را ارسال کرد، پیغامی مبنی بر موفق بودن عملیات ارسال به او نمایش داده شود. ابتدا تصویر زیر را مشاهده کنید:

کد مربوط به نمایش پیام موفقیت آمیز بودن بصورت زیر است:

<div class="alert-box success" style="display: none;" data-alert="">Success! Your message has been sent.

 <a class="close" href="#">×</a></div>

کاربرد کلاس alert-box:

برای داشتن یک باکس پیام خطا یا اخطار یا موفقیت، کلاس alert-box را برای div تعریف می کنیم و برای سبز شدن این باکس، کلاس success را به آن اعمال می کنیم. اتریبیوت data-alert را نیز بصورت رشته خالی تعریف می کنیم. درون این div، پیام موردنظر خود را می نویسیم. اگر یک تگ anchor (لینک) با کلاس close تعریف کنیم، کاربر می تواند باکس خطا را ببندد.

کدهای زیر را در نظر بگیرید:

<div data-alert class="alert-box success radius">

  This is a success alert with a radius.

  <a href="#" class="close">&times;</a>

</div>

<div data-alert class="alert-box warning round">

  This is a warning alert that is rounded.

  <a href="#" class="close">&times;</a>

</div>

<div data-alert class="alert-box info radius">

  This is an info alert with a radius.

  <a href="#" class="close">&times;</a>

</div>

<div data-alert class="alert-box alert round">

  This is an alert - alert that is rounded.

  <a href="#" class="close">&times;</a>

</div>

<div data-alert class="alert-box secondary">

  This is a secondary alert.

  <a href="#" class="close">&times;</a>

</div>

با تعریف div های فوق، 4 مدل از باکس های هشدار را بصورت تصاویر زیر ایجاد کرده ایم:

نحوه تعاملی کردن المان ها:

برای تعاملی کردن (انیمیشن و افکت) این المان هایی که در این بخش فراگرفته اید، می توانید کد جاوا اسکریپت زیر را تعریف کنید:

var submitButton = $('#submitme');              // Variable to cache button element

var progressBar = $('#progress');               // Variable to cache progress bar element

var progressBarMeter = $('#progress .meter');   // Variable to cache meter element

var alertBox = $('.alert-box');                 // Variable to cache meter element

var closeButton = $('.close');                  // Variable to cache close button element

$(submitButton).click(function() { // Initiates the send interaction

    $(this).fadeOut(500); // Fades out submit button when it's clicked

    setTimeout(function() { // Delays the next effect

        $(progressBar).fadeIn(500); // Fades in the progress bar

        $(progressBarMeter).animate({width : '100%'},2000); // Animates the progress bar

        setTimeout(function() { // Delays the next effect

            $(progressBar).fadeOut(500); // Fades out progress bar when animation completes

            setTimeout(function() { // Delays the next effect

                 $(alertBox).fadeIn(500); // Fades in success alert

            }, 500);

        }, 2500);

    }, 500);

});

در مقابل هر دستور در هر خط، کامنتی وجود دارد که توضیح کوتاهی راجع به آن خط داده است.

ریست کردن فرم (Resetting The Form):

از کد زیر می توانید برای ریست کردن المان های فرم مانند input و progress و alert استفاده کنید.

$(closeButton).click(function() { // Initiates the reset function

    $(alertBox).fadeOut(500); // Fades out success message

    $(progressBarMeter).css({width : '0%'}); // Resets progress bar

    setTimeout(function() { // Delays the next effect

        $('input, textarea').not('input[type=submit]').val(''); // Resets the input fields

        $(submitButton).fadeIn(500); // Fades back in the submit button

    }, 500);

        return false; // This stops the success alert from being removed as we just want to hide it

});

همانطور که مشاهده می کنید، هر المان را با انیمیشن و با یک افکت خاصی محو کرده ایم و بسته ایم.

ابزار مفید (Useful Tools):

در پروژه های گوناگون بویژه داشبوردها، نمایش انواع نمودارها، یکی از بخش های آن پروژه می تواند باشد. با مراجعه به وب سایت ChartJs می توانید از این ابزار مفید استفاده کنید. با مراجعه به داکیومنت Chartjs می توانید مباحث آموزشی راجع به آن را مشاهده کنید. از طریق این نمودارهای زیبا، می توانید داده های خود را به صورت انیمیشنی و ویژوالی به نمایش در بیاورید. از ویژگی های مهم این نمودارها، می توان به ریسپانسیو بودن آنها، قابلیت نمایش در تمام مرورگرها، سازگاری کامل با فریم ورک Foundation و… اشاره کرد.

نمودارهای chartjs از المنت canvas تکنولوژی HTML5 استفاده می کنند.

در بخش نهم از سری آموزشی فریم ورک foundation، المان های جدول (table)، پنل (panel)، جدول قیمت (pricing table) و… را بررسی می کنیم.

آموزش فریم‌ورک Foundation-بخش9-جدول،پنل

بخش نهم: جدول، باکس های قیمت، پنل و…

المان‌های جدول، پنل، باکس قیمت، پلاگین JoyRide

در بخش قبل، المان‌های progress, alert, tooltip, … در فریم ورک foundation  را معرفی و بررسی کردیم.

در این بخش، المان های table ، pricing table و پلاگین Joyride را بررسی می کنیم.

پنل ها (Panels):

با تعریف کلاس panel برای یک div، اطراف این div دارای border کمرنگی خواهد شد و نیز رنگ پس زمینه آن نیز بصورت خاکستری می شود و padding نیز اعمال می شود. کد زیر را در نظر بگیرید:

<div class="large-6 columns">

    <div class="panel">

        <p id="firstStop">We have a simple selection of hosting packages for you to choose from, these will work fantastically for any company. With ultra fast mySQL database connections, content management systems really fly. Add to this 24/7 customer support and 99.9% uptime and you've got a great hosting package.</p>

    </div>

</div>

تصویر را خواهیم داشت:

جداول قیمت (Pricing Tables):

یکی از عواملی که باعث می شود یک فرد، وب سایتی طراحی و مدیریت کند، می تواند فروش اجناس و کالا باشد. بنابراین، این بخش یکی از بخش های مهم هر وب سایتی می تواند باشد. پس مسلما فریم ورک قدرتمندی مثل فاندیشن (Foundation) المان جدول قیمت (pricing table) را پوشش داده است. به لیست نامرتب زیر دقت کنید:

<ul class="pricing-table">

    <li class="title">Startup</li>

    <li class="price">$9.95</li>

    <li class="description">An awesome package to get any company onto their feet. With instant setup and magic money making plugins.</li>

    <li class="bullet-item">1 Database</li>

    <li class="bullet-item">5GB Storage</li>

    <li class="bullet-item">20 Users</li>

    <li class="cta-button"><a class="button round" href="#">Buy Now</a></li>

</ul>

مشاهده می شود که به ul کلاس pricing-table را اختصاص داده ایم. در این UL تعدادی  li می توانیم تعریف کنیم با کلاس های زیر:

Title , Price , Description , bullet-item , cta-button

برای تعریف li هایی که ویژگی های هر محصول را بیان می کنند باید از کلاس bullet-item استفاده کرد. تصویر زیر را ملاحظه کنید:

مطابق شکل بالا، می توانید از چندین ul با کلاس pricing-table برای ایجاد رقابت بین محصولات استفاده کنید.

جداول استاندارد (Standard Tables):

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

<table>

  <thead>

    <tr>

      <th width="200">Startup</th>

      <th width="200">Enterprise</th>

      <th width="200">Global Corporation</th>

    </tr>

  </thead>

  <tbody>

    <tr>

        <td>1 Database</td>

        <td>5 Database</td>

        <td>10 Database</td>

    </tr>

    <!--more rows-->

    <tr>

        <td>No Backups</td>

        <td>50GB Backups</td>

        <td>100GB Backups</td>

    </tr>

  </tbody>

</table>

پلاگین Joyride:

توسط این پلاگین می توانید برای کاربران وب سایت تان در یک صفحه تور برگزار کنید!

حتما تا بحال با این ویژگی در وب سایت های گوناگون برخورد کرده اید. ابتدا تصویر زیر را نگاه کنید:

بعنوان مثال اگر با وردپرس آشنایی داشته باشید، هنگامی که برخی از پلاگین ها را نصب می کنید، با یک راهنما بصورت تصاویر فوق روبرو خواهید شد که مراحل استفاده از آنرا قدم به قدم توضیح می دهد. خب این امکان جالب در فریم ورک فاندیشن وجود دارد.

پیاده‌سازی راهنمای قدم به قدم:

برای پیاده سازی این قابلیت در وب سایت خود، ابتدا یک ol با کلاس joyride-list برای آن تعریف کنید و یک اتریبیوت data-joyride بدون هیچ مقداری. درون این ol تمام مراحلی که می خواهید نمایش دهید را در li تعریف می کنید. برای اینکه تولتیپ مربوط به هر بخش از وب سایت بدرستی در روی آن بخش نمایش داده شود باید مطمئن شوید که ID آن div با اتریبیوت data-id هر li برابر باشد. اگر id هر مرحله را مشخص نکنید، joyride مانند modal کار میکند و پیغام ها را در وسط صفحه نمایش می دهد.

کد زیر را برای تعریف joyride در نظر بگیرید:

<!-- At the bottom of your page but inside of the body tag -->

<ol class="joyride-list" data-joyride>

  <li data-id="firstStop" data-text="Next" data-options="tip_location: top; prev_button: false">

    <p>Hello and welcome to the Joyride <br>documentation page.</p>

  </li>

  <li data-id="numero1" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev">

    <h4>Stop #1</h4>

    <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>

  </li>

  <li data-id="numero2" data-button="Next" data-prev-text="Prev" data-options="tip_location:top;tip_animation:fade">

    <h4>Stop #2</h4>

    <p>Get the details right by styling Joyride with a custom stylesheet!</p>

  </li>

  <li data-button="End" data-prev-text="Prev">

    <h4>Stop #3</h4>

    <p>It works as a modal too!</p>

  </li>

</ol>

برای تعریف متن داخل دکمه های بعدی و قبلی از اتریبیوت های زیر استفاده کنید:

• اتریبیوت data-text برای تعریف نام دکمه بعدی
• اتریبیوت data-prev-text برای تعیین نام دکمه قبلی

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

در آخرین بخش از آموزش فریم ورک فاندیشن، المان های منوی چسبنده، تصاویر بندانگشتی، ویدیوی ریسپانسیو و… را بررسی می کنیم.

آموزش فریم‌ورک Foundation-بخش10-منو،ویدیو،تصویر

بخش دهم: منوی چسبنده (Sticky Navigation)، ویدیوی ریسپانسیو، تصاویر بندانگشتی (Thumbnail)

منوی چسبنده، ویدیوی ریسپانسیو، تصاویر بندانگشتی و راست‌چین

در بخش قبل، المان های جدول، پنل، باکس قیمت و… را بررسی کردیم.

پلاگین Magellan:

ممکن است در برخی از پروژه ها نیاز باشد منوی سایت با اسکرول کاربر، در صفحه باقی بماند و به صفحه بچسبد. برای داشتن منوی چسبنده (Sticky Navigation) از پلاگین Magellan استفاده کنید. مرجع اصلی آموزش این پلاگین وب سایت فاندیشن می باشد. تصویر زیر نمایی از یک منوی چسبنده است:

کد این منو نیز بسیار ساده است:

<div data-magellan-expedition="fixed">

  <ul class="sub-nav">

    <li data-magellan-arrival="contact"><a href="#">Contact</a></li>

    <li data-magellan-arrival="about"><a href="#">About</a></li>

  </ul>

</div>

همانطور که مشاهده می کنید دو تا اتریبیوت در این کد استفاده شده است که درباره آنها توضیح می دهیم. در ابتدا یک div می خواهیم که دارای اتریبیوت data-magellan-expedition با مقدار fixed باشد و در این div مجددا از یک ul بهمراه چندین li داخل آن استفاده می کنیم. المان ul باید دارای کلاس sub-nav باشد و برای هر آیتم یعنی li یک اتریبیوت بنام data-magellan-arrival با مقادیر مرتبط با نام منو (در این مثال contact و about) تعریف می کنیم.

از آنجایی که این پلاگین بسیار سبک می باشد، فقط کافیست توسط کدهای جاوااسکریپت، تنظیمات اولیه آنرا انجام دهیم:

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

  // specify the class used for active sections

  activeClass: 'active',

  // how many pixels until the magellan bar sticks, 0 = auto

  threshold: 0

});

نمایان و یا پنهان شدن المان (visibility):

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

small: سایز 768px  و  medium: سایز بین 768 و 1280  و  large: بین 1280 و 1440  و  xlarge: بالای 1440

کلاس های show برای سایزهای مختلف اسکرین:

.show-for-small       /* Visible up to 768px */

.show-for-medium-down /* Visible from 768px down */

.show-for-medium      /* Visible between 768px and 1280px */

.show-for-medium-up   /* Visible from 768px up */

.show-for-large-down  /* Visible from 1280px down */

.show-for-large       /* Visible between 1280px and 1440px */

.show-for-large-up    /* Visible from 1280px up */

.show-for-xlarge      /* Visible above 1440px only */

در مقابل هر کلاس، اندازه اسکرین مربوطه را نوشتیم. برای مخفی کردن (hide) المان یا المان های موردنظر خود، فقط کافیست بجای عبارت show کلمه hide را تعریف کنیم.

کلاس های show برای orientation های مختلف و لمسی بودن یا نبودن اسکرین:

کد زیر را در نظر بگیرید:

.show-for-landscape   /* Visible for landscape orientation */

.show-for-portrait    /* Visible for portrait orientation */

.hide-for-landscape   /* Hidden for landscape orientation */

.hide-for-portrait    /* Hidden for portrait orientation */

/* The touch detection classes */

.show-for-touch       /* Visible for touch enabled devices */

.hide-for-touch       /* Hidden for touch enabled devices */

توسط کلاس های فوق، براحتی می توانید المانی را در صفحات لمسی پنهان کنید و یا مثلا دکمه ای را در حالت نمایش پرتریت (portrait) مخفی کنید و یا نمایش دهید.

پشتیبانی از راست چین (RTL Support):

برای وب سایت هایی که دو یا چند زبانه است و یا وب سایتی که تنها زبان فارسی دارد، این قابلیت فریم ورک فاندیشن (foundation) بسیار کار راه انداز و مفید است. لفقط کافیست تگ html وب سایت خود را بصورت زیر تعریف کنید:

<html class="no-js" lang="fa" dir="rtl">

در اتریبیوت lang زبان را بطور اختصاری تعریف کرده ایم و اگر زبان وب سایت ما عربی باشد بجای fa می نویسیم ar. در اتریبیوت dir نیز برای اعمال راست چین بودن چیدمان صفحات و متون، مقدار rtl را در نظر می گیریم.

تصاویر بندانگشتی (Thumbnail):

برای اعمال استایل هایی مانند تصویر زیر می توان از کلاس th در اطراف تگ img استفاده کنید:

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

<a href="#" class="th" >

 <img src="images/funkyTown.jpg" alt="Get down to funky town" />

</a>

ویدیوی ریسپانسیو (Flex Video):

نمایش دادن ویدئو در وب سایت، معمولا موضوعی چالش انگیز و گاها طاقت فرسا می باشد. اما در فریم ورک فاندیشن، امکانی در نظر گرفته شده است که شما براحتی می توانید تنها با استفاده از کلاس flex-video در اطراف تگ ویدیو (یا iFrame) ویدئوی موردنظر خود را بصورت واکنش گرا (responsive) برای کاربران به نمایش در بیاورید. مانند کد زیر می توانید ویدئوهای وب سایت های youtube و vimeo و یا aparat را نیز بصورت iframe نمایش دهید:

<div class="flex-video">

 <iframe width="420" height="315" src="//www.youtube.com/embed/RcVyl9X3gFo" frameborder="0" allowfullscreen></iframe>

</div>

در اینجا، سری آموزشی فریم ورک فاندیشن (Foundation Framework) به پایان می رسد. امیدوارم این آموزش مورد استفاده شما عزیزان قرار گرفته باشد. لطفا با بیان نظرات و طرح سوالات خود در صفحه تماس با ما و یا از طریق آدرس ایمیل Ehsansafari@hotmail.com ما را در ارائه مقالات مفیدتر یاری کنید.

منبع: https://webdesign.tutsplus.com