آموزش CSS: متغیرها و چیدمان سیالات

مقدمه Introduction

• تکامل طراحی پاسخگو The evolution of responsive design

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

1. یادگیری CSS () 1. Learn CSS calc()

• مرور کلی CSS () CSS calc() overview

• استفاده از کالک () در یک مثال از طرح بندی Applying calc() in a layout example

• چالش: ایجاد مقیاس نوع Challenge: Creating a type scale

• راه حل: ایجاد مقیاس نوع Solution: Creating a type scale

2. خصوصیات سفارشی CSS را بیاموزید 2. Learn CSS Custom Properties

• بررسی اجمالی ویژگی های سفارشی CSS CSS custom properties overview

• پیکربندی ویژگی های سفارشی CSS Configure CSS custom properties

• ویژگی های سفارشی و وراثت CSS CSS custom properties and inheritance

• خصوصیات سفارشی CSS و متغیرهای Sass CSS custom properties and Sass variables

• با استفاده از متغیرهای Sass Using Sass variables

• چالش: ویژگی های دلخواه را به مقیاس تایپ اضافه کنید Challenge: Add custom properties to type scale

• راه حل: خواص دلخواه را به مقیاس تایپ اضافه کنید Solution: Add custom properties to type scale

3. ایجاد طرح بندی 3. Create Layouts

• یک سیستم شبکه چهار ستونی ساده را مشخص کنید Mark up a simple four-column grid system

• یک CSS شروع برای سیستم شبکه ایجاد کنید Create a starting CSS for the grid system

• نمایش داده شد رسانه ها به سیستم شبکه شما Add media queries to your grid system

• بازنویسی CSS برای ادغام ویژگی های کال () و دلخواه Rewrite CSS to integrate calc() and custom properties

• بازنویسی CSS برای ادغام شکاف بین سلولهای شبکه Rewrite CSS to integrate gaps between grid cells

• فرمول طرح را حتی بیشتر انعطاف پذیر کنید Make the layout formula even more flexible

• چالش: ادغام جستجوی رسانه ها Challenge: Media query integration

• راه حل: ادغام پرس و جو رسانه ای Solution: Media query integration

4- صفحه وب را refactor کنید 4. Refactor a Web Page

• پروژه: از ویژگی های کالک () و دلخواه استفاده کنید Project: Use calc() and custom properties

• مرحله 1: طرح شبکه را اعمال کنید Step 1: Apply the grid layout

• مرحله 2: ویژگی های دلخواه را به طرح شبکه اضافه کنید Step 2: Add custom properties to grid layout

• مرحله 3: از مقیاس نوع و خصوصیات سفارشی استفاده کنید Step 3: Apply a type scale and custom properties

نتیجه Conclusion

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