Responsive Design: now 90% easier with SASS!
summary
Demonstrates building a responsive site for menu + news using a 12‑column grid expressed in percentages, media queries at 800px and 640px, and tooling: SASS with the Susy grid and Compass to compile math/mixins so layout recalculation is one config change. Claims the whole layout reduces to ~20 lines of SASS, supports IE via respond.js, recommends mobile‑first CSS order to avoid wasting bandwidth, and reports the solution works across desktop, tablet and phone.
AI-written summary · about
chapters (12)
- 0:00Introduction to responsive
- 1:23The mobile landscape
- 3:48Limitations of frameworks
- 5:27Implementing grid systems
- 11:48Introduction to Sass and Susy
- 14:16Sass in practice
- 17:00Q&A and design principles
- 22:15Advanced layout techniques
- 25:58Viewport and browser support
- 29:28Mobile-first philosophy
- 33:30UX and image optimization
- 39:47Final Q&A and conclusion
related talks
57mSolving Layout Challenges With Pure Sass
47mSolving Layout Challenges With Pure Sass
42mKeeping Your HTML Semantic with SASS
59mResponsive Web Design for Developers with Visual Studio
51mCreative CSS Layout
36mDynamic CSS: Layouts & Beyond
35mThe New Rules of The Resposnive Web
26mRapid Templating: "Designing in the Browser" with Sass, Compass, and Serve