A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$ if your browser aliases it:
~ 108 byte version
| /** | |
| * An implementation for Mergesort. Less efficient | |
| * than Quicksort. Again, you'd just use Array.sort | |
| * but if you found yourself unable to use that | |
| * there's always this option. | |
| * | |
| * Tests with: | |
| * | |
| * var array = []; | |
| * for(var i = 0; i < 20; i++) { |
| class BottlesOfBeer | |
| def pluralize? n | |
| if n != 1 | |
| "bottles" | |
| else | |
| "bottle" | |
| end | |
| end | |
| def count_off |
| class BottlesOfBeer | |
| def count_off | |
| puts "How many bottles of beer have you got?" | |
| numbers = gets.chomp.to_i | |
| word_bottles = "bottles" | |
| numbers.downto(1) do |number| | |
| puts "\n#{number} #{word_bottles} of beer on the wall" | |
| puts "#{number} #{word_bottles} of beer!" | |
| puts "You take one down and pass it around," |
| @media xs | |
| .column.full, | |
| .column.two-thirds, | |
| .column.half, | |
| .column.one-third, | |
| .column.one-fourth | |
| float: none; | |
| margin: 0; | |
| width: 100%; | |
| *, *:before, *:after | |
| -moz-box-sizing: border-box | |
| -webkit-box-sizing: border-box | |
| box-sizing: border-box | |
| .container | |
| margin: 0 auto | |
| max-width: 960px | |
| width: 90% | |
| .column | |
| float: left | |
| margin-left: 5% | |
| &:first-child | |
| margin-left: 0 | |
| .column | |
| float: left | |
| margin-left: 5% | |
| &:first-child | |
| margin-left: 0 | |
| &.full | |
| width: 100% |
| .row | |
| overflow: hidden | |
| margin-top: 1.5em | |
| &:first-child | |
| margin-top: 0 |