search

codyhouse / codyhouse-framework

A lightweight front-end framework for building accessible, bespoke interfaces.
https://codyhouse.co/
MIT License
1.16k stars 171 forks source link

Added aspect ratios #42

Closed peiche closed 5 years ago

peiche commented 5 years ago

Added a Sass list of aspect ratios. This list is iterated over to generate utility classes for each.

This is takes inspiration from the way Bootstrap generates aspect ratio classes, with one difference. Instead of using the Sass percentage() function, I'm using calc() directly. Browser support is good; thanks to the postcss-calc plugin, the fallback stylesheet outputs the percentages directly.

sebastiano-guerriero commented 5 years ago

Hi Paul, do you have an example of the 21:9 ratio in use? is it a 'popular' ratio, or is it a ratio you've found useful in your projects?

peiche commented 5 years ago

I haven't used it myself, but it's the ratio used in widescreen formats. You can find plenty of videos in 21:9 on YouTube, for example.

claudia-romano commented 5 years ago

Hi @peiche thanks for the additional info. We have added the option to set custom ratio values using a Sass list (as you suggested). Here's the commit with the changes: https://github.com/CodyHouse/codyhouse-framework/commit/2b23a928d9c66f863b9bb80e6b09742faedfda7d

By default, the framework includes only the 4:3 and 1:1 class (with the 16:9 as default), but you now have the option to define a custom list of ratios overwriting the default. Here's how you can do that: https://codyhouse.co/ds/docs/framework/utilities#media-wrapper

This way you can add custom ratios if and when you need them.

Thank you for your suggestion and the code! I'm closing this now. If you have any other feedback, feel free to reopen it. Cheers!