پیشنهاد فرادرس

طراحی واکنش گرا CSS با Sass و Compass

دسته بندی ها: آموزش های لیندا (Lynda) ، طراحی وب واکنشگرا ، آموزش طراحی وب ، آموزش Sass ، آموزش CSS

طراحی-واکنش-گرا-css-با-sass-و-compass

در این آموزش تصویری با طراحی وب واکنشگرا (Responsive) با استفاده از Sass و Compass آشنا می شوید.

این دوره آموزشی محصول موسسه Lynda می باشد.

سرفصل های دوره آموزشی:

  • Sass و Compass چیست ؟
  • تجزیه و تحلیل گزینه های workflow
  • راه اندازی ساختار پوشه
  • استفاده از Node.js با package.json 
  • تنظیم Workflow با Grunt
  • با بارگذاری مجدد ،  مرورگر خود را ذخیره کنید
  • اضافه کردن Susy برای شبکه ها
  • کار با HTML
  • قرار دادن محتوای اصلی
  • اصول Sass
  • ایجاد یک پالت رنگ با متغیرهای برنامه
  • اضافه کردن فونت های سفارشی
  • ظاهر طراحی شده با Sass و Compass 
  • ساخت CSS
  • کنترل پارامترهای Mixin
  • شبکه واکنش گرا با Susy
  • راه اندازی پیش فرض Susy

مدت زمان: 3 ساعت و 22 دقیقه نویسنده: Ray Villalobosلیست سرفصل های دوره آموزشی:

Using a framework helps simplify your workflow and makes writing CSS fun again. Learn how Compass (powered by Sass) can help you build responsive layouts that are easier, faster, and more compatible than using CSS alone. In this course, Ray Villalobos shows how to automate your workflow with Grunt.js, scaffold your HTML, modularize your Sass with partials, and get started styling with variables and mixins. Plus, learn how to create a mobile-first grid with Susy—without adding nonsemantic HTML markup.

Introduction 3m 4s Welcome 1m 8s What you should know 1m 11s Using the exercise files 45s 1. Getting Started 26m 48s What is Sass and Compass? 6m 17s Analyzing workflow options 3m 16s Setting up a folder structure 4m 19s Adding version control 5m 14s Using Node.js npm with package.json 7m 42s 2. Setting Up a Workflow with Grunt.js 31m 52s Creating your first task 8m 48s Watching out for automated tasks 5m 8s Reloading your browser on save 6m 16s Setting up a config.rb file for Compass 10m 3s Adding Susy for responsive grids 1m 37s 3. Scaffolding Our HTML 30m 38s What we'll be building 2m 19s Preparing our assets 6m 21s Scaffolding the header and footer 9m 6s Adding our speaker info 5m 43s Inserting the main content 7m 9s 4. Sass Principles 21m 43s Modularizing your Sass with partials 5m 10s Creating a color palette with variables 5m 30s Understanding Compass imports 5m 54s Adding custom fonts and icons 5m 9s 5. Styling with Sass and Compass 30m 28s Styling our base partial with variables, selector helpers, and parent selectors 8m 57s Making your CSS more semantic 6m 49s Controlling mixin parameters 6m 40s Creating a mobile-first layout 8m 2s 6. Responsive Layout Grids with Susy 56m 39s Setting up Susy's defaults 6m 30s Starting our layout structure 8m 34s Modifying our secondary content 4m 36s Displaying content on media query breakpoints 9m 57s Adjusting our navigation 6m 22s Improving our Speakers section 9m 52s Finishing our layout 10m 48s Conclusion 1m 7s Next steps 1m 7s

عنوان دوره: Lynda - Responsive CSS with Sass and Compass with Ray Villalobos حجم فایل: 425MB

آیا این نوشته را دوست داشتید؟
Lynda Responsive CSS with Sass and Compass with Ray Villalobos

پیشنهاد فرادرس