I got asked if I could make a CodePen with the signature blockquote style of QUOTE.fm. So here we go.

The difficulty with this styling is that every line has padding on every side which is not really possible with CSS because you can’t target single lines. But somehow we can manage to pull it off with three nested span elements.

After some fiddling I asked Twitter and got a few different solutions from which I came up with this final markup. To be honest, I can’t really explain why or how it works. It’s definitely a hack and should be easier with CSS. Anyway, it works down to IE7, so I think we are good. (Okay, we need a small fix for Firefox…)

<blockquote class="quote">
    <a href="http://theamazingweb.net">
        <span class="quote-lvl1">
            <span class="quote-lvl2">
                <span class="quote-lvl3">
                    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit lorem ipsum dolor sit amet delegetur su.m Lorem ipsum dolor sit amet. Lorem ipsum dolor sit lorem ipsum dolor sit amet de.legetur sum Lorem ipsum dolor sit amet. Lorem ipsum dolor sit lorem ipsum dolor sit amet delegetur sum.
                </span>
            </span>
        </span>
    </a>
</blockquote>

.quote {
    margin: 10px 0 5px 0;
    > a {
        display: block;
        padding-left: 20px;
        font-size: 14px;
        font-weight: normal;
        color: #fff;
        line-height: 32px;
        &:hover {
            text-decoration: none;
        }
        &:active {
            position: relative;
            top: 1px;
        }
    }
}

.quote-lvl1,
.quote-lvl2,
.quote-lvl3 {
    position: relative;
}

.quote-lvl1,
.quote-lvl2 {
    padding: 6px 0;
    background: $qfmblue2;
    border-bottom: 1px solid #6ec5e9;
    .quote > a:hover & {
        background: $qfmblue2Hover;
        border-bottom: 1px solid #5bbae1;
    }
}

.quote-lvl2 {
    right: 20px;
}

.quote-lvl3 {
    left: 10px;
}

@-moz-document url-prefix() {
    .quote-lvl1,
    .quote-lvl2 {
        padding: 6px 0 5px 0;
    }
}

And here you can see the code in action try fiddling with it yourself:

Check out this Pen!

I don’t remember exactly when I started to use a CSS preprocessor, but some time has gone by since then and now I can’t really imagine myself writing vanilla CSS and pass on variables, nesting and all that cool and helpful stuff.

SASS

I took my first steps in preprocessor-world with LESS before I later switched to SCSS, because it seemed more popular, better maintained and all around more capable. SCSS stands for Sassy CSS and is basically SASS, but with a more CSS like syntax. This means you get to keep your beloved curly braces while the original SASS syntax completely abandons them. The SASS syntax also functions without semicolons.

I always felt both is weird and that curly braces in particular help maintaining a good visible structure in your documents.
But recently I thought I could give the SASS syntax a go and just try it and see how it turns out.

(more…)

I like how Microsoft and IE starts to actually become somewhat cool.

We all know the problem: There is no hover event on touch devices. So what happens on those devices with dropdown menus and other content that gets revealed only by an hover event?

Over the past few days I heard different people say different things so I put together a simple CodePen to check what happens. This is what I found out:

If you take an a element which has an href attribute and tap it, the hover event gets triggered. A second tap will then take you to the href location. If you just want to reveal some content or something like that, you can simply use href="javascript:;" and the second tap will do nothing.

Using a button tag will do the same thing. But with all the other elements I tested nothing will happen if you tap on them, although it has an hover effect applied.

But that leaves us with an open dropdown or whatever your hover did. And as far as I can tell there is no way to hide the hover effect other than using Javascript.

Another interesting behaviour is that if you apply an hover effect to a simple link you will see the effect for a split second when you tap the link but you don’t need a second tap. But if you position another element in the a and actually select it on hover, you’ll need the second tap to actually go to the href location. This is what happens in my “reveal a box example” below.

I only tested it with my iPhone because I don’t have an Android device. But the CodePen is openly accessible and I’d love to hear how Android behaves. Feel free to @reply my on Twitter or write a mail.

Check out this Pen!

This is a high recommended talk by Luke Wroblewski about the future and the role of mobile devices and what we can do now to make the user experience better on these devices. I also like his presentation style. Luke is calm and precise but cracks some jokes here and there. Anyway, take your time and watch this video.

I listen to a whole bunch of web development related podcasts on a more or less regular basis.

I mostly do that while commuting to and from work and it’s a nice way to get to know some people on the web and learn new things.

I made a list of my favourite ones and I hope a few of them are new to you and you’ll enjoy listening to them as much as I do. So here we go:

ShopTalkShow

This is a podcast all about frontend web design and development hosted by the web dreamteam Chris Coyier and Dave Rupert. It’s definitely my favorite web development podcast out there. They usually have a guest and talk about him/her and answer user questions. There are also special Rapidfire episodes in which the two punch through as many listener questions as possible.

The Big Web Show

The grandfather of the web, Jeffrey Zeldman, talks to all the cool and smart people on the web. There is absolutely nothing you couldn’t like about this podcast.

(more…)

We all know this delay when tapping a link on a mobile device and it can be annoying.

Okay, to be fair it’s really just 300ms. But nevertheless you can feel it and especially when crafting a mobile web app you need everything as fast and smooth as possible. The delay basically exists because the browser is waiting to check if the user is performing a double tap.

If you’re building a web app you rarely need that functionality on a link, so it would be nice to get rid of the delay. And that’s what fastClick.js is here for. It’s a simple JavaScript plugin that was developed by FT Labs.

The question if this functionality is worth loading 20kb of JavaScript is yours to answer and may depend on the project you’re working on.

To show you how it works I made a CodePen. It goes without saying that you need to open this url on you mobile device, right?

// Loading fastclick.js as external js file

window.addEventListener('load', function() {
  new FastClick(document.body);
}, false);Check out this Pen!

We all know the problem that an element, that contains floating elements can’t be centered with margin: 0 auto; because it has no real width. But there is something coming our way that will change this situation for the better: fit-content

Just apply fit-content to the container of floating elements and oh see, you can use margin: 0 auto;

    

        
Lorem ipsum
        
Dolor sit amet
        
Constetetur
    

.container {
    width: 600px;
}

.list-centered {
    margin: 0 auto;
    width: -webkit-fit-content;
       width: -moz-fit-content;
            width: fit-content;
}

.list-centered li {
    float: left;
}

Browser support is, as one could expect, poor at the moment but the cool things always start out like that. So if you know you’re only building for Chrome and Firefox you can go ahead and use it right now.

I made a CodePen to show it in action:

Check out this Pen!

With HTML5 we got new HTML elements like header, footer, article to only name a few. These are elements for commonly used content types. So recently I asked myself why isn’t there a logo element? It’s pretty much save to say that every website has a logo in some form or shape so wouldn’t a logo element in combination with header, article, etc make total sense?

    
        
The Amazing Web
    
    



    ...

Inside the logo element tags there could be everything you want. It could be a simple h1 or an image or you could simply use the logo tag and apply a background image to it. Every screen reader and search engine could perfectly detect it and everybody wins.

So I wonder, is there something I overlooked or don’t know of? Hit me up on Twitter, Facebook or simply via mail. Thanks!

Hey, I build a fun, simple one-pager with AngularJS and the dribbble API. It’s called GiveMeSomethingToCode.

Have some spare time and just want to code something and don’t know what? Then GiveMeSomethingToCode is for you. It displays random dribbble shots that you could code. It suggests to create a Pen on CodePen so you can start right away and easily share your code.

I always thought there should be a connection of some kind between dribbble and CodePen. Maybe this is a start in this direction.

Happy coding!

(You can find the code on GitHub if you want to have a look or fork it.)

Apparently compass doesn’t remove comments which are formatted like the following example when you compile your SCSS; no matter which output_style you define in your config.rb.

/*! This comment will stay here forever */

This took me a while to figure out. Hope this saves you some precious time.

Have some time left on this cold but sunny weekend? Have a look at this great talk by Jonathan Snook from Smashing Conference last year in Freiburg.