Frow 3.3.4

This version reverts the 'math.div' change from version 3.3.3. It was determined that the swap over to Sass's new math.div essentially created a breaking change for Frow 3 users on older versions of Sass, specifically on Sass versions less than 1.33.0. Frow 3 is once again using the / symbol to divide in Sass to avoid the breaking change.

If you continue to use Frow 3, depending on your version of Sass you may start to see warnings about the / symbol being replaced by math.div. To avoid these warnings, upgrade to Frow 4 and a version of Sass 1.33.0 or greater. It's a quite easy upgrade from 3.0 to Frow 4, the "breaking changes" are minimal and easy to mitigate.

Special thanks to @nhshofficial for reporting the fact that it was a breaking change.

Frow 4.0.0: SVG display default change and updated browser support

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

Frow 3.3.3: Update division syntax

This version is a patch version that changes how Frow is handling the division math, to avoid the upcoming deprecation of Sass's / for division.

Special thanks to @jasalguero for reporting the issue.

Another special thanks to @pociust for contributing the PR!

Switch to Dart Sass

This version bump only improves the building of the CSS from Sass. It's now using Dart Sass, which did lead to a slightly differently formatted set of CSS files, however they are functionally the same as previous version (3.3.1).

Frow 3.3.1

This patch version just adds the !important class to new text- classes that were added in 3.3.0. This matches the existing text- classes and other utility classes.

Frow 3.3

Frow 4.0 is on the horizon, but before making any breaking changes, I'm trying to put as many non-breaking changes onto version 3.0 as possible.

Frow version 3.3!

Upgrade Notes

Frow has officially hit 3.3 with a new feature release! View the full documentation at FrowCSS.com. It was given a version of 3.3 as while a lot of stuff is new, there should not be any breaking changes, thus no bump to 4.0. Everyone should be able to jump up to version 3.3 if you are already on 3.X. If you are still on Frow version 2, be sure to just read about the breaking changes in the jump to 3 here.

What's New?

Space-Evenly Support

• New modifier class .justify-evenly which is equivalent to flexbox's justify-content: space-evenly. See an example here.
• New modifier class .content-evenly which is equivalent to flexbox's align-content: space-evenly. See an example here.
• The addition of .justify-evenly also dictated a new combo class as well: .row-evenly. This class is identical to .justify-evenly, except for the fact that like all other .row- classes, it also aligns the items vertically. See an example here.

Text Decoration/Font Style Utility Classes

• Three new reusable classes for quickly changing how your text looks without having to write your own CSS:
  • .text-underline
  • .text-line-through
  • .text-italic
• Full documentation available here

"Text Overflow as Ellipsis" Utility Class

Don't you hate it when your end user ruins your perfectly good design by entering in an input that is longer than the div you display it in later in? Get a shorter name end user! Well, here is a quick drop-in utility class, .text-ellipsis, that makes text get cut off with ellipsis rather than break your design: See an example here.

Opacity Utility Classes

• Two new reusable classes for quickly changing elements opacity:
  • .opacity-0
  • .opacity-100
• Full documentation available here

Minor Documentation Improvements and Corrections

• On the Frow Shortcuts page, combo classes like .frow .row-center now better explain the differences vs using the two very similar classes: .frow and .frow .justify-center.
• $text-color was accidentally referred to as $default-text-color in the Customizing Sass docs.
• Other minor improvements to the docs.

A Roadmap via GitHub Issues!

In the past I've kept an internal list of issues I planned to fix, as well as what features would go into the next versions of Frow. I'm going to be changing my workflow so that I'll be putting upcoming changes into the Frow GitHub Issues page. Now you'll be able to see what I'm planning, and what issues I've found internally. Feel free to voice your opinion on what's next!

New to Frow? Try it fast with a CDN!

If you're new to Frow, come check out all of the features and learn how to get started on FrowCSS.com! Grab Frow in Sass & CSS format via npm or give it a super quick try out using the CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frow@3/dist/frow.min.css">

A final thanks

As always, all of your support and feedback is much appreciated! Thanks so much for trying out Frow CSS, and always feel free to reach out!

Screen Reader Accessibility Classes

This awesome version update adds some work from the user @sb0stn that makes classes for better support for screen readers. This helps add content to pages for those visually impaired users using screen readers.

You can find the new classes at: https://frowcss.com/utilities.html#accessibility-shortcuts

Thanks so much for the PR @sb0stn !

3.1.4

This is a minor release, it has some improved linking in the documentation website and recompiles the /dist .css files with the latest version of Autoprefixer.

Fix unnecessary semicolons and redundant code

This patch version is courtesy of @diyews pull request! Much thanks and appreciation, the PR was able to be approved with no modification!

This version removes some accidentally included semi-colons, as well as some redundant code. My current work project uses .scss instead of .sass, I must be picking up bad habits. 😬

Flex-Direction Responsive Design Classes Fix

This update just adds the .frow class to the Flex-Direction Responsive Design Classes so that the behavior is more predictable.

Example:
<div class="frow row-start direction-column-xs">

Previously the row-start class would overrule direction-column-xs, even on xs screens because it was using the specificity of .frow.row-start. Now it will be beaten by .frow.direction-column-xs.

In the end, the frow will appear as a row on tablets/desktops, and a column on phones.