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:

  • 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!

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 and what will be helpful. If you haven’t had a look at it this article might help you.
Continue reading “Yeoman – Level-up Your Daily Workflow”

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.

HTML5 Boilerplate v4.0.0 - Star

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 console.log protection
  • Replace hot pink text selection color with a neutral color
  • Nicolas introduced a better image replacement technique
  • Code format and consistency changes (<3!)
  • Remove superfluous inline comments
  • CSS file and JS files & subdirectories were renamed
  • Update to jQuery 1.8 and Modernizr 2.6.1.

From the Changelog

Sadly we could not integrate Grunt.js into the project with some simple tasks because we had to face certain problems when it comes to integrate the CSS file that is build by Grunt into the repository and other impediments.

Now HTML5 Boilerplate 4.0.0 is out and I’d encourage you to view the source, learn and contribute.
If you find bugs or potential pitfalls please let us know in the issues.
Cheers to the H5BP community and especially all HTML5 Boilerplate contributors.

Apart from HTML5 Boilerplate Alex Gibson, Nicolas and others updated Mobile Boilerplate to version 4.0.0, so go and check it out too!

And another thing: Both HTML5 Boilerplate and Mobile Boilerplate have a new website which looks kinda awesome, I think!

Download from GitHub

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.

Visit project on GitHub       Download

Not just HTML5 Boilerplate …

With HTML5 Boilerplate we are creating an awesome starting point for front-end developers that want to use a solid boilerplate that has defaults that are useful for everyone. Besides that we want to keep it simple and straightforward. That’s why adding a preprocessor or complex dependencies to HTML5 Boilerplate is not possible.

For the team I’m working with at /gebrüderheitz and me it’s important to have a solid basis for projects we do that we can use over and over again. Other developers have this need too and that’s why there is Twitter Bootstrap or ZURB’s Foundation (just to name two) out there.
Just while developing this project my buddy Kahlil came up with a nearly similar approach: HTML5 Boilerplate on Crack. He has different things in his package then init has. Keep an eye on that.

Simplify Development

For init I decided to use Grunt.js as a development- and deployment-tool. Grunt is a Node.js based task-oriented tool that simplifies developing and deploying JavaScript a lot. Since Grunt has a big and valuable community there are a lot of plugins that you can use with it to help developing HTML and CSS too.
Currently we are thinking about including Grunt into HTML5 Boilerplate, which is a great step in moving the project to the next stage.

As stated before I love using SASS as a preprocessor and I have some structure I like to apply to my SCSS-development files which I already outlined in my post about my personal coding guidelines. This requires to have Ruby installed on your local machine to compile SCSS into a CSS-file or to use a tool like CodeKit that does everything for you. I am actually a big fan of CodeKit but also like to have the compilation as part of my whole build process for a website.

SCSS compilation is integrated in init’s Gruntfile.
By running grunt watch you start a process which watches for changes in your SCSS-files and compiles the CSS-file automatically unsing Sindre Sorhus’ awesome Grunt-plugin grunt-sass. Besides that the watch-task recognizes changes in your JavaScript files and lints them on the fly.

If you’re not dependent on any special server-environment you can easily fire up ./server.sh on your console to start a small Ruby-server with a tab in your favorite browser.

There are a lot of other goodies in the project. Please visit GitHub and read the project’s readme-file for more information.

I’d also encourage everyone to keep an eye on Yeoman since I think it can do a lot more then my package does and will be awesome. It will be available soon.

It’s Open Source

This project is Open Source and I would love to see some people chiming in and discussing the project in its current state to make it better. I’d love to get some feedback from all of you!

Apart from that please feel free to use it for your projects. It’s all under MIT License and thus pretty much there for all your needs.

Thanks for being awesome, community <3!!

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. If you don’t have to deal with cross-domain requests this is not a big thing and done pretty easy. But I need cross-domain requests.

If a file is not available on a server, the request dies with an error 404 and no callback will be called. See this Fiddle for a test-case. Even a try-catch-expression does not help.

I decided to check all files for availability and if the request ends up in an error nothing will happen. The script will check if all files are available after three seconds and will otherwise “tell” the user that it’s not. This is not a bullet-proof method as it could take more then three seconds to request all files. If you have a better idea please let me know.
For the moment the resources will be labeled as “available” when they are loaded even if they were labeled “not available” before. So you will not end up with wrong result, it just may take a second more to show you that.

The Styles

The project was build “mobile-first”. It makes use of the CSS3 Flexible Box Model instead of float and all the other stuff.

I’m not supporting IE in any way because I think most web-developer don’t use Internet Explorer.

Todo

  • Support more libraries such as Mootools, Dojo, Prototype, ExtJS and YUI
  • Let users submit other CDN via a form
  • Link buttons to their libraryDone with this commitsuggestion by Mathias

Let me know if you want some other features.

Contribute via GitHub

I’ve put this project up on GutHub. Feel free to contribute or just watch it.

Feature requests can also be placed in the issue-tracker there.