bolser / am-strap-kfc

A DRY and modular grid framework built with SCSS using attribute modules and flexbox

AM Strap

A DRY modular styling framework built with SCSS using attribute modules. It is recommended to normalize your project before importing AM Strap. Ensure required browser support by using autoprefixer when compiling.

Contents

1. Install
2. Grid
3. Buttons
4. Forms
5. Float
6. Align

Install

NPM

npm install am-strap

Bower

bower install am-strap

At the start of your stylesheet, import individual files from the modules directory or use the all file to import all modules. To customise styles for a module, add it's config map before the import declaration and edit the relevant values.

Grid

The grid system is based on Bootstrap but uses attribute modules. Please reference their documentation for additional details on how to use it - just remember to convert to the relevant attribute modules and values.

Config

$am-columns: 12;

$am-breakpoints: (
  "xs": (
    "container": fluid,
    "padding": 1rem,
    "width": 0px
  ),
  "sm": (
    "container": fluid,
    "padding": 1rem,
    "width": 420px
  ),
  "md": (
    "container": set,
    "padding": 1rem,
    "width": 768px
  ),
  "lg": (
    "container": set,
    "padding": 2rem,
    "width": 992px
  ),
  "xl": (
    "container": set,
    "padding": 2rem,
    "width": 1200px
  )
);

HTML Usage

<div am-container>
  <div am-row>
    <div am-col="md-6 xs-12"></div>
    <div am-col="md-3 xs-6"></div>
    <div am-col="md-3 xs-6"></div>
  </div>
</div>

<div am-col="sm-6" am-push="sm-6"></div>
<div am-col="sm-6" am-pull="sm-6"></div>

<div am-col="md-6" am-offset="md-3"></div>

<div am-col="md-6" am-hidden="xs sm"></div>
<div am-col="xs-12" am-visible="xs sm"></div>

CSS Usage

@media #{$only-sm} {
  // Styles for sm only
}

@media #{$above-md} {
  // Styles for above md
}

@media #{$below-lg} {
  // Styles for below lg
}

Buttons

Config

$am-btn: (
  "height": 3rem,
  "fill-color": #ffffff,
  "fill-background-color": #333333,
  "ghost-color": #111111,
  "ghost-border-color": #111111,
  "ghost-border-width": 2px,
  "loading-background-color": #333333
);

Accepted values

• ghost
• fill
• tick (optional hover state)
• arrow (optional hover state)

Usage

<a href="" am-btn="ghost">Text</a>
<a href="" am-btn="fill">Text</a>
<a href="" am-btn="ghost tick">Text</a>
<a href="" am-btn="fill arrow">Text</a>

Forms

Config

$am-form: (
  "color": #111111,
  "input-height": 3rem,
  "padding": 1rem,
  "border-width": 2px,
  "border-color": #cccccc,
  "background-color": transparent,  
  "checkbox-height": 2rem,
  "checkbox-checked-size": 1.25rem,
  "placeholder-color": #888888,
  "response-negative-color": #ed9696,
  "response-positive-color": #9bd49b
);

Accepted values

• input
• textarea
• select
• checkbox

Usage

<input type="text" am-form="input">

<textarea am-form="textarea"></textarea>

<div am-form="select">
  <select>
    <option selected="true" disabled="disabled">--Select--</option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
  </select>
</div>

<div am-form="checkbox">
  <input type="checkbox" id="checkbox-1">
  <label for="checkbox-1"></label>
  <label for="checkbox-1">Label text</label>
</div>

Float

Accepted values

• clear
• left
• right
• none
• initial
• inherit

Usage

<div am-float="clear">
  <div am-float="left">
    Element floated left
  </div>
  <div am-float="right">
    Element floated right
  </div>
</div>

Align

Accepted values

• left
• right
• center
• justify
• initial
• inherit

Usage

<div am-align="left">
  Text aligned left
</div>
<div am-align="right">
  Text aligned right
</div>