Markup

Foundation

Our markup is strong and built with A11Y in mind. Since not all screen readers know what aria-label is yet we've chosen to include important text in a .tcon-visuallyhidden span using the HTML5 Boilerplate method that is screen reader friendly.

Buttons

<button type="button" class="tcon" aria-label="[description]">
  <span class="" aria-hidden="true"></span>
  <span class="tcon-visuallyhidden">[screen reader text]</span>
</button>

Symbols/Icons

<span class="tcon" aria-hidden="true"></span>

Sass

Structure

Using the custom builder authors have the option to customize their Sass port of Transformicons. Each Sass partial is structured according to config, variation and the object(s) chosen. Your specific _tcons.scss file will vary depending on your custom build choices.

// Config
@import "base/config-globals";
@import "base/config-menu";
@import "base/config-utilities";
@import "base/global-styles";

// Variations
@import "style/menu-lines";

// Icons
@import "type/menu-xcross";
@import "type/menu-xbutterfly";

JavaScript

Benefits

Transformicons are mostly powered by CSS however, a little piece of JavaScript is required to toggle the transformed states. We've taken the time to ensure the greatest amount of flexibility has been given to the code so that you the author can haveā€¦

When integrating a custom build into your project the .add() method line below is required and should directly follow the transformicons JavaScript library we've provided.

<script src="site/js/transformicons.js"></script>
<script>transformicons.add('.tcon')</script>

Arguments

ArgumentTypeDescription
elements(string|element|array)Selector, DOM element or Array of DOM elements to be toggled
events{object}An Object containing one or more special event definitions

Objects

PropertyValueDescription
transform{(string|array)}One or more events that trigger the transform. Can be an Array or string with events seperated by space.
revert{(string|array)}One or more events that trigger the reversion. Can be an Array or string with events seperated by space.

Methods

Event MethodArgumentsDescription
transformicons.add()elements, eventsAdds functionality to elements. If no events are supplied, the default click events are used
transformicons.transform()elementsManually trigger a transform
transformicons.remove()elements, eventsRemoves functionality from elements. If no events are supplied, the default click events are used
transformicon.revert()elementsManually trigger reversion to original state
transformicon.toggle()elementsToggle between transformed and original state

example

transformicons.add('.tcon') // add default behavior for all elements with the class .tcon
              .remove('.tcon-menu--xcross') // remove default behavior for the first icon
              .add('.tcon-menu--xcross', {
                  transform: "mouseover",
                  revert: "mouseout"
              }); // add new behavior for the first icon