Skip to content

Frow 4.0.0: SVG display default change and updated browser support

Compare
Choose a tag to compare
@codysherman codysherman released this 30 Aug 22:13
f780adc

This is relatively minor changes to Frow CSS, however the three changes can be considered potentially "breaking" and so extra caution was used, hence the major jump from version 3 to 4.

Breaking Changes

Change 1: Browser Support

Browser support was updated, Frow still supports the latest two versions, however since the last big Frow release the browsers themselves have gone through major updates. This now means that Frow is lighter, as it was able to drop the old -webkit vendor prefixes.

Workaround:

If support for even older legacy browser versions is needed on your project, you can use tools such as autoprefixer to extend support when compiling Frow's Sass to CSS.

Change 2: SVG's Display

To better align with the browser's defaults, SVG elements' display rules are not altered by Frow anymore. Frow previously set all SVG's to be display: block. They now are not set, falling back to the browsers' default of display: inline. This also helps support third party libraries that utilize SVG's and expect them to be inline. Special thanks to @boystrange for reporting this issue.

Workaround:

The correct solution would be to style your SVG's as display: block only when you actually need them as block. However, to return to the old way Frow was globally treating all SVG's, you can add the previous rule to your CSS:

svg {
  display: block;
}

Change 3: New Minimum Sass Version

Sass is in the process of deprecating the / symbol for division, instead opting for math.div. Frow 4 switches to using the new math.div to remove various warnings from popping up about the deprecation. This means that users running Frow 4.0's Sass files, will need to also be using Sass version 1.33.0 or greater.

Workarounds:

If you can't upgrade your Sass version to 1.33.0 or greater:

  • Fall back to Frow version 3. As mentioned above, this wasn't a gigantic leap in features, Frow 3 is probably just as good for your needs.
  • Or, use Frow 4.0's CSS files instead of Sass. If you don't need to customize Frow, the CSS files are just as functional.

Another special thanks to @pociust for contributing the Browser Support PR and math.div conversion!

As always, thanks for using Frow! Please feel welcomed to add Issues/Ideas to the project via GitHub!

Thanks,
Cody