برای طراحی به صورت ریسپانسیو همیشه سعی کنید در داخل پروژه امان یک فایل به نام style-grid-system درست کنیم

و تمام استایل‌های مربوط به ریسپانسیو امون و همچنین utlity هایی که می‌نویسیم رو در آن قرارد دهیم

( برای نوشتن utlity استایل هایی که زیاد استفاده میکنیم رو در آن قراردهیم تا از نوشتن مجدد آن‌ها جلوگیری شود

همچنین در هنگام ماژول کردن فایل‌ها اون فایل‌های import را بیایم و با _ نام گزاری شون کنیم و بعد به فایل اصلی css امون اضافه کنیم )

برای طراحی ریسپانسیو ما از  media qury syntax زیر به دو صورت استفاده میکنیم 

1- استفاده از یک فاصله بینی مثلا طبق مثال زیر فاصله هایی بین 500 تا 700 پیکسل 

@Media screen and ( min-witdth : 500px ) and ( max-witdth : 700px ) {
.heaing {
padding : 20 px
}
}

2- استفاده از یک فاصله مشخص 

@Media screen and ( witdth : 500px ) {
.heaing {
padding : 20 px
}
}

برای نام گزاری گرید هامون ما باید از چندین perifix با نام‌های xs  و s  md و  l  و  xl  بیایم و استفاده بکنیم و متناسب با اون‌ها اندازه هامون رو مشخص کنیم همچنین در ابتدای همه آن‌ها از col استفاده  میکنیم و برای هرکدوم هم باید حدودا 12 ستون در نظر بگیریم که هرکدوم حدودا 8.33 درصد فضا رو اشغال میکنن همچنین برای وسط چین کردن المان‌ها در هنگام گیرد بندی با پسوند offset برای حاشیه‌ها بعد از اون‌ها میایم و استفاده میکنیم که در هنگام استفاده فقط باید حواسمون باشد که تعداد ستون هامون زوج باشد

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

[ class ^= " col " ] {
  float : right ; 
  paddingleft:15px
  paddingright:15px
}

همچنین برای ریسپانسیو کردن تصاویر هم از استایل زیر استفاده میکنیم 

img-responsive {
width : 100%;
height : auto;
display ; block
}

و سعی شود در طراحی کردن برای گرفتن عرض‌های صد در صد و استایل‌های container و استفاده از row‌ها رو هم داشته باشیم 

.container-fluid {
  width : 100%
}
.container {
  clear: both;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}

انیمشن ها 

transform : برای جابه جایی عناصر میایم و ازش استفاده میکنیم که مقادیر مختلفی میگیرد

    ( translate (x , y جابه جایی عنصر در محور ها
    ( rotate( deg  برای چرخش عنصر 
    ( scale( number  برای بزرگ نمایی عنصر هستش
    ( skew (x,y  درست کردن یک انحراف و یک کجی 
    matrix  ترکیب قبلی ها 

transform-origin :  این ویژگی یک خورده نا مفهوم هستش ( بنده زیاد خوب نتوستم درکش کنم )  اما طبق مثال استاد موقعی استفاده میکنیم که از ویژگی قبلی مقدار چرخش رو اومدیم استفاده کردیم حال می‌خواهیم بر اساس اون مقدار بیاد و در راستای‌های محور طول و عرضش شروع کنه به حرکت کردن

1- prespective  

2- style - transform : preserve-3d   
برای سه بعدی ساختن یک انیمشن میایم و از این ویژگی استفاده میکنیم به این صورت که حتما باید بیایم و اولی رو والدش بدهیم و مقدار عددی رو براش در نظر بگیریم که معمولا 200 هستش ( دلبخواه ) حال برای فرزند باید بیایم و  استایل دومی رو قرار دهیم 
 

backface-visibility : تعین میکند که موقعی که اومدیم از چرخش 180 درجه استفاده کردیم  در فضای سه بعدی پشت عنصر قابل مشاهده باشد و دیده شود
 

transition :  transition-property  transition-duration transition-function-timing  

از این ویژگی در هاور کردن‌ها زیاد استفاده میکنیم یک مدل از استفاده کردن از انیمشن‌ها هستش 

transition-property  کدوم پراپرتی قراره و این انیمشن روش تاثیر بزاره که یا نام اون رو قرار میدهیم یا هم کلمه all همه

 transition-duration میزان مدت زمان اجرای انیمشن 

transition-function-timing » افکت هایی برای اجرا کردن انیمشن که معمول ترینشون linear  هستش

transition-delay » میزان تاخیر در زمان اجرا

پراپرتی   animation : name duration timing-function delay iteration-count direction fill-mode

animation-name : نام انیمشن انتخابی مون 

animation-fill-mode : برای حفظ آخرین وضعیت  که مقادیر فووروارد  و بکوارد میگیرد

animation-itreation-count : تعداد دفعات تکرار برای انیمشن امون هستش که مقدار عددی یا بینهایت  میگیرد

animation-play-state :   برای ایجاد دکمه پاز  و پلی و اجرا شدن 

@keyfram  برای  درست کردن انیمشن هامون باید بیایم و از این ویژگی استفاده بکنیم 
به این صورت که بعد از این کلمه رزروی باید بیایم و نامی رو براش قرار دهیم که نام انیمشن امون هست و بعد با 
استفاده از درصد‌ها از صفر تا 100 درصد و یا با استفاده از 
from {}  to {}  استایل هایی برای ساخت انیمشن هامون درست کنیم