Be notified of new releases
Create your free GitHub account today to subscribe to this repository for new releases and build software alongside 28 million developers.Sign up
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!)
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.
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.
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 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.
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
- 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
- A lot of behind the scenes clean-up and organization
- 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
- 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.
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.
This update unifies all of the various types of buttons' display property. Whether the button is a <button> or just an <a type="button">, now they all will be display:block. To put buttons alongside each other (similar to display:inline), just wrap them in a .frow of course!
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.
- 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).
- 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).
- 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.
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.