Flexbox Toolkit & Grid

Getting Started with Frow

Initial Page Setup

Preferred download source:
Preferred CSS preprocessor:
1. Get Frow

Navigate to your project's folder, and then download Frow via npm:

$ npm install frow

Navigate to your project's folder, and then download Frow via Bower:

$ bower install frow

Download a Frow .zip via GitHub, then place the unzipped folder inside of your project's folder.

No need to download anything, a CDN for Frow is provided via jsDelivr. However, as a free service, there are no uptime guarantees.

2. Include HTML5 doctype and add mobile viewport meta tag 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Frow Project</title>
    ...
  </head>
  <body>
    ...
  </body>
</html>
3. Import Frow into your main Sass file

FYI: For better rendering across all browsers, Frow has Normalize.css built-in. 

// Place your project's variables file first (if you have one) to customize Frow


// @import '[your-path-to]/variables';


@import '[your-path-to]/frow/frow';


// Import your project's Sass files after Frow


// @import '[the-rest-of-your-sass-files]';

Important Note: Don't forget to add vendor prefixes and minify when converting to CSS!

3. Import Frow's CSS into your HTML file

FYI: For better rendering across all browsers, Frow has Normalize.css built-in, and has vendor prefixes added. 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Frow Project</title>
    <link rel="stylesheet" href="[your-path-to]/frow/dist/frow.min.css">
    ...
  </head>
  ...
</html>
3. Add Frow's CDN into your HTML file

FYI: For better rendering across all browsers, Frow has Normalize.css built-in, and has vendor prefixes added. 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Frow Project</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frow@3/dist/frow.min.css">
    ...
  </head>
  ...
</html>

Important Note: If you need a specific version of Frow, a list of all releases is available on GitHub.

The Basics