Syntax¶

Description: move is defined as a grid utility that alters the source ordering by shifting an element or elements left, right, up, or down through the left or top property.

Arguments:

• <fraction> String | Number
  • Required argument
  • The amount the element shifts relative to its parent container
• <gutter> String | Literal
  • Default: 30px
  • Sets the gap between elements
  • A gutter of 0 equals no gutter at all
• <direction> String 'row' | 'column'
  • Default: 'row'
  • The type of grid that move is being applied to

// longhand
ctr('<#selector>', {
  grid: {
    move: {
      fraction: '<string>'
      direction: '<string>' | 'row'
      gutter: '<string>' | 30px
    }
  }
})

# longhand
<#selector>:
  grid:
    move:
      fraction: <string>
      direction: <string> | row
      gutter: <string> | 30px

// shorthand
ctr('<#selector>', {
  grid: {
    move: '<fraction>' '<direction>' '<gutter>'
  }
})

# shorthand
<#selector>:
  grid:
    move: [<fraction>, <direction>, <gutter>]

Notes

• You can use the default keyword to use the default value
• For the sake of brevity, I use the shorthand syntax for the examples
• Lost Move

Left¶

Description: A positive move value moves the element to the left.

ctr('.test', {
  grid: {
    move: '1/3'
  }
})

.test:
  grid:
    move: 1/3

.test {
  position: relative;
  left: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3) + 30px);
}

ctr('.test', {
  grid: {
    move: '1/3'
  }
})

.test {
  position: relative;
  left: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3) + 30px);
}

.test:
  grid:
    move: 1/3

Right¶

Description: A negative move value moves the element to the right.

ctr('.test', {
  grid: {
    move: '-1/3'
  }
})

.test:
  grid:
    move: -1/3

.test {
  position: relative;
  left: calc(99.9% * -1 / 3 - (30px - 30px * -1 / 3) + 30px);
}

ctr('.test', {
  grid: {
    move: '-1/3'
  }
})

.test {
  position: relative;
  left: calc(99.9% * -1 / 3 - (30px - 30px * -1 / 3) + 30px);
}

.test:
  grid:
    move: -1/3

Up¶

Description: A positve move value and a 'column' direction value moves the element up.

ctr('.test', {
  grid: {
    move: '1/3' 'column'
  }
})

.test:
  grid:
    move: [1/3, column]

.test {
  position: relative;
  top: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3) + 30px);
}

ctr('.test', {
  grid: {
    move: '1/3' 'column'
  }
})

.test {
  position: relative;
  top: calc(99.9% * 1 / 3 - (30px - 30px * 1 / 3) + 30px);
}

.test:
  grid:
    move: [1/3, column]

Down¶

Description: A negative move value and a 'column' direction value moves the element down.

ctr('.test', {
  grid: {
    move: '-1/3' 'column'
  }
})

.test:
  grid:
    move: [-1/3, column]

.test {
  position: relative;
  top: calc(99.9% * -1 / 3 - (30px - 30px * -1 / 3) + 30px);
}

ctr('.test', {
  grid: {
    move: '-1/3' 'column'
  }
})

.test {
  position: relative;
  top: calc(99.9% * -1 / 3 - (30px - 30px * -1 / 3) + 30px);
}

.test:
  grid:
    move: [-1/3, column]

Gutter¶

Description: The value for the gutter accounts for the gutter set on the column or row.

ctr('.test', {
  grid: {
    move: '1/2' default 60px
  }
})

.test:
  grid:
    move: [1/2, default, 60px]

.test {
  position: relative;
  left: calc(99.9% * 1 / 2 - (60px - 60px * 1 / 2) + 60px);
}

ctr('.test', {
  grid: {
    move: '1/2' default 60px
  }
})

.test {
  position: relative;
  left: calc(99.9% * 1 / 2 - (60px - 60px * 1 / 2) + 60px);
}

.test:
  grid:
    move: [1/2, default, 60px]

Notes

• Unfortunately, this value is not set automatically for you, but it will be in the future