Square One – a skin for the Containerist

This year my digital home got a new skin. I call it Square One, as it is built around the proportion of four times one elements.

It is the improvement of the first ever built skin for the Containerist. I needed something robust yet more elegant than the initial wireframe-like boxes design. Here are some specs.

Responsiveness

The skin adjusts to four sizes:

  • Size A: 1 module - 4 columns - phone
  • Size B: 2 modules - 8 columns - tablet vertical
  • Size C: 3 modules - 12 columns - tablet horizontal
  • Size D: 4 modules - 16 columns - desktop

--- CTN


———
2014-01-04

 

Grid

  • One module (4 columns) = 300 pixels wide.
  • One column (3 units) = 75 pixels wide.
  • One unit is 25x25 pixels.

The unit is big enough as a click target for mouse/trackpad devices, and two units are good as a tap target for fingers.

Note: depending on the size (A to D), the number of columns varies. On a smartphone there are four columns, on a desktop 16.

--- CTN


———

 

Typography

The baseline is every unit = 25 pixels.

There are up to four sizes for headlines.

  • XL with line-height of 4 units
  • L with line-height of 3 units
  • M with line-height of 2 units
  • S with line-height of 1 unit

The sizes adjust according to the amount of modules. For the desktop or tablet, the H1 is XL big, for the smartphone, it is only L big.

For the copy text and article container, the copy text size is bigger for better reading, and sub headlines are adjusted.

The copy text is set in a serif, the rest in a sans serif font. (Let's see if I change the fonts in order to not have requests to google servers.)

--- CTN


———

 

Code structure

Disclaimer: The code is for sure beyond all good manners of professional developers.

Each container has a html template file and an according css file, as established within for the Containerist.

For each container size, the amount of columns can be specified. Example: D8 = the element is eight columns wide in a desktop size (size D). B4 = the element is four columns wide on a tablet vertical size (size B).

There are pre-processed common styles: units, grid, typography. Container type styles are loaded on demand.

Bottom line

You can see the skin working on this site. It's meant to be robust and easily extensible, as new container types will be added. Time will show how sustainable this skin is.

By the way, today is the 4th of January 2014, which consists of fours and ones. This will help me to remember the launch date.


———

(cc-by-sa) since 2005 by Konstantin Weiss.