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.

class that automatically appends or that can be set. SIZES - Five total sizes, from tiny to huge to fit all projects.

to to fit all projects. SHAPES - Modify the default shape with custom classes like tall or long .

or . BORDERS - Simple styling like no-border for the button and circle borders.

for the button and circle borders. HOVER EFFECTS - Change the hover action for the buttons with classes like no-hover or expand-hover .

or . 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.