آموزش بنیاد یادگیری 6

مقدمه Introduction

• خوش آمدی Welcome

• آنچه باید بدانید What you should know

• با استفاده از پرونده های تمرینی Using the exercise files

1. بررسی اجمالی بنیاد 6 1. Overview of Foundation 6

• بنیاد چیست؟ What is Foundation?

• دانلود پایه 6 Download Foundation 6

• پرونده های بنیاد را بررسی کنید Examine Foundation's files

• مستندات بنیاد Foundation documentation

2. سیستم شبکه XY 2. The XY Grid System

• سه سیستم شبکه بنیاد را مشخص کنید Identify Foundation's three grid systems

• راه اندازی اصلی شبکه XY Basic setup of the XY Grid

• حاشیه و بالشتک با XY Grid Margins and padding with XY Grid

• سقوط حاشیه یا بالشتک Margin or padding collapse

• سلول های شبکه به اندازه خودکار Auto-sized grid cells

• سفارش منبع Source ordering

• شبکه های بلوک Block grids

• شبکه های عمودی Vertical grids

• چالش: ایجاد یک شبکه Challenge: Create a grid

• راه حل: یک شبکه ایجاد کنید Solution: Create a grid

3. مرور کلی CSS 3. CSS Overview

• تایپوگرافی ، بلاکوبات ، لیست ها و تراز کردن متن Typography, blockquotes, lists, and text alignment

• دکمه های سبک Style buttons

• کارت را درج کنید Include cards

• شامل فراخوان ها شوید Include callouts

• CSS اصلی بنیاد را نادیده بگیرید Override Foundation's core CSS

• بنیاد را با استفاده از صفحه بارگیری سفارشی کنید Customize Foundation using the download screen

• چالش: یک صفحه را سبک کنید Challenge: Style a page

• راه حل: یک صفحه را سبک کنید Solution: Style a page

4. سیستم های ناوبری 4. Navigation Systems

• نوار بالا ، نوار پیمایش اولیه را پیکربندی کنید Configure top bar, the basic navigation bar

• نوار بالای پاسخگو Responsive top bar

• منوهای کشویی Dropdown menus

• منوهای حفاری Drilldown menus

• چالش: از بوم و نوار بالا ترکیب کنید Challenge: Combine off canvas and top bar

• راه حل: ترکیبی از بوم و نوار بالا Solution: Combine off canvas and top bar

5. جلوه های JavaScript 5. JavaScript Effects

• یک چرخ فلک عکس با Orbit طراحی کنید Design a photo carousel with Orbit

• با Reveal یک پنجره معین تنظیم کنید Set up a modal window with Reveal

• تصاویر پاسخگو را با Interchange ادغام کنید Integrate responsive images with Interchange

• چالش: راهنمایی های ابزار را به یک سایت اضافه کنید Challenge: Add tooltips to a site

• راه حل: راهنمایی های ابزار را به یک سایت اضافه کنید Solution: Add tooltips to a site

نتیجه Conclusion

• بنیاد جریان برای راه اندازی Streamline Foundation for launch

• مراحل بعدی Next steps