Design must reflect the practical and aesthetic in business but above all... good design must primarily serve people.
Design must reflect the practical and aesthetic in business but above all... good design must primarily serve people.
As ironic as it is, I was too lazy to build a proper mobile based demo. Please check this out on your desktop. It'll save me tons of time having to build a mobile version of the demo.
The above demo element has the following classes attached to it. Go ahead and drag the slider to see these classes update.
gt50 gt100 gt150 gt200 gt250 gt300 gt350 gt400 gt450 gt500 gt550 gt600 gt650 lt700 lt750 lt800 lt850 lt900 lt950
These classes hold information. They tell you how big your element is. Classes are prepended with either 'lt' or 'gt' which stand for 'less than' and 'greater than'. These classes always reflect the real width of the element. That is what makes responsive elements possible.
A class of 'gt300' means the element has a width 'greater than' 300 pixels. Here is some example CSS to color our element red when the width exceeds 300 pixels:
.quote.gt300 {background: red}
Or color it blue when its width is 'less than' 500 pixels:
.quote.lt500 {background: blue}
Or combine them both by chaining another class. Here's the CSS to color the background yellow when the element is greater than 250 but less than 600 pixels:
.quote.gt250.lt600 {background: blue}
1.Load jQuery and responsive-elements.js right before your closing </head> tag.
<script src="jquery.min.js"></script>
<script src="responsive-elements.js"></script>
2.Explicitly declare which elements you want to be responsive using a data-respond attribute.
<div class="quote" data-respond>
3.Use 'less than' and 'greater than' classes as breakpoints to write responsive CSS.
.quote.lt500 {background: blue}
.quote.gt150.lt300 {background: red}