Clearing LESS Cache for Development

If you’re developing with Twitter Bootstrap (LESS), you may notice that sometimes changes you make in your .less files do not take effect (this is under the assumption you’re not compiling your CSS with a tool like CodeKit).  Clearing your browser cache does nothing and uploading new files doesn’t help.  We started using a quick little snippet (we love snippets) to stop this problem:

<script type="text/javascript"> localStorage.clear();</script>

As you can probably tell, this line clears localStorage – a component of HTML5.  Use this throughout development, and make sure you compile your CSS once you’re ready to push a production site live!

Using WordPress filters to modify Contact Form 7 Output

We at Rolling Lab like to use WordPress plugins. Using them means we have to do less coding, meaning you pay less and your projects are completed sooner. Sometimes though, plugins don’t do exactly what we want them to.

Take for example a recent occurrence we had while redeveloping the contact section on our site. We’ve always used Contact Form 7 as it has a good backend UI, and for the most part outputs what we want. Plus it’s free compared to it’s main competitor (Gravity Forms). The one problem we’ve always had with it, is that it wraps </p> tags anytime there was a carriage return in the backend editor. Continue reading “Using WordPress filters to modify Contact Form 7 Output” »

Re-Writing Our Responsive WordPress Template

Giving the ol’ Responsive WordPress template a re-write. We’ve always been a fan of 320 and up, so we’re starting with that as a base and integrating our favourite WordPress tricks. Oh, and we’re picking up SASS while we’re at it.

Feel free to follow Paul’s progress here at Paul Ruescher’s Github account

Tooltips using :before and :after

Confession: I love adding too many features to a website.  I always have to consciously remind myself that less is more.  Feature creep?  More like feature beast mode.  So when we launched the Rolling Lab site, I immediately wanted to add something.  Linen backgrounds?  Yes.  CSS3 Animations.  I want.  Canvas?  Moar (sic).  I decided against all of those ill-advised ideas, and settled on something that we can all agree on.  Hover tooltips.   The little things make the biggest difference, right?

So where do you start?  Well, you could just place a title attribute in certain links and call it a day.  But that would be so un-web 2.0, right?  Correct.  We could write some JavaScript.  And that would be fine, but you know what?  We can get away with something a little (in my opinion) better.  CSS3 and data attributes.  Data attributes are so HTML5 and hip and trendy.  So where do we start?

First off, why use the data attribute?  For me, it’s a way to eliminate an element.  For example, you could have a link wrapped around a span.  From there you could do some CSS to hide that span, position it relative to the anchor, and then use a :hover selector to show the span on a hover.  Not bad, I’d rather just have something like <a href="http://rollinglab.com" data-tooltip="Click Me To Go Home">Home</a>. So what that in mind, let’s get to a code block!

HTML

[html]<a href="https://twitter.com/paul_ruescher" class="tooltip icon twitter" data-tooltip="Twitter"></a>
<a href="https://github.com/paulruescher" class="tooltip icon github" data-tooltip="GitHub"></a>[/html]

CSS

[css].tooltip {
position: relative;
}
.tooltip:hover:before {
content: ‘ ‘;
position: absolute;
top: 28px;
left: 6px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #45C6F0;
}
.tooltip:hover:after {
content: attr(data-tooltip);
padding: 0 10px;
position: absolute;
top: 35px;
left: 0;
background: #45C6F0;
color: #FFF;
text-align: center;
text-indent: 0;
text-transform: capitalize;
line-height: 25px;
font-weight: bold;
white-space: nowrap;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}[/css]

Neat, right? The basics first. Our .icon class has position set to relative, so any children – our :before :after selectors – can be positioned relative to .icon. :before is our CSS triangle that points up and :after houses our tooltip. Everything within :after should be fairly straight-forward. The one key thing to note is content: attr(data-tooltip). It’s fairly self-explanatory: it takes the information within our previously set data-tooltip. Cool! I have this setup on our homepage for our social media icons in our biographies. Hover over the twitter icon in my bio and you should get a tooltip with the label ‘Twitter’.

It doesn’t take a lot of work, but I definitely like little details like this. Some icons – like GitHub – are not very obvious to everyone. But a quick hover, and you give your users a lot more information than they typically would receive.

Form Fields and Width: 100%

One thing I ran into when I first started doing responsive design was the misalignment of input and textarea boxes. For example, you’d think the following code would be self-explanatory.

input,
textarea {
     border: 1px solid #ccc;
     -moz-border-radius: 2px;
     border-radius: 2px;
     width: 100%;
}

But it’s not. You end up with a small overlap, exhibited in the image below.

You can see that the textarea is slightly wider than the input[type="text"] box. What causes this? In Chrome, there is 2px of padding on a <textarea> element, and 1px of padding on a <input> element. You could just set your own padding amount and then adjust the width. The problem with that is I don’t want to set the padding to a static amount (say 0.2em) and then have the width be a percentage.

Instead, set the box-sizing property to border-box:

input,
textarea {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     border: 1px solid #ccc;
     -moz-border-radius: 2px;
     border-radius: 2px;
     width: 100%;
}

Now, when the width is set to 100%, the padding is disregarded in the calculation of the width.

Boom! Easy. Support is good too – IE8 and up – as long as you use vendor prefixes. So next time you’re running into width issues on a responsive design, just throw in box-sizing.

Australian Open Finals

You can guarantee that the Rolling Lab team is watching the Australian Open Finals right now. You should be too. This is great theatre.

View As Analog

One of the most productive things I’ve ever done is to set the clock on my computer to analog. Top-right corner of OS X, click on the time, and then click ‘View As Analog’. If you happen to look up, you get a general sense of the time, but not the specific time. This has helped so much. Instead of realizing it’s 2 AM and then thinking it’s bed-time, I look up and get a general idea of the time and continue working.