Customize

What can Sass variables do?

This page only applies if you're using frow.sass and not frow.css. By using Sass, you are able to pass in variables that will affect how Frow is compiled to normal CSS.

This customizability opens up more options for Frow, such as excluding various Frow features to reduce file size, or changing options on Frow's defaults. You can change the maximum number of grid columns, where the various responsive design breakpoints land, or even the color of text, buttons, and shadows.

Loading Your Variables File

Load your variables before Frow is imported to overwrite Frow's defaults.

// Place your project's variables file before importing Frow
// @import '[your-path-to]/variables';

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

// Import the rest of your project's Sass files after Frow
// @import '[the-rest-of-your-sass-files]';

Disabling Features

Frow is broken into different feature sections, allowing you to disable portions if parts aren't needed or desired.

// HTML basics (Minor styling/resets of anchor links, h1-h6, etc.)
$frow-enable-html-basics:                true;

// Columns/Grid functionality
$frow-enable-columns:                    true;

// Button styling
$frow-enable-buttons:                    true;

// Form elements
$frow-enable-forms:                      true;

// Responsive design rules
$frow-enable-responsive-design-classes:  true;

// Margin/Padding classes (.mb-10, .p-15, .mx-auto)
$frow-enable-box-model-shorcuts:         true;

// Miscellaneous utilities
$frow-enable-utilities:                  true;

// Include built-in Normalize.css
$frow-enable-normalize:                  true;

Grid System

Tweak the defaults involving the column system.

// Maximum Number of columns to support (.col-md-1-12)
$grid-max-columns: 12;

// Gutter width between columns when using .gutters
$grid-gutter-width: 30px;

Responsive Break Points

Change or add to the responsive breakpoints.

// Small screen / tablet (These assume column 1-1)
$sizes-mobile: (xs: 0px, sm: 768px);

// Desktops / laptops
$sizes-desktop: (md: 992px, lg: 1200px);

// Example: You could add an extra extra small breakpoint with:
// $sizes-mobile: (xxs: 0px, xs: 576px, sm: 768px);

Card Shadows

Change the default shadow sizes and colors.

// Shadow for light backgrounds
$shadow-light: 0px 1px 3px 0px #A0A0A0;

// Shadow for dark backgrounds
$shadow-dark: 0px 1px 3px 0px #1B1B1B;

Animations

Adjust the default animation speed.

// Animation Speed (Mostly form elements)
$animate-speed: 0.4s;

// Fast Animation Speed (Mostly button hover)
$animate-speed-fast: 0.1s;

Colors

Gray and colors for use across Frow

// Basic grays to use
$gray-lighter: #EAEAEA;
$gray-light: #9E9E9E;
$gray-dark: #888888;
$gray-darker: #4F4F51;

// Off colors
$off-white: #BBB;
$off-black: #333;

// Pure colors
$white: #FFF;
$black: #000;

Scaffolding

Basic element color declarations

// Non-white background color
$background-color: #F6F6F6;

// Default text color on body
$text-color: $off-black;

// Default link color
$link-color: $off-black;

// Default link hover/active/focus color
$link-hover-color: darken($link-color, 15%);

Buttons

Change the default button design

// Button text color
$button-text-color: $white;

// Button background color
$button-background-color: $gray-darker;

// Button border color
$button-border-color: $gray-darker;

// Button disabled text color
$button-disabled-text-color: $gray-light;

// Button disabled background/border color
$button-disabled-border-color: $gray-dark;

// Button active click size
$button-active-size: 0.96;

Form Elements

Basic form element color declarations

// Form primary color
$form-color-primary: $gray-darker;

// Form light color
$form-color-secondary: $gray-light;

// Form placeholder text color
$form-placeholder-color: $gray-light;

// Form focus size
$form-focus-size: 1.15;

// Checkmark color
$form-checkmark-color: $white;