Tag Archives: Tool

Introducing CSS Modal

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:

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!

Yeoman – Level-up Your Daily Workflow


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

HTML5 Boilerplate – v4.0.0


HTML5 Boilerplate is out with the new version 4.0.0. There were some significant changes since the last version that are listed up in the changelog (also see below). Most of them because of the excellent work by Nicolas Gallagher – thanks for leading HTML5 Boilerplate with such great effort. What’s new? This was done throughout the last seven months of development and resolving bugs: Add documentation in a separate folder – everything that is directly concerned with the project was moved from the wiki Switch from Public Domain to MIT license Separate Normalize.css from the rest of the CSS Improve

Read more

An Approach on Building an Advanced Initial Boilerplate


Since some time I found myself defining a good starting point for a new project over and over again. While I use HTML5 Boilerplate in nearly all of my projects it’s not enough as an initial package. Since I’m using SASS (in its dialect SCSS) and have some other things I define over and over again I decided to set up a package that lets me start easily and includes a lot of tools that are necessary for my projects. This is an introduction to init, the starting point for projects that require a bit more than just HTML5 Boilerplate.

Read more

Is Mothereffin’ jQuery Up?


Some weeks ago I made a pull request for HTML5Boilerplate which should update jQuery to the latest version available on the Google CDN. How ever I copied the old version of minified jQuery because the uncompressed version was available but the minified wasn’t. Stupid thing! That’s why I created Is Mothereffin’ jQuery up? The service checks three major CDNs for the availability of the latest jQuery version. View Is Mothereffin’ jQuery up? How to Check if the File is up I had some difficulties to find the right method how to detect if a file is already available with JavaScript.

Read more