P E S T I C I D E

Faster CSS layout debugging

Tweet

Cascading Style Sheets can be tricky.
Placing an outline on every element can help you figure out what the fuck is going on.
This little css module does exactly just that.

Fork   Download     Install on Chrome  

Using Pesticide

Chrome Extension

Toggle outlines on any website with this handy chrome extension

Local Development

Download  the css file here   and include it in your html document like so


<link rel="stylesheet" href="css/pesticide.css">

Adding a file to the head of your html document can kind of be a pain if you are toggling it on and off. You can add pesticide as a sass partial and it will only render out if you set


$pesticide-debug: true;
@import "pesticide";
  

 Grab the source   to use this method or modify it to fit your needs.

EXAMPLES

Below is a comprehensive list of html elements as well as some common markup patterns.

Resize the browser and watch how various elements change their relationship to one another.

Site title

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Links

Sample text link Sample button link

Lists

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
  • List Item 6
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
  • List Item 6
  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth
  6. Sixth
Kick
808
Snare
909
Maine
Augusta
California
Sacremento
Oregon
Salem
New York
Albany

Forms

Legend Example

Helper text if necessary.

Error messages when appropriate.

Buttons


An Example Article

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a GREAT pull quote.

- Author

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.


Code examples

      sudo ipfw pipe 1 config bw 256KByte/s
      sudo ipfw add 1 pipe 1 src-port 3000
    

Footer

New hawtness

80 %

We are this close to the goal: $824.

Random Stuff

This is for things like copyright info Content that isn't accurate or relevant anymore. Generic span wrapper HTML How to meet ladies

This is inline text with subscript and superscript elements.

f(x) = a0 + a1x + a2x2, where a2 ≠ 0

Figure Example
Photo of the sky at night. Original by @mrmrs
          /Sites/html master  ☠ ☢
          $  ls -gto

          total 104
          -rw-r--r--   1   10779 Jun  5 16:24 index.html
          -rw-r--r--   1    1255 Jun  5 16:00 _config.yml
          drwxr-xr-x  11     374 Jun  5 15:57 _site
          -rw-r--r--   1    1597 Jun  5 14:16 README.md
          drwxr-xr-x   5     170 Jun  5 14:15 _sass
          -rw-r--r--   1     564 Jun  4 15:59 Rakefile
          drwxr-xr-x   6     204 Jun  4 15:59 _includes
          drwxr-xr-x   4     136 Jun  4 15:59 _layouts
          drwxr-xr-x   3     102 Jun  4 15:59 _resources
          drwxr-xr-x   3     102 Jun  4 15:59 css
          -rw-r--r--   1    1977 Jun  4 15:59 favicon.icns
          -rw-r--r--   1    6518 Jun  4 15:59 favicon.ico
          -rw-r--r--   1    1250 Jun  4 15:59 touch-icon-ipad-precomposed.png
          -rw-r--r--   1    2203 Jun  4 15:59 touch-icon-ipad-retina-precomposed.png
          -rw-r--r--   1    1046 Jun  4 15:59 touch-icon-iphone-precomposed.png
          -rw-r--r--   1    1779 Jun  4 15:59 touch-icon-iphone-retina-precomposed.png
        

Tables

Table footer info
Tabular Data ExampleTabular Data Examples
ID Name Date Address
#999-32ac First Name 13 May, 2013 999 Spruce Lane, Somewhere, CA 94101
#888-32dd Sample Name 17 May, 1984 999 Spruce Lane, Somewhere, CA 94101

Floats

This is an image that has been floated to the left of this paragraph. The parent element that contains the image and paragraph does not have a clearfix applied to it. As you can see. All these lines tell us a few things. What they tell us, well, that is a story for another time.

Common inline-block problems

Four elements set to inline-block and width: 25%

Notice how the whitespace between the elements gets rendered, this is why the fourth element breaks to a separate line.

Div 1
Div 2
Div 3
Div 4