Maneuver

About Maneuver

Maneuver is a collection of stylus mixins to facilitate creating interactive css elements. Some of the mixins help with creating the layout, most will require coordinating HTML and JavaScript along with the mixins, and all of them will help you to create the effect of movement and transition on the page.

Maneuver Mixins

tabs

The tabs mixin reveals the active content by adding/removing classes on the content element. It is up to you how you want to coordinate the navigation with the content. In these examples, the jQuery depends on the index of the tab in the navigation matching the index of the content.

Use Params Notes

Basic Use

HTML

<div class="tabs">
  <div>
    <span>Tab 1</span>
    <span>Tab 2</span>
    <span>Tab 3</span>
  </div>
  <div>
    <div>Tab 1 content</div>
    <div>Tab 2 content</div>
    <div>Tab 3 content</div>
  </div>
</div>

Stylus

.tabs
  tabs()

jQuery

$('.tabs > div:first-child').on('click', function (e) {
  var index = $(e.target).index();
  $(this).next().children().removeClass('active').eq(index).addClass('active');
  $(this).children().removeClass('active').eq(index).addClass('active');
});

Parameters and defaults

tabs(side:'top', height:auto, navSize:auto, fade:0.3s, active:'active')

side
where to place the tab navigation. Options are top, bottom, left, right. Left and right are vertical.
height
the height of the parent element (element that tabs() is called on).
navSize
height(top/bottom) or width(left/right) of the tab navigation
fade
fade speed, set to 0 or false to disable.
active
the active class, added to tab content element to reveal content

Notes

  • Tabs uses flexbox (not supported by IE9)
  • No styling (padding/margin/border) set on navigation tabs.
  • Tabs needs to be aware of any specified height on the parent element, so it's included as a parameter.

offcanvas

The offcanvas mixin allows you to create a menu that hides outside of it's parent element, and opens/closes by adding/removing a class on the parent element.
The menu on the left side of this page is an example of the offcanvas mixin.

Use Params Notes

Basic Use

HTML

<div class="container">
  <div class="menu-left">Left menu</div>
  <div class="content">
    <button>Toggle menu</button>
    <article>My content</article>
  </div>
</div>

Stylus

.container
  offcanvas()

jQuery

$('button').on('click', function (e) {
  $('.container').toggleClass('open');
})

Parameters and defaults

params(side:'left', size:15em, share:40em, show:80em, push:0, menu:'.menu', content:'.content', open: 'open', transition:all 03s ease)

side
Orientation of offcanvas menu. Options are 'top', 'right', 'bottom', or 'left'
size
Width of left/right menus, height of top/bottom menus
share
Minimum screen width at which menu will share the container with content when menu is open. Set to 0 to disable.
show
Minimum screen width at which menu can't be hidden. Set to 0 to disable.
push
Only applies when share or show don't apply. 0 or false causes menu to overlap content. 1 or true causes menu to push content offscreen
menu
css selector for the menu element
content
css selector for the content element
open
class that gets toggled on the parent element for open/close
transition
transitions setting

Notes

  • To disable share or show, set it to 0.
  • To enable share or show at any screen size, set it to 0em.
  • The offcanvas menu and content adopt the height of the parent element. For a full page offcanvas menu, you'll need to set height 100% on the parent element and all elements up through <html>.
  • Offcanvas doesn't have any css rules for the toggle buttons, but it's on the roadmap.

offcanvasMulti

The offcanvasMulti mixin is similar to offcanvas, except that you can create up to 4 offcanvas menus inside of the parent element.

Use Params Notes

Basic Use

HTML

<div class="container">
  <div class="menu-left">Left menu</div>
  <div class="menu-right">Right menu</div>
  <div class="content">
    <button data-menu="left">Toggle left menu</button>
    <button data-menu="right">Toggle right menu</button>
    <article>My content</article>
  </div>
</div>

Stylus

.container
  offcanvasMulti()

jQuery

$('button').on('click', function (e) {
  var menu = $(this).data('menu');
  $('.container').toggleClass('open-'+menu);
})

Parameters and defaults

Please refer to offcanvas for an explanation of each parameter. Most parameters in offcanvasMulti are an array of 4 values. In traditional css shorthand style, the order of the array (top right bottom left). The default values are listed below.

size
(0 15em 0 15em)
share
(0 40em 0 40em)
show
(0 80em 0 80em)
push
(0 0 0 0)
menu
('.menu-top' '.menu-right' '.menu-bottom' '.menu-left')
content
'.content'
open
('open-top' 'open-right' 'open-bottom' 'open-left')
transition
all 0.3s ease

Notes

  • Assign z-index values to menus for specifying which will overlap another.
  • The offcanvas mixin actually calls offcanvasMulti internally and passes 0 for all values except the desired side.

flipCard

Flipcard is a two sided card that flips around either the X or Y axis.

Use Params Notes Example

Basic Use

HTML

<div class="my-card">
  <div>
    <div>front content</div>
    <div>back content</div>
  </div>
</div>

Stylus

.my-card
  flipCard()

jQuery

$('.my-card').on('click', function (e) {
  $(e.currentTarget).toggleClass('flip');
})

Parameters and defaults

flipCard(axis:Y, flip:'flip', speed:0.6s, perspective:1000)

axis
the axis about which the card rotates (X or Y)
flip
the class that causes the parent container to flip
speed
the speed it takes for the card to flip
perspective
css 3D perspective, the bigger the number, the further away it seems you are

Notes

  • flipCard uses css3 3D transform (not supported by IE9)
  • The first child of the parent element rotates inside of the parent

Example

Front Content

Back Content

toggle

Toggle styles a checkbox as an on/off switch. You can customize most aspects of it. You can put a label on the switch, you can change the on/off text, and you can specify all the colors in both the on and off states.

Use Params Notes Example

Basic Use

HTML

<div class="my-toggle">
  <input type="checkbox" id="my-setting">
  <label for="my-setting"><span>Heater</span></label>
</div>

Stylus

.my-toggle
  toggle()

Parameters and defaults

toggle(width:8em, height:2.5em, text: ('OFF' 'ON'), switch:(#b2b3a1 #000), switchOn: (#b2b3a1 #000), off:(#bb9297 #000), on:(#29c910 #000), sideWidth: 0, shadow:1)

width
Toggle width
height
Toggle height
text
OFF/ON text
switch
(background-color [text-color]), colors for the moving part of the toggle
switchOn
(background-color text-color), optional alternate colors for the switch in on position
off
(background-color text-color), colors and content for the 'off' part of the toggle
on
(background-color text-color), colors and content for the 'on' part of the toggle
sideWidth
Width of the on/off parts. When set to 0, mixin sets it to width/2.5.
shadow
inset shadow for on/off parts, set shadow to 0 to disable

Notes

  • Checkbox must have an id that matches the 'for' attribute of label. This is because checkbox is hidden and the switch is actually the label. Setting the 'for' attribute allows us to toggle the checkbox when the label is clicked.
  • The span element inside of the label is necessary. This enables the mixin to vertically center the text.

Example