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 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:
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.