Responsive images
Example code
<img src="http://placekitten.com/2400/700" alt="placeholder kitten">
Examples
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>