Skip to content

Instantly share code, notes, and snippets.

@krusynth
Created December 12, 2012 22:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save krusynth/4272343 to your computer and use it in GitHub Desktop.
Save krusynth/4272343 to your computer and use it in GitHub Desktop.
Make custom fluid CSS grids based on whatever madness you want.
from decimal import *
getcontext().prec = 6
cols = Decimal(24)
col_size = Decimal(6) # columns should be this many units
gutter = Decimal(1) # with a 1 unit gutter on either side
total_width = Decimal(100)
units = '%'
column_total_width = total_width / cols
unit_width = column_total_width / ((Decimal(2) * gutter) + col_size)
column_width = col_size * unit_width
gutter_width = gutter * unit_width
col_classes = ['.col'+str(i) for i in range(1, cols+1)]
print '{0} {{ padding-left: {1}{2}; padding-right: {1}{2}; }}'.format(
', '.join(col_classes),
gutter_width,
units
)
for i in range(1, cols+1):
actual_width = (i * column_width) + \
((i-1) * (gutter_width * 2))
print '.col{0} {{ width: {1}{2}; }}'.format(i, actual_width, units)
for i in range(1, cols+1):
actual_width = (i * column_width) + \
((i) * (gutter_width * 2))
print '.wrap{0} {{ width: {1}{2}; }}'.format(i, actual_width, units)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment