Fluidity

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

Download Fork Tweet

Examples

Responsive images

placeholder kitten

Example code

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

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


<div class="overflow-container">
  <pre>
    <code>
      ... Code here ...
    </code>
  </pre>
</div>
          

Responsive canvas elements

Example tweaked from HTML5 Canvas Tutorials...

Responsive iframes