How-To: Lists with text-align: center and correct list-style

Let’s say you have a standard ul or ol and set it to text-align: center;. Then you get this:

I think we can agree that that’s not looking good. You could just hide the list style with list-style: none; but that might not be acceptable. Another possible way would be to hide the list styles and create your own list style with a ::before pseudo element and it’s content property.

But there is a much easier way: list-style-position: inside;

See the Pen List with text-align center and bullets by Martin Wolf (@martinwolf) on CodePen.

Weekly Recap #CW42 2014

It has been quite a while since the last Weekly Recap. I had to take a break, I’m sorry. So let’s not waste any time and get right into it. Enjoy!

Read Article …

Finding my way back to CSS without ditching Sass completely

When CSS preprocessors came out a few years ago I was blown away by the possibilities and as soon as I started to work with LESS (which I later switched to Sass) I thought that I never want to go back.

Fast forward a few years to the present

CSS preprocessors have matured and new ones have been born. After dozens of projects using Sass I feel very comfortable using it. I know what it can and what it can’t do. I know of it’s usefulness and why people, me included, love it. Despite all of that I’m currently stripping back my usage.

Read Article …

Weekly Recap #CW37 2014

It’s sunday and that means it’s time for another Weekly Recap. Get ready for some easy deployment stuff and really good CSS architecture thinking, completed with Javascript animation. Enjoy!

Read Article …

Give the US Keyboard Layout a try

I recently switched from the german keyboard layout to the US one and it’s been a blast coding with it. Give it a try yourself!

Here is the mentioned special Keyboard Layout I use to still be able to easily type characters like ä,ö,ü, etc.
EurKey: http://eurkey.steffen.bruentjen.eu/layout.html

I edited the EurKEY Layout and swapped Z and Y, here is the download if you prefer that, too:
http://martinwolf.org/_files/EurKEY-qwertz.keylayout.zip

My YouTube Channel.

CSS3 transition end listener with jQuery

As you hopefully know CSS3 transitions are a lot more performant than good old Javascript transitions. But what if you want to kick off some Javascript/jQuery when a CSS3 transition has ended?

Here is a code snippet that has done a great service for me in the past:

$('#my-div-with-css3-transition').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
    // Do your jQuery magic here
});

All those different transionend‘s are need for best browser support.

Weekly Recap #CW36 2014

Hello everyone, it sunday again and the past week flew by so quickly, I didn’t even post an article since last weeks recap. I’m sorry and hope to do better in the coming week. Anyhow, I managed to read a bunch of articles and have some recommendations for you today. Enjoy!

Read Article …

Weekly Recap #CW35 2014

Hello and welcome to another Weekly Recap full of awesome and readworthy articles about CSS, performance, code editors and more. I hope you enjoy the list as much as I did reading all the articles. Have a nice day and coming week!

Read Article …

Say hello to the new mytaxi.com

Earlier this year before I started freelancing I worked at mytaxi and was part of the website team that worked on a relaunch.

The goal was to combine the mobile and desktop sites into one awesome responsive website that worked for every device now and in the future.
The underlying CMS was Typo3 and that had to stay because of various reasons. Typo3 made us a bunch of problems but we managed to work through them.

I left before the site was finished, but a few days ago the new mytaxi.com finally went live. Although there are a few things I would have done differently if I could do it again I think it is definitely a big step in the right direction. I hope the team continues to develop the site – especially a responsive images solution is needed.

Weekly Recap #CW34 2014

Hello and welcome to the recap of calendar week number 34. The year rushes forward and we try to keep up with it. I hope this list helps you with it. Enjoy!

Read Article …

HTML5 breaking new ground for online casino games

This is a guest post from Ana Fisher.

Author Bio
Ana Fisher is a web designer who spends most of her day experimenting with CSS, Java, and HTML. She has a passion for designing apps and likes to keep herself in the loop with programming-related news. In her free time, she likes to de-stress by swimming in her backyard pool or playing online poker with her friends.

HTML5 breaking new ground for online casino games
WebRTC technology may help add a more human aspect to online matches

Read Article …