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 RawGit. 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.rawgit.com/Beg-in/frow/[X.Y.Z VERSION HERE]/dist/frow.min.css">
    ...
  </head>
  ...
</html>

Important Note: Make sure you replace the [X.Y.Z VERSION HERE] with the version you want to use (remove the brackets too). A list of all releases is available on GitHub.

The Basics