Overview

Description

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Installation

1. Get the code into your project using a package manager.

If you're using NPM, run the following from the commandline:

npm install sass-button-builder --save
npm install

If you're using Yarn, run:

yarn add sass-button-builder

2. Import the main Scss partial somewhere in your stylesheets

Do so with:

@import('PATH_T0_PROJECT_ROOT/node_modules/sass-button-builder/sass-button-builder.scss');

Inside your main or 'master' stylesheet is generally a good default location (for example, myproject/app/stylesheets/main.scss).

A Scss partial holding all 3rd-party code, plugins, or vendor packages is also common (often someting like, myproject/src/styles/lib/_vendor.scss).

Usage

Main Mixins

File Location: sass-button-builders/button-builder.scss

Create Solid Button

/**
 * Creates a solid button of a supplied fill color with slightly-rounded corners.
 * 
 * @param:      $_color     HEX/HSL/RGB(a) value, unquoted CSS-Color string-identifier
 *                          (DEFAULT : $default-button-color)
 *                          
 * @example:    .my-button { @include solidButton(mediumslateblue); }
 *              .my-other-button { @include solidButton(#333333); }
**/
@mixin solidButton($_color: $button-color--default) { ... }

Create Round Button

/**
 * Creates a rounded button of a supplied fill color with fully-rounded, oval corners.
 * 
 * @param:      $_color     HEX/HSL/RGB(a) value, unquoted CSS-Color string-identifier
 *                          (DEFAULT : $default-button-color)
 *                          
 * @example:    .my-button { @include roundButton(mediumslateblue); }
 *              .my-other-button { @include roundButton(#333333); }
**/
@mixin roundbutton($_color: $button-color--default) { ... }

Create Outline Button

/**
 * Creates a outlined button of supplied text- and border-color with slightly-rounded corners.
 * 
 * @param:      $_color     HEX/HSL/RGB(a) value, unquoted CSS-Color string-identifier
 *                          (DEFAULT : $default-button-color)
 *                          
 * @example:    .my-button { @include outlineButton(mediumslateblue); }
 *              .my-other-button { @include outlineButton(#333333); }
**/
@mixin outlineButton($_color: $button-color--default) { ... }

Mixing These Styles

Rounded Outline Button

.round {
    @include roundButton();
    &.outline {
        @include outlineButton();
    }
}
// or ...
.round.outline {
    @include roundButton();
    @include outlineButton();
}

Color Classes

Add these classes to automatically adjust the color

.primary {...}
.secondary {...}
.danger {...}
.warning {...}
.success {...}
.alternate {...}
.info {...}

A Note On Semantics

This project's aim was to enable button creation with the fewest possbile implementation steps and cleanest / most semantic markup. Thus, the preference is to write markup as such:

<button role="button">Default</button>

<button role='button' class='primary'>Primary</button>

<button role="button" class="round">Default</button>

<button role='button' class='outline danger'>Outline</button>

<!-- No need to add `.button` class, as `role="button"` is more effective -->
<a role="button">Button-Style Link</a>

<!-- No need to add `.button` class, as `role="button"` is more effective, -->
<!-- but `type="button"` is still a good idea. --> 
<input role="button" type="button" class="outline secondary">Button-Style Input />

<!-- No need to add `.button` class, as `role="button"` is more effective, -->
<!-- but `type="button"` is still a good idea. --> 
<input role="button" type="submit" class="round primary">Button-Style Submit />

<button role='button' class='round outline success'>Success</button>

Variables, Settings, and Configurations

File Locations:

sass-button-builders/core/_variables.scss sass-button-builders/core/_config.scss sass-button-builders/core/_settings.scss

Images

Screenshots