آموزش Responsive CSS گردش کار با Sass ، Bourbon و Susy

سرفصل ها و درس ها

مقدمه Introduction

• خوش آمدی Welcome

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

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

1. شروع کار 1. Getting Started

• ساس چیست؟ What is Sass?

• چگونه Sass کار می کند How Sass works

• بوربون چیست؟ What is Bourbon?

• تجزیه و تحلیل گزینه های گردش کار Analyzing workflow options

• تنظیم ساختار پوشه Setting up a folder structure

• کنترل نسخه اضافه می شود Adding version control

2. کار با مدیران بسته 2. Working with Package Managers

• با استفاده از node.js npm با pack.json Using node.js npm with package.json

• پیکربندی pack.json Configuring package.json

• استفاده از Bower با bower.json Using Bower with bower.json

• پیکربندی bower.json Configuring bower.json

3. تنظیم گردش کار با Grunt.js 3. Setting Up a Workflow with Grunt.js

• پیکربندی gruntfile.js Configuring gruntfile.js

• اولین کار خود را ایجاد کنید Creating your first task

• تماشای کارهای خودکار Watching for automated tasks

• به حداقل رساندن JavaScript با Uglify Minimizing JavaScript with Uglify

4. داربست HTML خود را 4. Scaffolding Your HTML

• آنچه شما در حال ساخت What you'll be building

• تهیه دارایی Preparing the assets

• داربست هدر و پاورقی Scaffolding the header and footer

• اضافه کردن یک بخش قهرمان Adding a hero section

• درج مطالب اصلی Inserting the main content

• اضافه کردن توصیفات Adding testimonials

5. اصول ساس 5. Sass Principles

• Sass خود را با استفاده از پارتیشن ها مدولار کنید Modularizing your Sass with partials

• ایجاد یک پالت رنگی با متغیرها Creating a color palette with variables

• استفاده از سبک های تو در تو برای منو Using nested styles for a menu

6. سبک کردن با Sass و Bourbon 6. Styling with Sass and Bourbon

• با استفاده از قلم عالی Using Font Awesome

• با استفاده از فونت های سفارشی Using custom fonts

• سبک های پیش فرض HTML Styling default HTML styles

• کنترل پارامترهای میکسین Controlling mixin parameters

7. شبکه های طرح ریزی پاسخگو با Susy 7. Responsive Layout Grids with Susy

• ایجاد یک طرح همراه اول Creating a mobile-first layout

• تنظیم پیش فرض Susy Setting up Susy's defaults

• ساختار طرح خود را شروع کنید Starting your layout structure

• با استفاده از نقاط دیدنی پرس و جو رسانه ای Using media query breakpoints

• تنظیم ناوبری Adjusting the navigation

• بهبود بخش توصیفی Improving the testimonial section

• بسته بندی پروژه Wrapping up the project

نتیجه Conclusion

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