Responsive proportional css elements & layouts.
This is a set of mixins aimed to create css only, responsive proportional elements. Imagine a perfect square (1:1) on mobile, a landscape (3:2) on tablets and wide screen (16:9) on larger monitors. Or maybe you want to reset proportions to auto on some breakpoints. You can even create grids and layouts with it (not to confuse with the CSS Grid Layout Module).
npm install sass-proportions
How to use
The main.scss comes with default proportions and variables set but won't generate any classes until you include make-props() somewhere in your scss:
Doing so will generate all classes on all breakpoints based on the defaults. Alternatively you can use the mixins to generate only the code you need.
Below is the list of variables and their default values:
Namespace to add to the generated classes. Default is 'prop'. Classes will be generated like .namespace-breakpoint-proportion
Nested map of proportions to generate. Proportions are defined with a string key e.g. '5x2' and a map of unitless sizes in the order (width, height). The keys will be used in the class name, for example: proportion-breakpoint-5x2.
Map defining the breakpoints. It's the same map from Bootstrap 4 so if you are using bootstrap, you will not need to override anything here.
Horizontal and vertical gutters to apply on element.
If true, will display an overlay with the name of the current proportion.
Will generate all proportions in all breakpoints listed in $proportions and $grid-breakpoints.
Generate styles for single proportion.
Generate styles for inner container that will hold content.
Generate reset styles for current breakpoint