Untitled

I dynamically generate MediaQueries from Zurb Foundation breakpoints for a grid with the following Sass code:

$i: 2;
@each $s,
$breakpoint in $breakpoints {
    @media (min-width: $breakpoint) {
        div.grid {
            .element {
                width: calc(100%/#{$i});
            }
        }
    }
    $i: $i+1;
}

In my case, it generates the media queries for all breakpoints defined for the Zurb Foundation Framework in the Sass array $breakpoints. For each breakpoint, it increases the number of elements displayed in a row of the grid by adjusting its width, starting with two elements for the smallest screen width. Of course, for the .element, the display property must be set to inline-block.

Loading Likes...

Tim Bernhard

Mein Name ist Tim Bernhard, geboren bin ich am 2. August 1996. Ich besuchte die Kantonsschule in Wiedikon und schloss diese im Frühling 2015 ab. Als Maturaarbeit habe ich meine Leidenschaft für Programmiertechnische Projekte mit Hoffnungen für die Zukunft verbunden und das Unternehmen Bernhard Webstudio gegründet.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.