• Boilerplate- vs 52 Framework

    Vorig jaar heb ik beide frameworks met elkaar vergeleken. Hieronder beschrijf ik mijn bevindingen. Dit is helaas nog niet vertaald uit het Engels.

    52framework (52framework.com)
    This is a very ‘active’ framework that includes many great ideas like a proper grid system, lots of base CSS classes including forms, a good Reset, Modernizr, jQuery and even some Canvas support.

    52Framework

    I choose to use 52Framework, because it seems to offer the most features and of all the html frameworks I’ve seen this seems to offer the most complete package.

    Requirements

    As a test case I’ve decided to set up a simple website built using the 52Framework. Just to test it’s flexibility, I wanted it to be responsive and at most 1010px wide. Also it should show a basic page with a (html5) video player on it. I will check out the standard CSS3 classes, too.

    Installation

    After extracting the archive (compressed on a Mac so Winzip struggles with that) you’ll notice a simple html startpage that points you in the right directions regarding your project and available documentation. There is a ‘full featured html5’ page that I’ve used as a base for my own grid layout. The archive contains lots of example files that need to be cleared out before you can use the default project setup.

    The grid system

    52Framework uses a 16 column layout that is horizontally divided into rows that have a user-defined number of columns inside. The total number of column width shouldn’t exceed the parent one. So you can divide the 16 column layout up into a 10 and a 6 column, and the 6 can be divided into a 4 and a 2.

    Because of this it is not so easy to change the default width of 960px to 1010px, as was one of my requirements. The CSS for the grid is clear enough, but changing the total width means you’ll have to change the width of each column class as well. This is not very flexible, so decide for yourself how important this is.

    If you need to create a wider layout, make sure the extra pixels can be divided by 16 (for example, 1008–960=48/3=16, so 1008 is better than 1010) so each column gets a few pixels added to their width (in this example, 3 pixels).

    HTML structure

    The structure of the stuff between the tag often tells a lot about how clean and efficient the framework is set up. In case of 52, it is quite clear although not everything from the example files is needed. As you see, it starts off with a basic reset (html5doctor) followed by some standard css3 declarations. These provide defaults for rounded elements, font faces, shadows and gradients. The general Stylesheet handles things like h1-h6, left, right, p, strong etc. The Grid Stylesheet deals with the column stuff as explained earlier, and forms handles default styling of form elements.

    The few lines about video are only needed if you are going to use the provided HTML5 videoplayer (flowplayer), same goes for the canvas include at the end. Then there’s a basic HTML5 form validator and the Selectivizr script at the end to provide IE6-IE8 with CSS3 selectors. And that is all there is to it. Not bad! Ofcourse, you are going to add your own Stylesheet. You do this by including another CSS file straight after loading all the framework defaults.

    The rest of the example template is easy enough to follow, though purists may not like the overused col1-col16 definitions on every element. The example makes heavy use of HTML5-style tags as you would expect: header, nav, section, article, footer.. they’re all there.

    HTML5 form

    Here I ran into trouble. The form validation (apparently one of the benefits of HTML5) doesn’t work. When you leave all fields empty and click Submit, nothing happens. I googled around and it seems to be a common problem. The rest of the form stuff is nice though, I liked the fact you can change from dual column to single column (label on top of field instead of columned) by just changing the class.

    Videoplayer

    The video player uses HTML5 which is nice and should work well on mobile devices. The player is able to show a preview image, too and there is a fallback Flash player included, for older, non-supported browsers. And there is even a further image fallback for that, that shows you the video can not play.

    Responsive

    Despite claims, there is no default responsiveness built into the grid.

    Conclusion

    After playing around with it for a while and getting over the initial row/column mess, it was remarkably easy to work with this framework. And thanks to the default styled elements, it’s not hard to get something looking good. It includes many proven methods and concepts that seem to work well together.

    There are some bad things, too. I did have to do quite some cleaning up, the example files are a bit overdone and contained a few html errors. And the issue with the form validation is reason for concern. Also, there’s been quite a lack of development recently, while its direct competitor HTML5Boilerplate shows much more activity both in releases as in support. Last, there is no responsive support, which means I cannot recommend this framework.



    HTML5 Boilerplate (html5boilerplate.com)
    Combines jQuery, Modernizr and Normalizr in a compact package of CSS, JavaScript and HTML. An excellent starting point.

    HTML5Boilerplate

    After the letdown of 52framework I’ve decided to try out HTML5Boilerplate, or Boilerplate for short. I’ll keep requirements the same, everything else is discussed below.

    Installation

    After downloading the latest version you’ll notice the whole project is pretty well organized. In the top folder you’ll find a plain index.html file which you can use to build your own project. It comes complete with all features this framework stands for: Normalizr, Modernizr, jQuery, even Google Analytics is already integrated. And finally, there is even code for doing the viewport polling (media queries) needed for your responsive design.

    In the folder itself there’s even more goodies: defaults for robots.txt and humans.txt, a default 404 page, a default htaccess and crossdomain.xml, even fav- and touch icons are all there. Impressive. Bad points: no example files. But then, you don’t have to clean those out, either. Also, documentation is in GitHub-style .md format, where I would have preferred plain text.

    Initializr

    It must be noted that the website also allows you to build your own ‘package’ of Boilerplate, containing (or excluding) everything you need for your specific project. They call this service ‘Initializr.’ They offer various types of default ‘template’ HTML/CSS frameworks, with one of them being Responsive Bootstrap 2.3.0, my HTML/CSS Framework of choice. As you can imagine, at this point I was starting to become a little excited. (http://verekia.com/initializr/responsive-template)

    The grid system

    Boilerplate currently offers 2 types of grid systems: first one is called ‘Mobile-first Responsive’ and doesn’t utilize a grid system at all. Second option is ‘Responsive Bootstrap’ which does make use of a 12-column responsive grid. Since we’ll deal with that in the next chapter, I’m focusing on Mobile-first for now.

    HTML Structure

    First thing I noticed while reading the documentation is that in its live example it makes use of the mythical ‘Golden Ratio’ proportion. Since I’ve always find this a fascinating subject, I can’t help but stay very positive about this framework. Furthermore the documentation has a detailed explanation on the whole Mobile-first approach, how the different viewports work and it even explains some basic HTML5 layout concepts. Oh and it’s easy to adapt the default layout, no need to stick with the Golden Ratio stuff if you don’t want to..

    The structure of the HTML itself looks very minimal. The head consists of only 8 lines, quite a change when compared to 52framework. The CSS is equally minimalistic, with just a basic reset and some nice fixes and defaults. Not much, but also not full of useless additions.

    Responsive

    Of course, this whole Mobile-first approach works very well and the different viewports are easy to test by resizing your browser. In facts it is remarkably similar to how we do it on our own sites.

    Conclusion

    I found Boilerplate to be a very clear and easy-to-use framework. It really wants to be a complete package by offering defaults for many things, while still not overdoing it. I wouldn’t mind default forms and a video player, but it’s not hard to put this in yourself. I like the way it enables you to choose between basic, responsive and bootstrap – way of layout. I like how it offers various ways of caring for older browsers. It’s seems its very actively developed still and you can find many tutorial videos on YouTube. Oh, and there’s also a version for Mobile.

    Boilerplate offers a much more complete project base than anything else currently available. The fact it is using one of the best HTML/CSS frameworks makes it even more attractive.

    Examples

    http://www.nike.com/us/en_us/c/skateboarding/
    http://data.nasa.gov/
    http://www.microsoft.com/Surface/nl-NL
    http://www.projectrebrief.com/

‹ HOME Meer research