Fluidity

HTML is almost 100% responsive out of the box. These 115 bytes of css fix the 'almost' part.

Download Fork Tweet

Examples

Responsive images

Example code

<img src="http://placekitten.com/2400/700">

Responsive tables

First Name Last Name Twitter Handle Favorite Food Favorite URL Favorite HEX Favorite Cat Second Favorite Cat Third Favorite Cat
Adam Morse @mrmrs_ Pizza http://☠☣.ws #C0FFEE Francesca Jasper Sappho
Connor Sears @connors Pizza http://goratchet.com #0074d9 Grumpy Jasper Sappho
Mark Otto @mdo Pizza http://getbootstrap.com #069 Bubba Smelly Sappho
Jxn Blk @jxnblk Hamburger Buttons http://catfinity.com #111111 Francesca Jasper Sappho
Kristofer Joseph @dam Pizza http://topcoat.io #ddaa13 Francesca Jasper Sappho

Example code

            
<div class="overflow-container">
 <table>
   <!-- table contents -->
 </table>
</div>
            
          

Responsive preformatted text

            
# Add the strings before and after around each parm and print
def surround(before, after, *items)
    items.each { |x| print before, x, after, "\n" }
end

surround('[', ']', 'this', 'that', 'the other')
print "\n"

surround('<', '>', 'Snakes', 'Turtles', 'Snails', 'Salamanders', 'Slugs',
        'Newts')
print "\n"

def boffo(a, b, c, d)
    print "a = #{a} b = #{b}, c = #{c}, d = #{d}\n"
end

# Use * to adapt between arrays and arguments
a1 = ['snack', 'fast', 'junk', 'pizza']
a2 = [4, 9]
boffo(*a1)
boffo(17, 3, *a2)
          
        

Example code


<pre> <code> ... Code here ... </code> </pre>

Responsive canvas elements

... Example tweaked from http://www.html5canvastutorials.com/tutorials/html5-canvas-images/...

Responsive iframes