coughdrop v4.0.0

Coughdrop

An opinionated set of styles and variables for use in my projects

version notes (latest)

v4.0.0

This version breaks old button styles. I have moved to a shade- class format instead It also changes ghost and transparent to isGhost and isTransparent modifiers

• fixed ghost and transparent buttons not getting colors
• fixed buttons not having colored borders
• added minified version

usage

// less
@import "coughdrop.less";

/* css */
@import "coughdrop.css";

<!-- html -->
<link rel="stylesheet" href="coughdrop.css">

buttons

Buttons are probably the single most important style I use in any app. So I have standardized the classes and colors that I commonly use to make things simple.

All classes follow the same pattern and their respective color variable definitions can be found in coughdrop-variables.less.

Example:

    <button class="button button-positive">This is a primary button</button>
    <button class="button button-positive shade-dark">This is a primary button but shaded darker</button>
    <button class="button button-positive isGhost">This is a secondary button</button>
    <button class="button button-positive isTransparent">This is a secondary button with a transparent background</button>

colors

Colors are defined in coughdrop-variables.less and are used in the following ways:

    <span class="positive">Positive Colored Text</span>
    <span class="bg-positive lighter">Positive Background Text With White Foreground</span>

// colors
positive - primary color - blue
balanced - success color - green
energized - warning color - yellow
assertive - error color - red
juicy - accent color - purple/pink

// grayscale
neutral - neutral color - gray
light - off white
dark - off black

each of the colors fit in the middle of a lighter to darker range. For example:

.positive
    .shade-lighter
    .shade-light
    .shade-dark
    .shade-darker

    <span class="positive">Positive Colored Text</span>
    <span class="positive shade-lighter">Positive Colored Text but Lighter</span>