Responsive elements makes it possible for any element to adapt and respond to the area they occupy. It's a tiny javascript library that you can drop into your projects today. Download on Github Tweet

Design must reflect the practical and aesthetic in business but above all... good design must primarily serve people. Thomas J. Watson Chairman and CEO of International Business Machines





Design must reflect the practical and aesthetic in business but above all... good design must primarily serve people. Thomas J. Watson Chairman and CEO of International Business Machines 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.

If you understand responsive web design, you already understand what is happening above. The element (the quote) is aware of it's own width. It responds and adapts to increasing or decreasing amounts of space.

How it works

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}

Usage

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}