Overview

The goal of the <tggl-prjct> is to create an extremely light-weight solution for adding toggle buttons to a project, while also keeping it flexible and as feature rich as possible.

Nice looking toggle buttons take an un-proportional amount time to make compared to other HTML elements. Some larger libraries and frameworks exist that include toggle buttons, but not in a way that makes it easy to just use as a one-off feature.

That's why the <tggl-prjct> was created. This open source library of toggle buttons lets you quickly and simply add a toggle button feature to any website, and aims to make customization just as easy.

Get Started

It's as simple as Ctrl + C and Ctrl + P. Implement fully designed toggle buttons into your project in just minutes.

STEP 1: Add the CSS and JS files into your project.

Use direct links in your declaration.

<link rel="stylesheet" type="text/css" href="http://tgolson.github.io/tggl-prjct/stylesheets/tggl.css">
<script type="text/javascript" src="http://tgolson.github.io/tggl-prjct/js/tggl.js"></script>

Or, download the files directly into your project directory.

STEP 2: Use the pre-made classes inside your document.
<div class='tggl-button'>
  <div class='tggl-circle'></div>
</div>
STEP 3: Enjoy and toggle.

Features

Sizing, colors, shapes and effects can all be added to toggle buttons by simply adding, removing, or stacking classes onto the default framework.

  • STANDARD - Default design with a 
    toggle
    class that automatically appends or that can be set.
  • SIZES - Five total sizes, from 
    tiny
    to 
    huge
    to fit all projects.
  • SHAPES - Modify the default shape with custom classes like 
    tall
    or 
    long
    .
  • BORDERS - Simple styling like 
    no-border
    for the button and circle borders.
  • HOVER EFFECTS - Change the hover action for the buttons with classes like 
    no-hover
    or 
    expand-hover
    .
  • COLORS - Choose from seven color schemes by adding color classes like 
    orange
    and 
    purple
    .

All actions are written in vanilla JavaScript, which allows the library to remain lightweight an not rely on any external libraries. This also makes customization extremely easy.

If customization is desired, the simplest way to do so is to download the external files and make modifications to the existing JavaScript or CSS. This solution includes the added benefit of being able to work with the origin SASS files, if desired. However, additional actions or styles can still be added if using the hosted solution by adding or overriding styles.

Examples

Not an inclusive list of all options, see documentation.
How to Read Examples

The first item next to each button is the outer button class, the second item is the inner circle class.

For example, this code:

<div class='tggl-button green'>
  <div class='tggl-circle pill'></div>
</div>

Will translate to this example:

STANDARD

SIZES

SHAPES

BORDERS

HOVER EFFECTS

COLORS

MULTIPLE CLASSES

Documentation

View the documentation for information on classes and syntax.

For more general project information, check out the README on GitHub.

Contribute

Contribution to the <tggl-prjct> is greatly needed and greatly appreciated.

To contribute please fork the repo on GitHub, then issue a pull request for any changes made.

Check for any know issues in the repository, or lend a hand and help create something that would be cool or useful.