Helper classes & attributes

Helper classes and attributes are HTML patterns backed up with JavaScript built into the DOM scripting payload (not included in ACE Core). This is for extremely common tasks that are tiresome to repeatedly create, such as showing and hiding an element. Useful both in production and rapid prototyping.

Some helpers are designed to make it easy to respond to the client environment, for example to show different content to users on different platforms (Mac of PC keyboard shortcuts, for example).

Helper Example Details Code
Assistive (visually hidden)
Hidden from view, but available to screen readers.
Visible text (view source to see assistive text).
 The ACE Assistive class visually hides an element for accessibility purposes. It is not rendered visibly, but is available to assistive technology such as screen readers. Most of the time, this class is handled by ACE templates but it can be used directly if required. 

                                                                    <div class="ace-assistive">Hidden from view, but available to screen readers.</div>
                                                                    <div>Visible text (view source to see assistive text).</div>
Hidden
Not hidden (view source to see hidden text).
 ACE provides CSS to enable logical behaviour from the aria-hidden attribute: when set to true, the element is hidden from all users. When set to false, it is available as normal. This is the recommended way to manage shown and hidden state of an elment via JavaScript, particularly as it provides a test-detectable state for both shown and hidden (as opposed to having a hidden class and the absence of a hidden class). Note for testing purposes that the boolean values are strings and not true booleans. 

                                                                    <div aria-hidden="true">Hidden from all humans.</div>
                                                                    <div aria-hidden="false">Not hidden (view source to see hidden text).</div>
Fit and fill
Stoffel says: I will not grow larger than 100%
Stoffel says: I will always grow to 100%

ace-fit sets the element to max-width: 100% (fit the space).

ace-fill sets the element to min-width: 100% (fill the space).

The two can be combined, to create an element that grows and shrinks with its parent. Remember that your content must be suitable for this usage; and the specific combination of layout surrounding the element will change how this behaves. Test carefully!

Note that IE11 is set to width: 100%; flex: 1; in both cases. It lacks finesse, but it's the best IE11 can manage.

The Layout component has its own fit and fill classes which have the same effect but different code. Do not apply generic fit and fill to ace-item elements.

 
<img src="images/avatar-stoffel-80x80.jpg" alt="Stoffel says: I will not grow larger than 100%" class="ace-fit">
<img src="images/avatar-stoffel-80x80.jpg" alt="Stoffel says: I will always grow to 100%" class="ace-fill">
Javascript class
JS has not loaded.
JS has loaded.
 Javascript check: ACE applies the class ace-has-js to the html element when JavaScript has loaded; and removes the class no-js if it is present. 

                                                                    <html class="ace-has-js"></html>
Browser and OS
You're using Windows.
You're using MacOS.
You're using Linux.
You're using Android.
You're using iOS
You're using Windows Phone.

Browser classes are applied to the html element to allow reliable targeting of specific browsers. This should only be used where cross-platform CSS and feature detection are not sufficient to isolate a specific browser that requires a tweak. To be used sparingly. Major versions of browsers are identified, there is a not-ie class and a 'less than or equal to' class for old IE versions.

Do not interrogate these classes with JavaScript, use the helper functions instead if you need OS-aware JavaScript.

Non-IE browsers:


                                                                    <html class="mac chrome chrome-51 not-ie"></html>

Internet Explorer gets additional classes to handle ranges:


                                                                    <html class="windows msie msie-11 msie-lte-11"></html>

Note that Edge is not classed as IE:


                                                                    <html class="windows edge edge-14 not-ie"></html>
Toggle Element

Click me

Click me

When the element is clicked, shows or hides elements matching a selector query (ID, class, etc). The shown or hidden state is toggled based on the target element's aria-hidden attribute. For example, to hide the target element(s) on first load, set them to aria-hidden="true".

Note data-acetogglelement should only be applied to elements that can be focused with the keyboard (a, button, etc).

Works with ID...


                                                                    <p><a data-acetoggleelement="#showme">Click me</a></p>
                                                                    <p id="showme" aria-hidden="true">Show me</p>

...or any valid querySelector such as class:


                                                                    <p><a data-acetoggleelement=".showus" class="ace-link">Click me</a></p>
                                                                    <p aria-hidden="true" class="showus">Show us</p>
                                                                    <p aria-hidden="true" class="showus">Show us</p>
                                                                    <p aria-hidden="true" class="showus">Show us</p>
Forms Auto-reveal See Forms Auto-reveal When a form input is selected, shows or hides elements matching a selector query. This is distinct from Toggle Element since form inputs have different states that you may need to respond to. See Forms Auto-reveal page for details.