Frow 3.1.1 Overflow Utility Classes Fix

This patch release just fixes the overflow shortcut classes. They were incorrectly indented and Sass thus interpreted it as nested, which caused the classes to not work as intended.

tl;dr: Update to this version and the overflow classes will work as intended.

Version 3.1 with new utilities and goodies!

Frow version 3.1!

Upgrade Notes

Frow has officially hit 3.1 with a new feature release! It was given a version of 3.1 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.1 if you are already on 3.0.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?

Deeper links in Documentation

• FrowCSS.com got an upgrade where now all sections of the website are linkable! You can now jump right to those handy pre-built media queries.

Overflow Shortcut Classes

• New shortcuts to quickly modify how divs handle overflow.
• .overflow-y-auto and overflow-x-hidden quickly whip your site into shape.
• See all of the shortcuts here.

Flexbox Grow and Shrink Shortcuts

• Hate it when your content inside of a .frow or flexbox gets squished? Add the new .shrink-0 shortcut to quickly tell your browser to never squish that div again!
• Check out all of the shortcuts here.

Button appearance modifier classes

• A new .button-link class to make buttons appear as links (great for PWA's where links don't actually change the page)
• A new .button-none class to allow your buttons to wrap other elements and turn them into buttons, without adding all of the styling of regular buttons.
• See the examples here.

Media Print Shortcuts

• Similar to the existing .hidden-sm, .visible-lg rules, new @media print rules have been added. Try out the new .hidden-print class to hide things that shouldn't be printed out from a printer.

Form Element Improvements

• Labels: Sometimes you want to have something look like a form label without actually being a label element. Enter the new .label class.
• Inputs: New variable for picking the placeholder text color.
• Inputs: Fixed placeholder color bug on Firefox.
• Improved the cursor for input range sliders, it now turns into the pointer icon over any clickable part of the bar.

Optional Normalize.css

• Normalize.css is still on by default and very much recommended, but for those who are doing their own custom CSS resets, a new variable has been added to not include it in the build.

New CDN

• The previous CDN Frow used, RawGit, is closing down. But good news! Frow has moved over to jsDelivr! The website documentation has been updated with the new information. If you need to rely on an older version of Frow and can't use the new link, you can convert your old RawGit link to jsDelivr with this simple tool.

Try out Frow!

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!

Normalize.css update and more valid documentation

This is a small bump to Frow before the soon coming 3.1 release. Functionality wise this update just increases the Normalize.css version from 8.0.0 to 8.0.1. This release also updates the dependencies used to create Frow, and also does a sweep to increase the HTML validity across the documentation website.

HTTPS & More

This new version of Frow has some minor changes:

• HTTPS support for documentation website: https://frowcss.com (Thanks @github!)
• Normalize is manually built into Frow again. This was reverted due to using it as a dependency breaking builds. Plus, Frow still had to receive a new release whenever a new Normalize came out anyways, to keep the /dist folder up to date.
• Canvas elements no longer have an outline when focused. This is option is bundled under the "$frow-enable-html-basics" Sass toggle. (Thanks @BrainBacon!)

Mixin Within Control Directive Fix

This release fixes some mixins existing within control directives, which the latest version of Sass errors out on.

Special thanks to @richtmat for discovering the issue.

Update Normalize.css dependency version

This update now requires the new version of Normalize.css, 8.0.0 or higher. I submitted a patch to Normalize.css (necolas/normalize.css#712) which removes some outdated code to style Android 4.0 and the new Normalize 8.0.0 incorporates the change. With the obsoleted code removed, I'm able to also remove the corresponding CSS that was fighting Normalize.css's code in Frow.

Frow 3.0.1 (Gutter fixes and Normalize.css path)

This update fixes columns inside of gutters. A bug was causing gutters to appear on columns even if they were not direct children of frow elements with gutters, if a higher up parent had gutters enabled.

This update also changes Frow's path to Normalize.css to use "~" rather than "node_modules/".

Frow 3.0

Frow version 3.0!

This version is a "major" release, both due to its extensive new functionality, as well as the fact that it does include some breaking changes. As always, you can find the full documentation on how to setup and use Frow at frowcss.com.

What's new?

Customize Frow Via Sass Variables

• Portions of Frow can be disabled to reduce filesize (Forms, Grid, etc.)
• Button and Form colors can easily be tweaked to match your project
• Change the number of columns and gutter size for the Grid
• Add, remove, or change the responsive design breakpoints
• And more!
• See all of this demoed at the new (http://frowcss.com/customize.html)

Improved Documentation Website

• Better documentation
• Less text-y homepage (with sweet new flexbox animation!)
• Adjusted the design of the documentation
• See all of this demoed at the new (http://frowcss.com)

More Efficient File Size

• Made the exported CSS smarter, cutting out ~6,000 characters

Firefox Quantum Support

• Forms in Firefox Quantum are now styled by Frow

README Updated

• The README is now more than just a link to Frow's website

Better development environment

• Switched out Gulp for npm scripts
• Frow is now coded in .sass instead of .scss
• Frow rebuilds to CSS after each change
• The documentation website now auto-reloads on change

Overall Polish

• A lot of behind the scenes clean-up and organization

Bug Fixes

• Better browser support
  • Frow's Shortcuts now much more consistent on Firefox and IE
  • Improved Ranges for IE
• Fix case where checkbox and radio buttons could become squished

Breaking Changes

• The paths to Frow have moved!
  • The main .sass file is now at frow/frow.sass
  • The main .css file is now at frow/dist/frow.min.css
  • Frow's variables.sass file is now at frow/_variables.sass
  • The rest of Frow's .sass files are in frow/src
• Normalize.css now an npm dependency for Frow, instead of being a frozen version included within Frow
  • This allows you to update Normalize.css without having to wait for Frow to catch-up
• Some Utilities classes have been renamed to be more consistent
  • .uppercase, .lowercase, .capitalize are now .text-uppercase, .text-lowercase, and .text-capitalize
  • .card-shadow-dark and .card-shadow are now .shadow-dark and .shadow-light
  • The horizontal and vertical margin and padding shortcuts have switched from using h and v to x and y (.mh-auto is now .mx-auto)
• Removed .clearfix, you are now on your own to provide a clearfix class
• If you relied on Frow's previously undocumented variables, double check to make sure the ones you were utilizing weren't renamed

A Thank You

Thanks to everyone who has tried out, is using, or is just curious about Frow CSS! Always feel free to reach out to me via tickets on Github if you need help with, or have any suggestions for, Frow.

• Cody

npm Clean-up

This release just removes the .c9 folder from the npm release, shrinking the overall install size.

Margin and Padding Utilities (and more)

This release's big feature are the new shortcut classes for adding margin or padding to elements without having to give them specific id's or classes. You can for example add a class of ".mb-10" to add a bottom margin of 10px to an element. You can view all of the variations on the Frow Utilities Page.

This release also added in ".width-auto" and ".height-auto" classes to compliment/counter the ".width-100" and ".height-100" classes.

Finally, this release also adds in text align shortcut classes. ".text-left", ".text-right", ".text-center", and ".text-justify" are able to quickly manipulate the text alignment of an element.