Fronteers 2014: CSS

Published: 20-01-2015 webdevelopment

After my visit to Fronteers 2014 I was surprised to see that the proportion of strictly development related talks seemed lower compared to previous years. Although most talks were of the highest quality, there were quite some talks about management, infrastructure, etc. Great talks, just not applicable to my work.

In fact, I was secretly hoping for some new tools (e.g. Traceur) or maybe FRP Javascript. I was introduced to both Sass and Grunt at Fronteers once, and they changed my life!

Also, no talk on CSS by Lea Verou this year, but there was a very interesting talk about CSS Animation by Rachel Nabors. I can recommend watching the presentation, but I don’t want to go deeper into CSS animations here.

Icon Font

The talk about the Etsy Infrastructure did give me the idea to build a custom icon font for a client that required a lot of custom icons in their web app. Because these are all flat icons, it was possible to use an icon font (considering that you’re basically stuck with 1 color per glyph). Unfortunately, the source has a closed license, but I can give the generic outlines of my approach.

The core is the Grunt module grunt-fontsmith, the documentation is a bit sparse, but in the end I used a simple configuration to convert my directory of SVGs to font files and a JSON file with the mapping from icon name to a unicode character. This unicode character can be used to reference the icon in the CSS, exactly like e.g. Glyphicons does. Although grunt-fontsmith can generate SCSS (and CSS, Less, stylus), I eventually opted not to use it. Instead I wrote a small Node script that converts the JSON directly into an SCSS file with the class names that I need, and also sorts all of the variables and class names alphabetically (which grunt-fontsmith can’t do for as far as I know).

Also, I patched grunt-fontsmith to have a significantly higher timeout when generating the fonts. It uses PhantomJS to call the Icomoon font generator in the browser (although I have my reservations about this approach, I don’t have the time to do it better, so I’ll kindly shut up). In my case this might take up to 15 seconds, which is not a problem, because I only run it when an icon is added. Unfortunately the internal timeout in grunt-fontsmith is lower, so I changed it in grunt-fontsmith/node_modules/fontsmith/node_modules/icomoon-phantomjs/lib/icomoon-phantom.js, in the function waitFor(checkFn, timeout, cb).

Basic CSS

At the end of the talk by Nathan Ford about Markup, he includes two examples of basic CSS that I thought where quite clever to have a visual representation of. It seems to clarify much more than the written documentation. I’ve elaborated on these examples and made two demos that I will use for teaching and personal reference.

Visual Representation of the CSS feature box-sizing

Chrome, Firefox, and IE8+ all support the feature box-sizing. The value padding-box for this property is only supported in Firefox, so I will leave it out of scope for this demo. Border-box is the boxmodel IE uses in quirks mode.

Below are two divs. Both divs have the same height, width, and padding.

By default (content-box), the padding is not included in the box height/width. Height/width is set on the content of the box. The div is 80 + (2*20)px wide.

When using border-box, the padding and border are included in the box height/width. Height/width is set on the border of the box, and the border is outside the padding. Margin is still added to the box height/width.

.pad-out {
  /* default */
  box-sizing: content-box;
  height: 80px;
  width: 80px;
  padding: 20px;
}

.pad-in {
  /* exception */
  box-sizing: border-box;
  height: 80px;
  width: 80px;
  padding: 20px;
}

The checkerboard pattern is a div with 100% height and width. The squares are exactly 20px x 20px. It’s purpose is to show the relative dimensions between the two boxes.

Compare also these minimal examples of a div, one with border-box and one with content-box box-sizing.

/* top example */
.pad-simple {
  box-sizing: content-box;
  height: 80px;
  width: 80px;
  padding: 20px;
}

/* bottom example */
.pad-simple {
  box-sizing: border-box;
  height: 80px;
  width: 80px;
  padding: 20px;
}

Sources:

Visual Representation of the CSS features float and clear

I have often used the CSS properties float and clear, but mostly just for putting two block elements inline. This means I usually stick with float: left and clear: both. Now, I would rather use display: inline-block. But how exactly do floats and clear work? I will show some examples.

For all the following examples, the numbers indicate the order of the blocks in the HTML.

All elements float left, but the green element clears left. Clear both would have the same result, because left is included in both. The blocks are essentially broken off to the next line at the green element.

float: left;
float: left;
float: left; clear:left;

1 2 3

All float left, but green clears none (default). No elements are broken off to the next line, although they can still break off if they exceed the width of the parent element.

1 2 3

float: left;
float: left; clear: none;
float: left;

All float right, but green clears right. Again, clear both has the same effect, because right is included in both.

float: right;
float: right;
float: right; clear: right;

1 2 3

Element 1 and 3 float left. Element 2 floats right. Element 3 explicitly clears none. The other two elements implicitly clear none, because it’s the default. Clear none is only to override elements that are set to clear left, right or both.

1 2 3

float: left;
float: right;
float: left; clear: none;

Like the previous example, both element 1 and 3 float left. Element 2 floats right. This time, element 3 clears left.

1 2 3

float: left;
float: right;
float: left; clear: left;

These examples might come in handy for reference. The next post will be a linkdump of interesting subjects/tools from Fronteers 2014.