Using the Best of the Web for Responsive Design: Suzy, Gulp, and Breakpoint – Part 3

Using the Best of the Web for Responsive Design: Suzy, Gulp, and Breakpoint – Part 3

We have discussed Susy and Gulp in our three part process of our approach to Responsive Design. In this last part of the series, we will talk about using Breakpoint to handle media queries.

Media Queries

Media queries in simple terms are statements that test the type of media and evaluate it against some criteria (usually properties such as width, height or color). We use media queries to limit a style sheet’s scope so we are applying certain styles only to certain conditions. This concept is very useful in Responsive Design since we can call on the width feature to set styles and add/remove elements that should be shown/hidden for that width.

Breakpoint allows us to reduce our code needed for the media queries by:

  • creating reusable code
  • managing the media queries more systematically
  • utilize our already SASS based code
  • quickly write the needed media queries.

By utilizing Susy, Breakpoint and Gulp, we have been able to quickly, timely and efficiently make websites responsive to help them in the Google rankings and to provide our client’s users a better experience.

Missed Part 2? Read it now: Using the Best of the Web for Responsive Design: Suzy, Gulp, and Breakpoint – Part 2

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
1 + 15 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.