OLSA

Web development & Optimization

In my latest project I started to develop some kind of "automatic layout processor" (PHP) to get flexible layouts (templating) and better admin user experience.

Administrator create blocks of content, and later layout processor calculate and sort that content (widgets, modules) inside rows. Layout processor is configurable and works with any kind of CSS framework (eg. Bootstrap, Foundation etc.). Also, finall result is that administrator can change template layout "on the fly".

Ok but what is the problem?

Problem was to send right image resize values, eg. if some content "A" is inside "6 columns" width grid than some image in that content need to ocupate eg. 637px, also if admin change position of content A to another position, or append some content "B" to that row than image from content A need to ocupate different space (eg. 470px). And currently I am working with Foundation Zurb CSS framework (v.5) and there is no linear correlation between columns width - or question is what is the Foundation Zurb columns grid algorithm?

Answer is very simple.

Zurb Foundation columns grid algorithm:

w: row width (1000px)
n: number of columns (1 - 12)
p: columns padding (0.9375em ~15px)

w - (2*(12/n)*p)
____________ 
       12/n 

Test:

6 columns width image need to ocupate:
(1000 - ( 2 * ( 12 / 6 ) * 15 )) / 6 = (1000 - 60) / 2 = 940 / 2 = 470px

A Different approach

If you want to calcualte on this way: How to get one image width if I want 3 images in one row?

w: row width (1000px)
b: number of blocks in one row (1, 2, 3, 4, 6, 12)
p: columns padding (0.9375em ~15px)

w - (2*b*p)
____________ 
       b

Test:

3 images in one row, than 1 image need to ocupate:
(1000 - (2 * 3 * 15)) / 3 = ( 1000 - 90 ) / 3 = 303px