Skip to content

Frow 2.0
Compare
Choose a tag to compare
@codysherman codysherman released this 24 May 00:53
2.0.0
29dd4f9

Frow hits version 2.0! Woohoo!

This version is considered a "major" release, as it can, in some cases, have breaking changes. More on those below, but for the most part this is more of just a lot of new stuff added to the existing version of Frow. As always, you can find the full documentation on how to setup and use Frow at frowcss.com.

What's new?

Form Improvements

  • All form elements, input types, selects, textareas, and buttons are now officially supported and styled.
    • When we say all input types, we even mean awesome, styled checkboxes, radio buttons, even range sliders.
    • All of the elements also support styling when disabled too, including animations between being disabled and un-disabled.
    • All elements are styled via pure CSS with no "hacks", so you can apply your own classes to style them to your design needs!
  • Labels are now made into display:flex and support the Frow Shortcuts.
  • See all of this demoed at (http://frowcss.com/forms.html).

Frow Shortcuts Improvements

  • New .inline class that changes a .frow from display:flex to display:inline-flex
  • The Row Combo classes (.row-center, .row-start, .row-end) now automatically align content vertically. This makes the classes much more handy for things like designing headers, where text, buttons, and logos are all in a row. This also differentiates the Row Combo classes from the standard Justify-Content shortcuts.
  • Two new Row Combo classes were also added, .row-between and .row-around.
  • See all of this demoed at (http://frowcss.com/frow-shortcuts.html).

Goodies Improvements

  • Text Transform Shortcuts were added, providing classes to quickly change text on websites to uppercase, caps locked, or lowercase, without needing to give them unique classes.
  • See these at (http://frowcss.com/goodies.html)

Responsive Design Improvements

  • Frow gains an upgrade via the new support of adding in Frow Shortcut's Flex-Direction shortcuts but with specific screen size rules. You can now flip content's order on the page when going between mobile and desktop.
  • See this at (http://frowcss.com/responsive-design.html).

Miscellaneous Improvements

  • The included Normalize.css was upgraded to version 7.0.0.
  • The Frow documentation was improved and clarified.
  • The documentation is no longer included within npm installs. You can still download the old documentation for previous versions from Frow's GitHub.

Possible Breaking Changes

For the most part, you should be pretty safe upgrading from Frow 1 to 2, as this version wasn't a rewrite, but was considered a "major" version bump to comply with npm's semantic versioning recommendations. Some changes could be considered "breaking" depending on your usage.

  • Because of all the changes to form elements, such as styling and even just paddings/margins, you may want to double check all of your elements still look as you intended if you did your own styling, or if you were using previously unstyled elements, such as input[type="checkbox"] or input[type="range"] which are now styled by default.
  • The .reset class for form elements was removed, due to making it too difficult for developers to figure out how to style the form elements and the :not(.reset) CSS specificity. However, you now can completely turn off all of Frow's form styling via setting Sass variables $frow-enable-forms and $frow-enable-buttons to false.
  • The .col-* classes, must now be within a .frow to function. This functionality has always been as described in the documentation, but wasn't actually enforced.
  • If you were using the Row Combo classes (.row-center, .row-start, .row-end), if you don't want the newly added vertical centering, switch your classes to .justify-center, justify-start, or .justify-end.

Upcoming Features

This release lays the groundwork for an upcoming Frow 2.1 and beyond, which will include some nice additions to the current featureset.

  • More Sass variables to disable whole parts of Frow as needed, such as the exiting $frow-enable-forms.
  • Full documentation on Frow's website of each of the Sass variables.
  • Form element customization via Sass variables, rather than custom CSS rules and classes.
  • Improved animations
  • More Goodies
  • A more developer friendly guide and setup for contributing to Frow.
  • And of course as always, better documentation, bugfixes, and more features!

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 or via email about ideas or if you need help with Frow.
-Cody

Assets 2
Loading