rowlow.media.image

A module for displaying responsive images

Install

bower install --save rowlow.media.image

Settings

rowlow-image-namespace // Specific module namespace

Usage

HTML

<img src="" alt="" class="responsive"/>

Example

rowlow.motion.easing

A easing module with loads of easing functions for Row Low framework

Install

bower install --save rowlow.motion.easing

Functions

rowlow-ease() // Returns the easing function by a given name

Usage

SCSS

a:hover{
    transition: all .1s rowlow-ease("in-out-quad") .2s;
}

Easing Functions

linear
ease
in
out
in-out
in-sine
out-sine
in-out-sine 
in-quad
out-quad
in-out-quad
in-cubic  
out-cubic 
in-out-cubic
in-quart 
out-quart  
in-out-quart 
in-quint
out-quint  
in-out-quint
in-expo
out-expo 
in-out-expo 
in-circ
out-circ
in-out-circ
in-back"
out-back 
in-out-back

rowlow.settings.default

Row Low default settings hold important generic settings that can be overwritten depending on your needs.

$rowlow-namespace

Row Low's mixins, variables and functions are prefixed with rowlow- per se. Generated CSS selectors however, are not prefixed by default. In order to change this behavior, you can define a generic namespace that will be prefixed to any CSS selector using $rowlow-namespace. Additionally, every Row Low module that is generating CSS selectors will have a additional variable to set a specific namespace. By default this specific namespace is equal to the generic namespace. Please look up the module's documentation for more details.

Usage

$rowlow-namespace: "rowlow-";

rowlow.type.font-face

A font-face wrapper to quickly define custom fonts for Row Low framework

Install

bower install --save rowlow.type.font-face

Functions

/**
 * $font-name Name of the font-family
 * $class-name The name of the class that will be generated
**/
rowlow-font-face($font-name, $class-name, $file, $fallback: sans-serif, $weight: normal, $style: normal)

Usage

SCSS

/* Set modules namespace (optional) */
$rowlow-font-face-namespace: "namespace-";

@import "bower_components/rowlow.type.font-face/main.scss"

@include rowlow-font-face('Futura Medium', 'futura-medium', '../fonts/futura-medium/futura-medium');

/* preferred method */
h1{
    @extend .font-face--futura-medium;
}

/* alternate method */
h1{
    font-family: "Futura Medium", sans-serif
}

HTML

<h1 class="font-face--futura-medium">This is Futura</h1>

rowlow.type.text-align

This text util helps you to fully control text aligns amog all responsive breakpoints.

Install

bower install --save rowlow.type.text-align

Variables

$rowlow-text-align-namespace // Specific module namespace

Usage

Setup

/* Set modules namespace (optional) */
    $rowlow-text-align-namespace: "namespace-";

    @import "bower_components/rowlow.type.text-align/main.scss"

CSS Selector Naming Scheme

{rowlow-text-align-namespace}text-align--{breakpoint-name}--{left, right, center, justify}

HTML

<p class="text-align--s--center text-align--m--right"></p>

Examples

rowlow.type.text-transform

A little util to take control over text transforms via CSS selectors

Install

    bower install --save rowlow.type.text-transform

Variables

    $rowlow-text-transform-namespace // Specific module namespace

Usage

Setup

    /* Set modules namespace (optional) */
    $rowlow-text-transform-namespace: "namespace-";

    @import "bower_components/rowlow.type.text-transform/main.scss"

HTML

    <h1 class="text-transform--uppercase"></h1>
    <h1 class="text-transform--lowercase"></h1>
    <h1 class="text-transform--none"></h1>

Examples

rowlow.type.text-decoration

A text util to take control over text decorations via CSS selectors

Install

bower install --save rowlow.type.text-decoration

Variables

$rowlow-text-decoration-namespace // Specific module namespace

Usage

Setup

/* Set modules namespace (optional) */
$rowlow-text-decoration-namespace: "namespace-";

@import "bower_components/rowlow.type.text-decoration/main.scss"

HTML

<h1 class="text-decoration--underline"></h1>
<h1 class="text-decoration--overline"></h1>
<h1 class="text-decoration--line-through"></h1>
<h1 class="text-decoration--none"></h1>

Examples

rowlow.type.text-spacing

A little util to take control over text spacing via CSS selectors

Install

bower install --save rowlow.type.text-spacing

Variables

$rowlow-text-spacing-namespace // Specific module namespace

Usage

Setup

/* Set modules namespace (optional) */
$rowlow-text-spacing-namespace: "namespace-";

@import "bower_components/rowlow.type.text-spacing/main.scss"

HTML

<h1 class="text-spacing--subtitled"></h1>
<h1 class="text-transform--line-collapse"></h1>

Examples

rowlow.utils.breakpoints

Defining a map of breakpoint names and value pairs, this module generates will help you maintain responsive breakpoints for your project. By default, this module will give you breakpoints at 1px, 768px, 992px and 1200px.

Install

bower install --save rowlow.utils.breakpoints

Variables

$rowlow-breakpoints: (
    "s":    1,
    "m":    768,
    "l":    992,
    "xl":   1200
);

Functions

rowlow-breakpoint()         // Returns a breakpoint value by a given name
rowlow-breakpoint-min()     // Returns the breakpoint's min value by a given name
rowlow-breakpoint-max()     // Returns the breakpoint's max value by a given name

Usage

Setup

/* Overwrite breakpoint map (optional) */
$rowlow-breakpoints: (
    "s":    1,
    "m":    992,
    "l":    1200,
    "xl":   1400,
    "xxl":  1600
);

@import "bower_components/rowlow.utils.breakpoints/main.scss"

SCSS

@media (min-width: rowlow-breakpoint-min("s") + px) {

}

@media (min-width: rowlow-breakpoint-min("m") + px) {

}

@media (min-width: rowlow-breakpoint-min("l") + px) {

}

@media (min-width: rowlow-breakpoint-min("xl") + px) {   

}

rowlow.utils.clearfix

A clearfix helper for Row Low framework. Clearfixes help you to clear floats in your layout.

Settings

$rowlow-clearfix-namespace //Specific module namespace

Mixins

rowlow-clearfix // Add clearfix specification

Usage

Setup

/* Set module namespace (optional) */
$rowlow-clearfix-namespace: "namespace-";

@import "bower_components/rowlow.utils.clearfix/main.scss"

SCSS

.some-element{
    @include rowlow-clearfix;
}

.some-element{
    @extend .clearfix;
}

HTML

<div class="clearfix"></div>

rowlow.utils.colors

Defining a map of color name and color code pairs, this module generates css selectors for each background, border and text colors.

Install

bower install --save rowlow.utils.colors

Variables

$rowlow-colors-namespace // Specific module namespace
$rowlow-colors // Map of colors

Functions

$rowlow-color()

Usage

Setup

/* Set modules namespace (optional) */
$rowlow-colors-namespace: "namespace-";

/* Define color map */
$rowlow-colors: (
    "white":    #ffffff,
    "black":    #000000,
    "grey":     #cccccc
);

@import "bower_components/rowlow.utils.colors/main.scss"

SCSS

/* Get color code using a function */
body{
    background-color: rowlow-color("grey");
}

HTML

<!-- Setting a background color via selector -->
<body class="background-color--grey"></body>

<!-- Setting a text color via selector -->
<h1 class="text-color--grey"></h1>

<!-- Setting a border color via selector -->
<h1 class="border-color--grey"></h1>

rowlow.utils.visibility

Take full control of the visibility of elements among all repsonisve breakpoints.

Install

bower install --save rowlow.utils.visibility

Variables

$rowlow-visibility-namespace // Specific module namespace

Usage

Setup

/* Set modules namespace (optional) */
$rowlow-visibility-namespace: "namespace-";

@import "bower_components/rowlow.utils.visibility/main.scss"

CSS Selector Naming Scheme

{rowlow-visibility-namespace}visible--{breakpoint-name}
{rowlow-visibility-namespace}hidden--{breakpoint-name}

HTML

<div class="hidden--s"></div>
<div class="visible--m visible--l"></div>

Examples