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, as a CDN for Frow is provided via RawGit. However, as a free service, there are no uptime guarantees.

2. Include HTML5 DOCTYPE in your HTML file
<!DOCTYPE html>
<html>
...
</html>
3. Add mobile viewport meta tag

Recommended:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Frow Project</title>
    ...
  </head>
  ...
</html>

Or, to allow mobile zooming:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Frow Project</title>
    ...
  </head>
  ...
</html>
4. Import Frow into your Sass file

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

// Tip: Place your personal variables file first (if you have one) to overrule any of Frow's defaults
// @import '[your-path-to]/variables';

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

// Import your personal 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!

4. Import Frow's CSS into your HTML file

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

Frow's CSS files come already vendor-prefixed and minified.

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

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

You will need to pick out the version of Frow you would like to use, most likely the latest. A list of all releases is available on GitHub.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Frow Project</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/Beg-in/frow/[X.Y.Z VERSION HERE]/css/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).

The Basics

Frow is from Cody Sherman via Beg.in