Introducing CSS Modal

by
CSS Modals in action

In the last couple of months I’ve worked on several projects that needed an overlay with some content on it. Some front-end frameworks as for example Bootstrap refer to them as modals.
You can find a lot of implementations that do exactly what I search for but they all have one major drawback: They rely on JavaScript.

Yes, sure, everyone has JavaScript enabled these days but why use a technique that you don’t necessarily need for a given problem? Also most implementations have drawbacks when it comes to mobile devices and responsive web design in general or accessibility. Apart from that they add a lot of code, that is not necessary for a lot of pages. Others might add dependencies such as for example jQuery which you don’t need at all on your micro-site.

To tackle these problems I decided to write my own implementation of a modal that fulfills what I need.

Modals built out of pure CSS

CSS Modal is the result of this experiment.

Here is what is cool about it:

  • CSS Modal is built out of pure CSS while JavaScript is only for some sugar.
  • The modals are designed using responsive web design methods.
  • It is accessible, cross-browser, media-adaptive, small and fast!

Another cool thing is that you can use CSS Modal as Sass plugin and apply it to your custom classes using Sass placeholders.

Visit the website     View an example

Check out the website to get documentation and more examples. The project is on GitHub so if you use it and find bugs, please report them.

General feedback is also very welcome. Please tweet me!


Printing The Web

by
Printable Websites - some books

While it is possible to consume nearly all means of content on your smartphone or tablet it seems like the dream of a paperless office comes true for a lot of web developers. But digital natives are not the only ones who are on the web. There are still some people that like to print web sites on paper. Once you are aware of that you might want to include a dedicated print stylesheet into web sites you build. Here is some advice on what you can do to get the best out of your page. Disclaimer: This article was

Read more


Speaking Engagements, the .net-Awards and Freelancing

by

Here is a quick overview of my current status and why there are little updates in the blog. Also some great news. Talking at Conferences As you know, if you follow along my stuff, I spoke about coding guidelines at TalkOff Conference in Lille, France in January this year. The conference was organized very well and I had a lot of fun. Besides that I met a lot of great people. Thanks again for the invitation. You can find the slides here. I am also very happy to be invited to UX Munich where I will speak about style guides

Read more


TakeOff Conference: Talking About Good Code →

by

Yesterday (17. January 2013) I was talking at TakeOff Conference in Lille, France. I actually extended my talk from the Fronteer’s Jam Session “Writing Awesome Code” with lots of new stuff. So check out the slides. There will be a video with the actual talk that is not online yet. I will post it here when it is.

See slides

Just a few words concerning the conference: The organizers are doing a great job here and the speakers are really good. If you’re not here, you are missing out on something :)


The REM Fallback with Sass or LESS

by

Since a while now word has spread to use the CSS unit rem for font-sizes and values in CSS. Here I want to explain how you can use a fallback in Sass or LESS to get rem working in all browsers. View Gist with mixins Why rem? Let’s look into what rem means. We know of the em unit which is relative to the font-size of the parent element it is defined on. This means if one of the parents in the DOM-tree changes its font-size, the font-size of the child element changes too. In contrast the rem unit is

Read more


Working Draft Revision 100 →

by

Working DraftIt’s been over two years now – with our podcast Working Draft we have done 100 revisions. Congratulations to ourselves!

We recorded revision 100 on Monday and had a very special guest: Paul Irish. That’s why we recorded in English this time. The final podcast is now live and can be downloaded. Check it out and let us know what you think.

Listen to WD Revision 100

Here are the topics we talked about:


New Resource for Web Devs: The Nitty Gritty →

by

Yesterday Kahlil Lechelt and I launched The Nitty Gritty, a new blog and resource for web developers about the cutting edge in HTML, CSS, JavaScript and web technology in general.

Visit The Nitty Gritty

About the idea of The Nitty Gritty Kahlil writes:

For a few years now, I’ve been watching my friends in the web development community write highly informative and well researched articles on their personal blogs, or as contributing authors writing articles for the blogs of their friends and colleagues.

We met at Smashing Conference back in September this year and talked about the idea of The Nitty Gritty. After some months of development we are now ready to present this idea to you.

So, cutting a long story short, we decided to execute on the desire to create a central hub for developers, hence The Nitty Gritty (TNG) was born and now we are about to wake this beast up.

I am very excited about our new project and hope so are you. I really hope that we can deliver high quality content within the next months. And hey… we already have some great articles coming up in the next few weeks

[…] including the performance pope Schepp, Yeoman core contributor Sindre Sorhus, and the maker of Kirby, Bastian Allgeier.

I have written a post myself about decoupling CSS by using placeholders in Sass which will be published today.

We would be pleased if you let us know what you think about this idea on Twitter. And make sure you follow @_thenittygritty! :)


Conferencing and Test The Web Forward

by

Within the last weeks I had the pleasure to attend some of the most valuable conferences in our business and meet awesome people to chat with. Finally I want to share some of my experiences and invite you what’s coming next. Smashing Conference Back in the end of September I attended Smashing Conference, set up by Smashing Magazine and Marc Thiele with some high quality speakers in beautiful Freiburg, Germany, the city where I’m currently living. Focusing on web design and development the smashing way this conference had a variety of topics from the latest secrets of CSS, on the

Read more



Yeoman – Level-up Your Daily Workflow

by
yeoman-300x200

After Yeoman was announced in the end of June while it was still in private beta developers were looking forward to use it soon. It was introduced as a tool that helps developers building web-apps while not having to care too much about the general boilerplate-coding to build a solid base for every project and to help performing tasks to bring your project into production. Now that Yeoman is available for everyone as Open Source the question how to use it in daily projects arises. I’ll try to give you a short overview on what you can expect from it

Read more