Savagery Digital Savagery Digital - 6 months ago 8
HTML Question

Are there any math algorithms that are conducive to good responsive html design?

I'm sick of guessing at what percentages, I need to use with

(x) amount of divs
and other elements in the flow of my design. I want to know what sort of math goes into determining
if <div class=element1>
is scaled down
10%
,
<div class=element2>
needs to be scaled
(x)%
to maintain
2%
gap. Not sure how else to phrase this question. I know there is bootstrap, but I'm curious to what sort of math they use to keep it all so responsive.

Answer

To answer this question, I'm going to clarify some assumptions. Be sure to correct any of them if they're incorrect.

  1. You're working with a design that has a fixed gutter between columns.
  2. You're not using bootstrap.

Your best bet is to use a fixed pixel or em based gutter if you'd like to have better control. This is how Bootstrap does it.

.col {
    padding-right: 20px;
}
.col:last-of-type {
    padding-right: 0;
}

If you're concerned with aspect ratios of images or elements, you can try to the following:

.element-with-aspect-ratio {
    height: 0;
    width: 100%;
    box-sizing: border-box; // if not set globally
    padding-bottom: 33.33%; // For a 3:1 aspect ratio
}

My preferred way to do this is .column > .element-with-aspect-ratio

The math for a grid shouldn't be too complex. Check out this guide by Chris Coyier. https://css-tricks.com/dont-overthink-it-grids/

Comments