According to Cordell

Getting Started with Slate

By
on

Slate is an open source window management tool geared towards power users. It obviates the use of many paid tool such as Divvy and Stay. I am a long time Divvy user and was considering using Stay to manage window arrangements, until I found Slate. Slate is configured through a .slate file that will be familiar to users of vim. The full documentation can be found on Slate’s github page and I highly recommend this article on getting set up. What I would like to share below is a quick and dirty setup with slate that I found works for removing my need for Divvy, adding a cool new feature, and demonstrating a simple window management.

Here is my config file in full:

#config

# Default to the current screen if the screen the reference does not exist.
config defaultToCurrentScreen true
# The base value for nudge percent calculation
config nudgePercentOf screenSize
# The base value for resize percent calculation
config resizePercentOf screenSize
#show icons on window hints
config windowHintsShowIcons true
#show icons for windows that are below focus
config windowHintsIgnoreHiddenWindows false
#spread out the window hint options
config windowHintsSpread true

# Monitor Aliases
alias mon-laptop      1440x900
alias mon-dell        2560x1440

# Positional Aliases
alias full move screenOriginX;screenOriginY screenSizeX;screenSizeY
alias lefthalf move screenOriginX;screenOriginY screenSizeX/2;screenSizeY
alias leftthird move screenOriginX;screenOriginY screenSizeX/3;screenSizeY
alias righthalf move screenOriginX+screenSizeX/2;screenOriginY screenSizeX/2;screenSizeY
alias rightthird move screenOriginX+screenSizeX/3+screenSizeX/3;screenOriginY screenSizeX/3; screenSizeY
alias middlethird move screenOriginX+screenSizeX/3;screenOriginY screenSizeX/3;screenSizeY
alias tophalf move screenOriginX;screenOriginY screenSizeX;screenSizeY/2
alias bottomhalf move screenOriginX;screenOriginY+screenSizeY/2 screenSizeX;screenSizeY/2
alias topleft corner top-left resize:screenSizeX/2;screenSizeY/2
alias topright corner top-right resize:screenSizeX/2;screenSizeY/2
alias bottomleft corner bottom-left resize:screenSizeX/2;screenSizeY/2
alias bottomright corner bottom-right resize:screenSizeX/2;screenSizeY/2

#aliases for keymaps
alias hyper ctrl;cmd;shift;alt

#Layouts
layout 2monitors 'iTunes' ${full} ${mon-laptop}
layout 2monitors 'Slack' ${full} ${mon-laptop}
layout 2monitors 'iTerm' ${full} ${mon-laptop}
layout 2monitors 'Google Chrome' ${righthalf} ${mon-dell}
layout 2monitors 'Sublime Text 2' ${lefthalf} ${mon-dell}

# Default Layouts
#default 2monitors resolutions:${mon-laptop};${mon-dell}
#default 1monitor  resolutions:${mon-laptop}

#Bind positioning keys
bind left:cmd;ctrl ${lefthalf}
bind right:cmd;ctrl ${righthalf}
bind up:cmd;ctrl ${full}
bind f:${hyper} ${full}
bind pad7:alt;cmd;ctrl ${topleft}
bind pad1:alt;cmd;ctrl ${bottomleft}
bind pad9:alt;cmd;ctrl ${topright}
bind pad3:alt;cmd;ctrl ${bottomright}

bind right:alt;cmd;ctrl throw 1 resize
bind left:alt;cmd;ctrl throw 0 resize


#bind window switching keys
bind e:cmd hint QWERTYUIOP
bind c:${hyper} focus 'Google Chrome'
bind i:${hyper} focus 'iTerm'
bind s:${hyper} focus 'Sublime Text 2'


#bind layout keys
bind g:${hyper} layout 2monitors

Let me walk you through the individual pieces. The config section sets some basic attributes of how Slate should behave. The comment section above explains what I am setting.

When you first get started with Slate you will want to create aliases for the monitors that you use. The easiest way to do this is to open up Slate’s ‘Current Window’ option by clicking on the menu bar icon:

![Module heirarchy]({{ site.url }}/images/slate-current-window.png)

At the top of the Current Window tool you will see something like:

----------------- Screens -----------------
Left To Right ID: 1
  OS X ID: 0
  Resolution: 2560x1440
Left To Right ID: 0
  OS X ID: 1
  Resolution: 1440x900

It should be fairly obvious which screen is which to you, but if it is not you can always goto System Preferences and look at your Displays and their resolutions/IDs.

Then you can define aliases for your screens in your config:

# Monitor Aliases
alias mon-laptop      1440x900
alias mon-dell        2560x1440

Following monitor configuration, I configured aliases for a simple grid structure because I generally use divvy to just place windows in four square grid (top left, top right, etc.).

# Positional Aliases
alias full move screenOriginX;screenOriginY screenSizeX;screenSizeY
alias lefthalf move screenOriginX;screenOriginY screenSizeX/2;screenSizeY
alias leftthird move screenOriginX;screenOriginY screenSizeX/3;screenSizeY
alias righthalf move screenOriginX+screenSizeX/2;screenOriginY screenSizeX/2;screenSizeY
...

This section:

#aliases for keymaps
alias hyper ctrl;cmd;shift;alt

Creates an alias for the combination of pressing ⌘+Ctrl+Shift+Option at once.

Next we come to defining layouts. Here I am creating a single layout that I call 2monitors . The definition starts with the word layout then the name of the layout then I use an alias to where the window of the application should lie in the Grid and finally I use a monitor alias to define the screen that it should lie on. So,

layout 2monitors 'iTunes' ${full} ${mon-laptop}

essentially says: As part of the layout “2monitors” place the window for iTunes in full screen on the screen mon-laptop (laptop monitor).

The complete rule set is this:

layout 2monitors 'iTunes' ${full} ${mon-laptop}
layout 2monitors 'Slack' ${full} ${mon-laptop}
layout 2monitors 'iTerm' ${full} ${mon-laptop}
layout 2monitors 'Google Chrome' ${righthalf} ${mon-dell}
layout 2monitors 'Sublime Text 2' ${lefthalf} ${mon-dell}

Which means put the windows for iTunes, Slack, iTerm on my laptop monitor with iTerm on top. Then place Chrome on the right half of my dell monitor and Sublime Text on the left half of dell monitor

Next I define a series of key bindings that match with the way I was using Divvy.

bind left:cmd;ctrl ${lefthalf}
bind right:cmd;ctrl ${righthalf}
bind up:cmd;ctrl ${full}
bind f:${hyper} ${full}

Similarly I map the ten key numbers to a four corner grid:

bind pad7:alt;cmd;ctrl ${topleft}
bind pad1:alt;cmd;ctrl ${bottomleft}
bind pad9:alt;cmd;ctrl ${topright}
bind pad3:alt;cmd;ctrl ${bottomright}

These two bindings allow for quick placement of a window on another monitor via ⌘+Ctrl+Option+(left arrow key|right arrow key).

bind right:alt;cmd;ctrl throw 1 resize
bind left:alt;cmd;ctrl throw 0 resize

Slate provides window hints which allow you to quickly switch between windows via hints. In my case I set ⌘+e to display the window hints and then QWERTYUIOP as the possible keys that can be used as hints.

bind e:cmd hint QWERTYUIOP

The following bindings allow for quick switching by using Hyper + a key to

bind c:${hyper} focus 'Google Chrome'
bind i:${hyper} focus 'iTerm'
bind s:${hyper} focus 'Sublime Text 2'

Finally I set a binding to trigger the 2monitors layout I defined above:

bind g:${hyper} layout 2monitors