Susy 102 - Breakpoints (obsolete)
Tips and tricks for setting up Susy breakpoints in your project
One of the great features of Susy is that breakpoints are baked right in. You only need to tell Susy what the breakpoints are; based on columns. For example one breakpoint could occur when a screen size exceeds 4 columns, and another breakpoint could occur at 8 columns, etc.
The technique I used to set up breakpoints in Susy . . .
Susy 101 - Spanning Columns (obsolete)
Super simple example of basic Susy usage
Using Susy is pretty straightforward. Essentially it is a mixin scheme that applies a specified amount of columns to an element based on the total columns available. For example, in our Susy implementation from the previous article we specified a 12 column layout:
$total-columns: 12
Without Sussy, to execute a flexible grid we . . .
Setting Up Susy (obsolete)
In past articles I introduced the three main components of Responsive Web Design which included flexible grids. To implement a flexible grid system this article introduces Susy, a Compass-based grid system that will handle all the flexible-grid-math-calculation heavy lifting for you.
Your markup. Your design. Our math.
. . .
What Devices Should You Target with Breakpoints?
A primer on how to use breakpoints and choose the devices to target
Recently I wrote about media queries and how they can be used to serve up device sensitive styles based on logical conditions; like maximum and minimum widths, heights, screen orientation, and more.
You can use these media query logical conditions to create ranges, where when the condition is met, certain styles and content will be . . .
Responsive Web Design: Flexible Media
The basics of serving responsive images
If you read the last two articles you understand what flexible grids and media queries are, so it's time to look at the final ingredient in RWD: Flexible Media. Why flexible media? Imagine loading a 600 pixel wide image into a 320 pixel wide screen. What would happen?
Here's a practical example; using breakpoints the . . .
Responsive Web Design: Media Queries
The history of media queries and a brief explanation on how to use them
The goal of Responsive Web Design is to respond to different screen sizes with content that makes sense for the device being used. For example, maybe in smaller devices it makes sense to use a smaller font size, or a single column layout rather than a three column layout. Media queries will allow us to do this. To understand them, and how . . .
Responsive Web Design: Flexible Grids
What are they and how do you define them
Ethan Marcotte is widely credited for coining the term "Responsive Web Design" in his 2010 article, "Responsive Web Design", and in his book he defines the core components of responsive web design as follows:
So what does it take to create a responsive design? Speaking purely in terms of front-end layout, it . . .