This repository has been archived by the owner on Mar 2, 2019. It is now read-only.
Module Naming Standards
Dennis Gaebel edited this page Apr 21, 2014
·
2 revisions
Base effect (prefixed) class name = .effeckt-name
Variations on that effect are data-* attributes, also prefixed = [data-effeckt-type="variation"]
States are also data-* attributes = [data-effeckt-state="state"]
| Effect | Class | Data-attribute use | Notes |
|---|---|---|---|
| Buttons | .effeckt-button | [data-loading] for state | Variations are classes like .expand-down |
| Captions | .effeckt-caption | none | Variations are classes like .effeckt-caption-5 |
| List Items | .effeckt-list | [data-type] for variations | State of new/removed items are classes like .new-item |
| List scroll | .effeckt-list-scroll | [data-effeckt] for variations | State of list items are classes like .past / .future |
| Modals | .effeckt-modal | none | Variations are classes like .md-effect-7 / states are classes like .effeckt-show and .md-perspective |
| Off Screen Nav | .effeckt-off-screen-nav-* | none | named classes, some need body state |
| Page transitions | .effeckt-page-transition-* | none | named classes, timing classes |
| Tooltips | .effeckt-tooltip | in-flux a bit... but probably [data-effeckt-tooltip-position] for position, [data-effeckt-tooltip-type] for variation and [data-effeckt-tooltip-text] for text |