Skip to content

Instantly share code, notes, and snippets.

@thundernixon
Last active January 15, 2019 22:17
Show Gist options
  • Save thundernixon/be515dd4dbd6adbc2d517a664a4170c3 to your computer and use it in GitHub Desktop.
Save thundernixon/be515dd4dbd6adbc2d517a664a4170c3 to your computer and use it in GitHub Desktop.
Output granular CSS media queries with starter variables and a Python loop
# -------------------------------------------------
# -- set vars below -------------------------------
# note: "em" probably offers better control
units="px"
# provide a media query granularity (in pixels)
granularity = 25
# provide start & end viewport widths
startViewportWidth = 400 # in units specified above
endViewportWidth = 1200 # in units specified above
# provide start & end font wdth axis values
startFontWdth = 70
endFontWdth = 100
# provide start & end font wght axis values
startFontWght = 300
endFontWght = 700
# -- set vars above -------------------------------
# -------------------------------------------------
from math import floor
# this sets up default values (uses start values)
viewportWidth = startViewportWidth
currentWdth = startFontWdth
currentWght = startFontWght
# this calculates ranges
totalViewportRange = endViewportWidth - startViewportWidth
wdthRange = endFontWdth - startFontWdth
wghtRange = endFontWght - startFontWght
for i in range(0,totalViewportRange+1):
if i % granularity == 0:
viewportWidth = startViewportWidth + i
t= (startViewportWidth-viewportWidth) / totalViewportRange
currentWdth = round(startFontWdth - (wdthRange * t))
currentWght = round(startFontWght - (wghtRange * t))
css = "@media (max-width: "+ str(viewportWidth) + units + ") {:root {--width: " + str(currentWdth) + "; --weight: " + str(currentWght) + ";}}"
print(css)
@thundernixon
Copy link
Author

thundernixon commented Jan 15, 2019

Updated to be mobile-first and to hit the actual final breakpoint, and to make it easy to use whatever unit of measurement you prefer.

You might have better results if you based media queries in ems, per @nicksherman

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment