There is a long tradition of polls on CSS-Tricks. They are fun, gather good important data, and increase people's connection to the site. Engagement FTW!

We go grab the markup from the live v9 site for some stuff to work with. We fiddle with some spacing stuff to make the module look better for the type that they are. For one, we decrease the amount of padding on modules in sidebars, and we remove it entirely for image ads.

Our poll choices are marked up in a list, which makes fine sense, but that comes along with some unwanted styling. So we rejigger how and where we apply list styling. We spend a good amount of time tweaking little typographic things to make the poll choices look good and be easy to interact with. We fix some issues with buttons as well, specifically preventing them from breaking in between words and having the hover color consistant despite what element the class name "button" is applied to.

We break off module styling into it's on SCSS file so that when we're doing module-specific styling we can jump right to that file. The global file was just getting too big, which is always a good sign some splitting is a good idea for our own sanity.

Comments

  1. John Lueders
    Permalink to comment#

    There is a nice Sublime Text 2 plugin called BracketHighligher. It helps find the opening/closing brackets for current cursor position.

    • Chris Coyier
      Permalink to comment#

      Does it do stuff beyond what Sublime Text 2 does already? Just out of the box it does do a thing where it puts a little underline around the opening paren when you cursor is next to the closing one (or bracket or whatever). Does this do something beyond that?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.