Additional layout information, retrieving specific buttons

I've been playing around with the layout's features and thought it might be nice to add this to the documentation: If you have multiple {meta} keys for example and want the same layout to have space in between each row, all you need to do is add a vertical-alignment to it. This is also useful if you want specific stylings for specific buttons only.

Here's an example to do this for a custom layout:

customLayout: {
  'normal' : ['a b c ', 
              '{shift} {meta1}'],
  'shift'  : ['A B C D E',
            '{shift} {meta1}'],
  'meta1'  : ['1 2 3',
             '{shift} {meta1} hi']
}

Think of the above as a matrix. Each parenthesis here contains the coordinates of the data position of a single button.

'normal': 
first row:       [(0,0)(0,1)(0,2)]               
second row:      [(1,0)(1,1)]
(meta/shift keys change to a new view)

'shift':
first row:       [(0,0)(0,1)(0,2)(0,3)(0,4)]               
second row:      [(1,0)(1,1)]

'meta1':
first row:       [(0,0)(0,1)(0,2)]               
second row:      [(1,0)(1,1)(1,2)]

Then if I wanted to grab the shift key for "each" view, this will be your CSS code:

[data-pos="1,0"]{
  /*moves all buttons with this data position of "1,0", vertically 10px*/
  vertical-align: 10px;
}

This similiarly could be applied to a specific button name, and not according to the position itself

[data-name="hi"]{
  /*moves all with the name hi, vertically 10px*/
  vertical-align: 30px;
}

Hope this helps some people.

Mottie / Keyboard

Additional layout information, retrieving specific buttons #554