Access Styles

Usage

Install as a gem and include the usual ways.

Styles

You can include:

@import "access-styles/color";
@import "access-styles/bootstrap";
@import "access-styles/layout";
@import "access-styles/mixins";
@import "access-styles/fonts";
@import "access-styles/typography";
@import "access-styles/progress-bar"; // for turbolinks progress-bar be sure to include the js
@import "access-styles/loading-animation"

Javascripts

You can include:

//= require access-styles/data_confirm
//= require access-styles/forms
//= require access-styles/progress_bar

Variables

You can redefine these before you include the css

Basic Colors

$red:            #e54729;
$sky-blue:       invert($red);
$blue:           #002e62;
$yellow:         #ffcc00;
$green:          lighten(#55a602,8.5%);

$black:          #000;
$white:          #fff;
$mid-tone:       #9ea7ad;
$lighter-tone:   lighten($mid-tone, 30%);
$light-tone:     lighten($mid-tone, 15%);
$dark-tone:      darken($mid-tone, 30%);
$darker-tone:    darken($mid-tone, 45%);

Brand Colors

$brand-primary:       $blue;
$brand-success:       $green;
$brand-info:          $sky-blue;
$brand-warning:       $yellow;
$brand-danger:        $red;

Progress Bar

$progress-bar-background-color: $brand-info;
$progress-bar-height: 5px;

Classes

Background Color

.bg-red
.bg-sky-blue
.bg-blue
.bg-yellow
.bg-green

Text Color

.text-red
.text-sky-blue
.text-blue
.text-yellow
.text-green

Layout Size

.section-xl
.section-l
.section-m
.section-s

Padding and Margin

.pad-(0 to 155 by 5)
.pad-horizontal-(0 to 155 by 5)
.pad-vertical-(0 to 155 by 5)
.pad-top-(0 to 155 by 5)
.pad-bottom-(0 to 155 by 5)
.pad-left-(0 to 155 by 5)
.pad-right-(0 to 155 by 5)
.margin-(0 to 155 by 5)
.margin-horizontal-(0 to 155 by 5)
.margin-vertical-(0 to 155 by 5)
.margin-top-(0 to 155 by 5)
.margin-left-(0 to 155 by 5)
.margin-right-(0 to 155 by 5)
.margin-bottom-(0 to 155 by 5)
.negative-top-(0 to 155 by 5)
.negative-bottom-(0 to 155 by 5)

Typography

.primary-header
.secondary-header

.header-xxl
.header-xl
.header-l
.header-m
.header-s

.text-xxl
.text-xl
.text-l
.text-m
.text-s

.text-black
.text-bold
.text-book
.text-light