/drublic - A Cutting Edge Webdesign Blog – Hans Christian Reinl

Front-End Development and Architecture

Hans Christian Reinl – @drublic

Category Archives: HTML5

Learnings from using Sass in large scale projects →

by

Different projects I have worked on used Sass as the pre-compiler of their choice. This post shares some learnings we had while using Sass. There are a couple of great articles on how to use Sass in large scale projects — this one is more of a retrospective. I hope it helps you solving problems if you ever run into them.

I wrote about some of my recent projects and the learnings I had.


Introducing INIT – A Boilerplate Framework for Front-End Projects →

by

INIT is based upon HTML5 Boilerplate and adds more structure for SCSS files, JavaScripts, includes build tasks and a whole lot more.

Today we released INIT, a front-end framework based on Grunt, Bower, Karma and a lot more tools as version 1.0. This marks a special day for Anselm and me, as we worked for a long period to get this project to where it is today.

Over at TNG I wrote a bit about why we need frameworks like these and what the challenges with current tools are:

Generally we start a lot of our projects in kind of the same way. A lot of tasks need to be repeated from one project to another since we tend to set up our development and deployment workflow in similar ways everytime.

Please drop by and read the full article, provide feedback for INIT via GitHub or just tweet about it if you feel like it :)

INIT’s website    INIT on GitHub


Add the <main>-Element to Modernizr 2.6.2

by

We don’t need this anymore With Modernizr v2.7.0 we don’t need this work around anymore. Please update to this version if you use <main>. tl;dr: You can add the new main-element to Modernizr 2.6.2 by using HTML5 Shiv’s window.html5 option to add your own elements to the shiv. Since I use some bleeding edge stuff in HTML and CSS in actual projects for clients I ran into one particular issue a couple of times lately and I thought I share a little workaround with you. Modernizr’s current state Modernizr includes HTML5 Shiv to make HTML5 elements like header, figure and

Read more


HTML5 Boilerplate – v4.0.0

by

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

by

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


My Coding Style and Guidelines

by

After Harry Roberts published his HTML/CSS coding style I’ve decided to follow his call and write down how I like to code and what my guidelines for HTML and CSS coding are. This article is only a way to describe what I like to do – but it is by far not a recommendation or something. I have not really tried to “canalize” the coding style I do before but it is about time to do so and to write it down. Please let me know if you think that there are ways to do certain things better or in

Read more


Effects for the Web!

by

Christian “Schepp” Schaefer shows how to use the new filter-properties for CSS3 and combine them with methods implemented by most modern browsers. This article was first published in German on December 19th 2011.


Responsive Media

by

There is a big discussion going on at the moment covering the actual point of how to deal with images and media et al. on mobile-phones and other devices as there are some things that don’t work as on a desktop computer: Bandwidth Screen size Performance / Velocity The question is how to deliver responsive images on a mobile website. You maybe use something like img { max-width: 100%; height: auto; } in your responsive design to prevent images from being bigger then the screen of a mobile device. In most of the cases this shrinks images in its displayed

Read more


A Travel Through Time – and Back

by

Somehow… <time> Disappeared As you might have heard the <time>-element was removed from the HTML5 specification last saturday by Ian “Hixie” Hickson, the editor of the spec. Hixie decided to remove <time> and replace it by the more general <data>-element. A question that came up: Why got<time> removed and why did nobody stop Hixie? Well: There


How to Build an Accordion-Menu using CSS and a bit of jQuery

by

We’re doing a project these days where we use an accordion-menu to show some content. I want to share with you how I did this using jQuery and CSS. This is pretty easy and I want to encourage you not to use any plugin or so but to write the code yourself and learn a bit more about how to use CSS and jQuery and save some microseconds on your loading type. The HTML This is kinda straightforward I think. We don’t need a wrapper for the accordion-menu. Check it: <section id="experts" class="accordion-item"> <h1><a href="#experts">Experts</a></h1> <div class="content"></div> </section> This is

Read more