Keen CSS

Hello, friend.

I'm Keen CSS. Built atop Tachyons, I provide a flexible framework for building a more legibile, pleasant, and beautiful user experience for Keen IO.

Buttons

Buttons are a major player in any user interface. Always prioritize using the button element, though anchor and submit inputs will also be styled appropriately when using the following classes.

Button Variants

Default Button

Basic button style for general use and subtle controls.

k--button
Primary Button

To call attention to primary actions.

k--button-primary
Secondary Button

For secondary or less used actions, or to call less attention to a primary action, or more attention than a default button.

k--button-secondary
Link Button

For subtle buttons to be displayed as a link. These are usually only used when next to another button.

k--button-link
Danger Button

For destructive and irreversable actions.

k--button-danger
Danger Button (primary)

For destructive and irreversable actions. Only use this style when it is the sole primary action. This will primarily be the case on a confirmation step.

k--button-danger-primary

Button Sizes

Small Buttons

For small buttons to fit in small places or subtler controls.

k--button-primary k--button-small
Large Buttons

For big buttons used mainly on marketing pages. Combine with any button class.

k--button-primary k--button-large

Alternate Button States

Disabled Buttons

This state is achieved when disabled is set on button and input elements. To apply the disabled state with a class, apply k--disabled to any button, including a elements.

Active Buttons

For buttons that are active. These are commonly used to depict a selected button within a button group.

k--button k--active

Button Components

Button Group

For grouping a set buttons. These are mainly used when a set of toggles are required in an interactive application. Simply surround a group of buttons in a div with the class k--group 

<div class="k--group">
  <button class="k--button" type="button">Left</button>
  <button class="k--button" type="button">Middle</button>
  <button class="k--button" type="button">Right</button>
</div>

Forms

Use these classes to attain consistency across some of the most interactive components in any user interface.

Inputs

Standard

Use this class on every input.

k--input
Read-only

This state is achieved when readonly is set on the input element with the k--input class.

Disabled

This state is achieved when disabled is set on the input element with the k--input class.

Validation

Invalid
k--input b--red focus-red
Valid
k--input b--green focus-green

Selects

Standard
k--select
Disabled

This state is achieved when disabled is set on the select element with the k--select class.

Textareas

Standard
k--textarea
Readonly

This state is achieved when readonly is set on the textarea element with the k--textarea class.

Disabled

This state is achieved when disabled is set on the textarea element with the k--textarea class.

Labels and Helper Text

Label

To label form elements. This class can be applied to label elements, or other elements like legend or p when appropriate.

k--label
Form Help

For helper text that follows a form field.

k--form-help

Some helpful text.

Radio Buttons

Radio Button

For better usability, put radio inputs inside a corresponding label with the k--label-radio class. 

<label class="k--label-radio">
  <input type="radio" name="option-radios" id="option-radios-1" value="option-1">
  Option One
</label>
Disabled Radio Button

This state is achieved when disabled is set on the radio input. Add a k--disabled class to the label to give the text a disabled appearance as well. 

<label class="k--label-radio k--disabled">
  <input type="radio" name="option-radios" id="option-radios-4" value="option-1" disabled>
  Disabled Radio
</label>

Checkboxes

Checkbox

For better usability, put checkbox inputs inside a corresponding label with the k--label-checkbox class. When this is done, not only is the checkbox clickable, but the corresponsing text as well. 

<label class="k--label-checkbox">
  <input type="checkbox" name="option-checkboxes" id="option-checkboxes-1" value="option-1">
  Option One
</label>
Disabled Checkbox

This state is achieved when disabled is set on the checkbox input. Add a k--disabled class to the label to give the text a disabled appearance as well. 

<label class="k--label-checkbox k--disabled">
  <input type="checkbox" name="option-checkboxes" id="option-checkboxes-4" value="option-1" disabled>
  Disabled checkbox
</label>

Form Sizes

Small Inputs

For small inputs to fit in small places or subtler controls.

k--input k--input-small
Large Inputs

For big inputs used mainly on marketing pages or simple forms.

k--input k--input-large
Small Selects

For small selects to fit in small places or subtler controls.

k--select k--select-small
Large Selects

For big selects used mainly on marketing pages or simple forms.

k--select k--select-large

Form Components

Form Group

For grouping a set of inputs, or an input and button. These are mainly used when a button is tied to a single form input, and space and simplicity are essential. Simply surround the elements in a div with the class k--group 

<div class="k--group">
  <input class="k--input" type="text" placeholder="Placeholder">
  <button class="k--button" type="button">Button</button>
</div>

Badges

Badges give the ability to denote the status of something. Either an update, a quantity, a beta version, an error, or whatever else should have attention called to it.

Basic Badge

This is a basic badge, and can be easily styled by adding a class to change the background color.

k--badge
Badge
Blue Variant
k--badge bg-blue
3 Updates
Green Variant
k--badge bg-green
New Feature
Gold Variant
k--badge bg-gold
Required
Red Variant
k--badge bg-red
5 Errors