Base Buttons

Base buttons is designed in a way where you can add it on top of the Base CSS framework or to your own custom project.

Table of contents

• Overview
• Installation
• Documentation
• Demo
• Support
• Authors
• License

Overview

Base buttons is a very thin layer which includes styles for decorating buttons and links.

Installation

If you have an existing project and would like to include the Base buttons module, run the following command:

npm install --save @getbase/buttons

Once you have the buttons module installed, you can include it in your CSS/LESS/SCSS file with one of the following ways:

CSS Import:

@import url("https://unpkg.com/@getbase/buttons/index.css");

SCSS Import:

/* Import Base Buttons */
@import "~@getbase/buttons/scss/index";
/* Your Other Styles */
@import "main"

LESS Import:

/* Import Base Buttons */
@import "~@getbase/buttons/less/index";
/* Your Other Styles */
@import "main"

Documentation

Base Buttons includes styles for decorating buttons and links.

Buttons (Applies to SCSS/LESS)

| Class | Purpose | Example | Outcome | | ------------ | ------- | ------- | ------- | | .button | Apply a .button | <button class="button">This is a button</button> | Applies a .button to a button element | | .button-link | Apply a .button-link | <button class="button-link">This is a button that is styled like a link</button> | Applies a .button-link to a button element which styles it to look like a regular link |

SCSS

Variables

| Variable | Purpose | Default | | -------- | ------- | ------- | | $base-button-border-color | Border color applied to a .button | #e1e1e1 | | $base-button-color | Color applied to a .button | #000 | | $base-button-background-color | Background color applied to a .button | #f9f9f9 | | $base-button-color-hover | Color applied to a .button when hovered | #000 | | $base-button-background-color-hover | Background color applied to a .button when hovered | #eee | | $base-button-color-active | Color applied to a .button when active | #000 | | $base-button-background-color-active | Background color applied to a .button when active | #ccc |

LESS

Variables

| Variable | Purpose | Default | | -------- | ------- | ------- | | @base-button-border-color | Border color applied to a .button | #e1e1e1 | | @base-button-color | Color applied to a .button | #000 | | @base-button-background-color | Background color applied to a .button | #f9f9f9 | | @base-button-color-hover | Color applied to a .button when hovered | #000 | | @base-button-background-color-hover | Background color applied to a .button when hovered | #eee | | @base-button-color-active | Color applied to a .button when active | #000 | | @base-button-background-color-active | Background color applied to a .button when active | #ccc |

Demo

View page example with the buttons stylesheet applied.

Support

• IE10+ and all other modern browsers.
• Please specify browsers you need to support in package.json according to browserslist docs.

Authors

Matthew Hartman

• https://twitter.com/matthewhartmans
• https://github.com/matthewhartman

License

Code released under the MIT Open Source license.