Learn Susy

The only framework that's truly flexible

Get good with Susy, fast

The bad part about Susy? It can be too flexible.

There is so much going on that it becomes confusing and overwhelming for beginners. The quickest way to master it, is to learn from someone who knows the ins and outs of Susy.

Unfortunately, it’s rare to find in-depth tutorials and resources about Susy. It was even harder when I started over a year ago. I spent countless hours poring over documentation, testing mixins and functions and trying out examples just to get a solid understanding of how everything worked.

You don’t have to do that. I complied everything I know about Susy into Learning Susy. And I know that it’ll help you reduce your learning curve.

Here are some things you’ll learn:

  • How to make a responsive layout with Susy
  • How to configure Susy settings to get your layout
  • How to use functions and mixins to make your code much cleaner
  • How to use other frameworks and still use Susy for its grids and flexibility.
  • How to combine Susy with CSS knowledge to solve real world layout problems.
  • and much more…

This book will teach you everything you need to know about creating layouts with Susy.

After going through the book and videos, you’ll never have to pore over the documentation or spend hours searching through Stackoverflow to figure out how to make Susy work ever again.

Grab 7 Free Chapters

These 7 chapters will help you walk you through how to setup a Susy project and teach you how to make a real-world layout you can use for your projects.

It’s completely free, and a great introduction to Susy.

What Others say

Learning Susy is the most amazing resource for the Susy grid framework. Definitely worth the buy!

Really digging what Zell has put together on the Susy framework

Learning Susy gave me a complete overview in implementing and using Susy 2. It gave much more indepth information than the internet can provide because all the knowledge you need is collected and put together in one place

Learning Susy it gave me a deep understanding of Susy and it contains a lot of tips, tricks and lessons on how to build responsive websites. I highly recommend it!

Table of Contents

  • Introduction
  • Creating Your First Project
  • The SCSS Syntax
  • The susy Map
  • Your First Layout
  • Susy Context
  • A More Complicated Layout
  • A More Complicated Layout (Part 2)
  • Media Queries
  • Breakpoints With Susy
  • Susy Background Grid
  • Building A Responsive Layout
  • Understanding Gutter Positions
  • The Isolate Technique
  • Asymmetric Grids with Susy
  • Asymmetric Grids with Susy (Part 2)
  • Static Grids With Susy
  • Susy Settings
  • Multiple Susy Grids (Bonus)
  • Susy Shorthand (Bonus)
  • Handling Complex Contexts (Bonus)
  • Sass Architecture (Bonus)
  • Integrating Susy with UI Kits (Bonus)
Zell Liew

About The Author

I’m Zell. I’m a freelance web developer and I have been using Susy 2 for over a year. I care about good design, code quality, making cool stuff and most importantly, teaching people what I have learned.

I came from a business background and I only started to code at the age of 25 without any previous education in computing-related courses.

The Full Package

Everything you'll need to become a master at Susy. It comes with 16 videos, 3 starter kits and everything else in the other packages to make sure you're well equipped to tackle any situation. You'll also learn how to integrate Susy with latest web developments like EQ.js and Flexbox through the videos.

Buy for$199

Core Materials

  • The Book (PDF)

    More than 250 pages worth of step by step instructions to learn Susy completely.

  • Mobi and ePub Formats

    Learning Susy Comes in Mobi and ePub formats for easy reading on your favourite reading device

  • Source Codes

    Who doesn't like source codes? For you to check your work and ensure you're on the right track.

Extras

  • 5 Bonus Chapters

    Learn advanced Susy concepts that will bring your Susy skills to the next level. Source codes included as well.

  • 11 Code Templates

    These code templates will help you overcome common problems and develop quickly.

  • Cheatsheet

    Important Susy information at a glance. Awesome when you need a quick reference.

  • My Starter Kit

    My personal go-to starter kit which I fire up all my sites with.

  • Foundation Starter Kit

    Susy-Foundation kit for those who love using Susy with Foundation components

  • Bootstrap Starter Kit

    Susy-Bootstrap kit for those who love using Susy with Bootstrap components

Videos

  • Building 99u (7 Videos)

    Watch how I build 99u with multiple asymmetric grids and flexbox techniques in 7 videos.

  • Building Mixpanel Blog (3 Videos)

    This series of 3 videos shows you how to use static grids combined with nth-child-jitsu to vary gallery widths like how Mixpanel does it.

  • Building Twitch TV (3 Videos)

    This series of 3 videos shows you how to build a backend interface with element queries and discusses when not to use Susy.

  • Interview with Eric Suzanne

    See how the creator of Susy uses Susy in a whacky way that's totally different from my approach.

  • Interview with James Steinbach

    James is a golden ratio fan and he shows us how he works with Susy, and how he uses Wordpress with Susy.

  • Interview with Micah Godbolt

    Micah walks us through how he uses Susy with Flexbox. Hear about visual regression and his take on Bootstrap as well.

Want to share with your team? Purchase a team license for $799 and share the full package with everyone in your team!

The Premium Package

The Premium package comes with 5 bonus chapters and 11 code templates that'll guarantee that you'll be able to use Susy masterfully in almost any situation you encounter. It also comes with a Susy cheatsheet to let you refer to quickly!

Buy for $99

Core Materials

  • The Book (PDF)

    More than 250 pages worth of step by step instructions to learn Susy completely.

  • Mobi and ePub Formats

    Learning Susy Comes in Mobi and ePub formats for easy reading on your favourite reading device

  • Source Codes

    Who doesn't like source codes? For you to check your work and ensure you're on the right track.

Extras

  • 5 Bonus Chapters

    Learn advanced Susy concepts that will bring your Susy skills to the next level. Source codes included as well.

  • 11 Code Templates

    These code templates will help you overcome common problems and develop quickly.

  • Cheatsheet

    Important Susy information at a glance. Awesome when you need a quick reference.

The Book

The option if you’re on a tight budget and still want to learn to use Susy masterfully. This is where I spend the most time and effort. The content within will help build your foundation so strong with Susy that figuring out the rest for yourself becomes much simpler.

Buy for $49

Core Materials

  • The Book (PDF)

    More than 250 pages worth of step by step instructions to learn Susy completely.

  • Mobi and ePub Formats

    Learning Susy Comes in Mobi and ePub formats for easy reading on your favourite reading device

  • Source Codes

    Who doesn't like source codes? For you to check your work and ensure you're on the right track.

Questions?

What package should I buy?
It depends on your budget. The full package is definitely the best, but the book itself has over 250+ pages of content that will build up your foundation with Susy.
What if I’m new to Sass?
It’s okay to be new to Sass and/or web development. I made this book with beginners in mind. As long as you can write HTML and some CSS, you should be fine.
Can I upgrade later?
You can upgrade anytime by paying the difference in price for your package of choice. You’ll find the instructions in a upgrade.txt file.
What if I don’t like it?
If you don’t like the book, let me know within 30 days and I’ll give you a full refund.
Where do I learn more about you?
I write on my blog. Feel free to read through the posts and learn more about how I write and teach.
Can I read about Learning Susy in other languages?
Learning Susy has been translated into Italian by Manuele Capacci. You can grab the italian version here.
You didn't answer my question.
If you have questions I didn’t cover, shoot me an email and I’ll get back as soon as I can.

Choose Your Package

The Book
Full Package
Premium Package
The Book
  • The book
  • Mobi and ePub formats
  • Source codes
Full Package
  • The book
  • Mobi and ePub formats
  • Source codes
  • 11 code templates
  • 5 bonus chapters
  • Susy Cheatsheet
  • My Starter Kit
  • Foundation Starter Kit
  • Bootstrap Starter Kit
  • 13 video screencasts
  • 3 interviews
Premium Package
  • The book
  • Mobi and ePub formats
  • Source codes
  • 11 code templates
  • 5 bonus chapters
  • Susy Cheatsheet