If you ever found apps like Divvy or SizeUp lacking, you should check out slate window manager. It is a free, open-source window manager for OSX that is very customizable.
A huge bonus of Slate is that it allows you to setup window layouts - specific places for specific windows. This is great for different scenarios: working, dealing with email, chatting, etc. Just setup a different layout and toggle between them when switching tasks for added productivity. The up-front cost kind of sucks, but it can be worth it.
One of the things I was struggling with was creating basic window layouts with it, and I devised a bootstrap-like grid “framework” for it. What it does is try to create a generic 12x12 grid on the screen, so you can push and pull app windows into specific coordinants, similar to how a CSS framework would do it.
The framework really just sets up some slate aliases that let you set window dimensions in a more human-friendly way. The aliases break down into 4 main categories:
- span-{x}
- Set the width of the window to X columns (1/12th of screen width)
- row-{x}
- Set the height of the window to X rows (1/12th of the screen)
- push-{x}
- Move the window X columns to the right
- drop-{x}
- Move the window X rows from the top
When using these with slate’s move command you can quickly and easily setup a window arrangement that suits your needs.
Quick Example
Theres no easy way to demonstrate this without doing a video, which I’m most likely not going to get to, but here is a quick example of moving/sizing a Chrome window around the screen.
# EDIT: ~/.slate
# include our grid
source ~/.slate.grid if_exists
#== half-screen tests ==
# basic template for moving a window:
# layout <layout-name> '<window-title>' move <start-x>;<start-y> <width>;<height>
# position chrome on the left-half of the screen
# - start at 0,0 (left,top)
# - span-6, row-12 (half-width, full-height)
layout test-lh 'Google Chrome' move 0;0 ${span-6};${row-12}
# position chrome on the right-half of the screen
# - start at col-6, 0 (center of width,top)
# - span-6, row-12 (half-width, full-height)
layout test-rh 'Google Chrome' move ${push-6};0 ${span-6};${row-12}
# == quarter-screen tests ==
# position chrome in the top-left quarter
# - start at 0,0
# - span-6, row-6
layout test-tl 'Google Chrome' move 0;0 ${span-6};${row-6}
# position chrome in the top-right quarter
# - start at col-6,0
# - span-6, row-6
layout test-tr 'Google Chrome' move ${push-6};0 ${span-6};${row-6}
# position chrome in the bottom-left quarter
# - start at 0,drop-6 (left,center of height)
# - span-6, row-6
layout test-bl 'Google Chrome' move 0;${drop-6} ${span-6};${row-6}
# position chrome in the bottom-left quarter
# - start at 0,drop-6 (center of width,center of height)
# - span-6, row-6
layout test-br 'Google Chrome' move ${push-6};${drop-6} ${span-6};${row-6}
# ctrl+alt+cmd+1 = move chrome to left half of screen
bind 1:ctrl;alt;cmd layout test-lh
# ctrl+alt+cmd+2 = move chrome to right half of screen
bind 2:ctrl;alt;cmd layout test-rh
# ctrl+alt+cmd+3 = move chrome to top-left quarter
bind 3:ctrl;alt;cmd layout test-tl
# ctrl+alt+cmd+4 = move chrome to top-right quarter
bind 4:ctrl;alt;cmd layout test-tr
# ctrl+alt+cmd+5 = move chrome to bottom-left quarter
bind 5:ctrl;alt;cmd layout test-bl
# ctrl+alt+cmd+6 = move chrome to bottom-right quarter
bind 6:ctrl;alt;cmd layout test-br
To see how I’m using this, you can check my slate config in my dotfiles. You can create some pretty nice layouts depending on how you set your windows up. It also aides in setting up keybindings to move windows around your screen, with the added benefit that it “snaps” to the grid, so windows generally align.
This is not perfect, but it should help you get a grasp on window placement with slate. Please contribute if you have any suggestions or bugfixes!
The grid
The raw details.
# A 12x12 Grid "Framework" for Slate Window Manager
# NOTE: this could be much better in a .slate.js file :)
# Example2:
# # create a 6x4 window in the top-left cornet
# move 0;0 ${span-6};${row-4}
#
# # move a 6x12 (halfscreen) window next to the 6x4
# move ${push-6};0 ${span-6};${row-12}
#
# # move a 6x8 window in the bottom-left corner
# move 0;${drop-4} ${span-6};${row-8}
alias column screenSizeX/12.0
alias row screenSizeY/12.0
alias top screenOriginY
alias left screenOriginX
# Row Spans
# when "hightening" a window to Y rows (row-Y)
#
# Example:
# # create a window that takes up 50% of the screen
# resize ${span-6};${row-6}
alias row-1 ${row}*1
alias row-2 ${row}*2
alias row-3 ${row}*3
alias row-4 ${row}*4
alias row-5 ${row}*5
alias row-6 ${row}*6
alias row-7 ${row}*7
alias row-8 ${row}*8
alias row-8 ${row}*9
alias row-10 ${row}*10
alias row-11 ${row}*11
alias row-12 ${row}*12
# Column Spans
# when widening a window to X columns (span-X)
#
# Example:
# # create a window that takes up 50% of the screen
# resize ${span-6};${row-6}
alias span-1 ${column}*1
alias span-2 ${column}*2
alias span-3 ${column}*3
alias span-4 ${column}*4
alias span-5 ${column}*5
alias span-6 ${column}*6
alias span-7 ${column}*7
alias span-8 ${column}*8
alias span-8 ${column}*9
alias span-10 ${column}*10
alias span-11 ${column}*11
alias span-12 ${column}*12
# Offsets for rows
# when pushing a window Y rows from the top (drop-Y)
#
# Example:
# # create a window that takes up 50% of the screen
# resize ${span-6};${row-6}
alias drop-1 ${top}+(${row}*1)
alias drop-2 ${top}+(${row}*2)
alias drop-3 ${top}+(${row}*3)
alias drop-4 ${top}+(${row}*4)
alias drop-5 ${top}+(${row}*5)
alias drop-6 ${top}+(${row}*6)
alias drop-7 ${top}+(${row}*7)
alias drop-8 ${top}+(${row}*8)
alias drop-9 ${top}+(${row}*9)
alias drop-10 ${top}+(${row}*10)
alias drop-11 ${top}+(${row}*11)
alias drop-12 ${top}+(${row}*12)
# Offsets for columns
# when pushing a window X columns from the left (push-X)
#
# Example:
# # create a window that takes up the _right_ half of the screen
# move ${push-6};0 ${span-6};${row-6}
alias push-1 ${left}+(${column}*1)
alias push-2 ${left}+(${column}*2)
alias push-3 ${left}+(${column}*3)
alias push-4 ${left}+(${column}*4)
alias push-5 ${left}+(${column}*5)
alias push-6 ${left}+(${column}*6)
alias push-7 ${left}+(${column}*7)
alias push-8 ${left}+(${column}*8)
alias push-9 ${left}+(${column}*9)
alias push-10 ${left}+(${column}*10)
alias push-11 ${left}+(${column}*11)
alias push-12 ${left}+(${column}*12)
Source that file in your .slate file
# add this to your ~/.slate file
# source our grid
source ~/.slate.grid if_exists
# use the grid to position windows
alias left-half move 0;0 ${span-6};${row-12}
alias right-half move ${push-6};0 ${span-6};${row-12}
alias top-left-quarter move 0;0 ${span-6};${row-6}
alias top-right-quarter move ${push-6};0 ${span-6};${row-6}
alias bottom-left-quarter move 0;${drop-6} ${span-6};${row-6}
alias bottom-right-quarter move ${push-6};${drop-6} ${span-6};${row-6}