Info¶

Helpers are a smorgasbord collection of helpful utilities to help you achieve greatness. While some helpers could constitute a section unto themselves, I thought it was best to group them together for clarity. Put simply, helpers can be used within features but features cannot be used within helpers. Alternatively, it may be helpful to think of helpers in the same vein as compass and Kouto Swiss. As of right now, I have only included helpers I regularly use. But, with the rewrite, helpers will become a central facet of ctr that will act as a plugin hub for all kinds of helper functions.

Syntax¶

Description: A helper is defined as a key-value pair that helps you achieve greatness.

ctr('<#selector>', {
  <helper:property>: <helper:value>
})

<#selector>:
  <helper:property>: <helper:value>

<#selector> {
  <...>: <...>;
}

Notes

• Regex Match: /^<helper:key>$/i

Clearfix¶

Description: The value of true for the clearfix property creates CSS properties for the clearfix hack.

ctr('.test', {
  width: 200px
  clearfix: true
})

.test:
  width: 200px
  clearfix: true

.test {
  width: 200px;
}
.test::after {
  clear: both;
  content: "";
  display: table;
}

ctr('.test', {
  width: 200px
  clearfix: true
})

.test {
  width: 200px;
}
.test::after {
  clear: both;
  content: "";
  display: table;
}

.test:
  width: 200px
  clearfix: true

Notes

• On principle, ctr does not support the IE clearfix hack
• Clearfix hack information

Edit¶

Description: The value of true for the edit property creates a descendant selector for the universal selector at the scope level it is defined to create a visual representation of the child elements.

ctr('.test', {
  width: 200px
  edit: true
})

.test:
  width: 200px
  edit: true

.test {
  width: 200px;
}
.test * {
  background: rgba(0,0,255,0.1);
}

ctr('.test', {
  width: 200px
  edit: true
})

.test {
  width: 200px;
}
.test * {
  background: rgba(0,0,255,0.1);
}

.test:
  width: 200px
  edit: true

// Specifiy custom edit color
ctr('.test', {
  width: 200px
  edit: alpha(teal, 0.1)
})

# Specifiy custom edit color
.test:
  width: 200px
  edit: alpha(teal, 0.1)

.test {
  width: 200px;
}
.test * {
  background: rgba(0,128,128,0.1);
}

// Specifiy custom edit color
ctr('.test', {
  width: 200px
  edit: alpha(teal, 0.1)
})

.test {
  width: 200px;
}
.test * {
  background: rgba(0,128,128,0.1);
}

# Specifiy custom edit color
.test:
  width: 200px
  edit: alpha(teal, 0.1)

Notes

• My favorit helper hands down
• Click here for a 10 second demo
• The default edit color can also be changed globally through the global-options
• MDN Universal selectors

Position¶

Description: A List value for the position property creates CSS properties that correspond to the following shorthand notation: position: <type> <top> <right> <bottom> <left>

ctr('.test', {
  width: 200px
  // position: <type> <1> <1> <1> <1>
  position: absolute 10px
})

.test:
  width: 200px
  # position: [<type>, <1>, <1>, <1>, <1>]
  position: [absolute, 10px]

.test {
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: 200px;
  position: absolute;
}

ctr('.test', {
  width: 200px
  // position: <type> <1> <1> <1> <1>
  position: absolute 10px
})

.test {
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: 200px;
  position: absolute;
}

.test:
  width: 200px
  # position: [<type>, <1>, <1>, <1>, <1>]
  position: [absolute, 10px]

ctr('.test', {
  width: 200px
  // position: <type> <1> <2> <1> <2>
  position: absolute 10px 20px
})

.test:
  width: 200px
  # position: [<type>, <1>, <2>, <1>, <2>]
  position: [absolute, 10px, 20px]

.test {
  top: 10px;
  left: 20px;
  right: 20px;
  bottom: 10px;
  width: 200px;
  position: absolute;
}

ctr('.test', {
  width: 200px
  // position: <type> <1> <2> <1> <2>
  position: absolute 10px 20px
})

.test {
  top: 10px;
  left: 20px;
  right: 20px;
  bottom: 10px;
  width: 200px;
  position: absolute;
}

.test:
  width: 200px
  # position: [<type>, <1>, <2>, <1>, <2>]
  position: [absolute, 10px, 20px]

ctr('.test', {
  width: 200px
  // position: <type> <1> <2> <3> <2>
  position: absolute 10px 20px 30px
})

.test:
  width: 200px
  # position: [<type>, <1>, <2>, <3>, <2>]
  position: [absolute, 10px, 20px, 30px]

.test {
  top: 10px;
  left: 20px;
  right: 20px;
  bottom: 30px;
  width: 200px;
  position: absolute;
}

ctr('.test', {
  width: 200px
  // position: <type> <1> <2> <3> <2>
  position: absolute 10px 20px 30px
})

.test {
  top: 10px;
  left: 20px;
  right: 20px;
  bottom: 30px;
  width: 200px;
  position: absolute;
}

.test:
  width: 200px
  # position: [<type>, <1>, <2>, <3>, <2>]
  position: [absolute, 10px, 20px, 30px]

ctr('.test', {
  width: 200px
  // position: <type> <1> <2> <3> <4>
  position: absolute 10px 20px 30px 40px
})

.test:
  width: 200px
  # position: [<type>, <1>, <2>, <3>, <4>]
  position: [absolute, 10px, 20px, 30px, 40px]

.test {
  top: 10px;
  left: 40px;
  right: 20px;
  bottom: 30px;
  width: 200px;
  position: absolute;
}

ctr('.test', {
  width: 200px
  // position: <type> <1> <2> <3> <4>
  position: absolute 10px 20px 30px 40px
})

.test {
  top: 10px;
  left: 40px;
  right: 20px;
  bottom: 30px;
  width: 200px;
  position: absolute;
}

.test:
  width: 200px
  # position: [<type>, <1>, <2>, <3>, <4>]
  position: [absolute, 10px, 20px, 30px, 40px]

Size¶

Description: A unit value for the size property creates a width and height property for the defined unit value. Additionally, if the value is a List, the first value is the width and the second value is the height.

ctr('.test', {
  size: 200px
})

.test:
  size: 200px

.test {
  width: 200px;
  height: 200px;
}

ctr('.test', {
  size: 200px
})

.test {
  width: 200px;
  height: 200px;
}

.test:
  size: 200px

ctr('.test', {
  // width height
  size: 200px 400px
})

.test:
  # width height
  size: [200px, 400px]

.test {
  width: 200px;
  height: 400px;
}

ctr('.test', {
  // width height
  size: 200px 400px
})

.test {
  width: 200px;
  height: 400px;
}

.test:
  # width height
  size: [200px, 400px]

Transform¶

Description: An Object value for the transform property conjoins the key-value pairs.

ctr('.test', {
  width: 200px
  transform: {
    translateX: 10px
    translateY: 20px
    scaleX: 90deg
  }
})

.test:
  width: 200px
  transform:
    translateX: 10px
    translateY: 20px
    scaleX: 90deg

.test {
  width: 200px;
  transform: translateX(10px) translateY(20px) scaleX(90deg);
}

ctr('.test', {
  width: 200px
  transform: {
    translateX: 10px
    translateY: 20px
    scaleX: 90deg
  }
})

.test {
  width: 200px;
  transform: translateX(10px) translateY(20px) scaleX(90deg);
}

.test:
  width: 200px
  transform:
    translateX: 10px
    translateY: 20px
    scaleX: 90deg

Notes

• Working with transforms tends to get a bit unwieldy, and this helper alleviates this regarding readability and workability
• MDN Transform

Use¶

Description: The value of false for the use property omits the Object scope from ctr. In other words, it has the same effect as commenting out the Object scope.

ctr('.test', {
  width: 200px
  // transform will be omitted
  transform: {
    use: false
    translateX: 10px
    translateY: 20px
    scaleX: 90deg
  }
})

.test:
  width: 200px
  # transform will be omitted
  transform:
    use: false
    translateX: 10px
    translateY: 20px
    scaleX: 90deg

.test {
  width: 200px;
}

ctr('.test', {
  width: 200px
  // transform will be omitted
  transform: {
    use: false
    translateX: 10px
    translateY: 20px
    scaleX: 90deg
  }
})

.test {
  width: 200px;
}

.test:
  width: 200px
  # transform will be omitted
  transform:
    use: false
    translateX: 10px
    translateY: 20px
    scaleX: 90deg

Notes

• An ultra useful feature particuallry in the use case of ctr classes

Buttron¶

Description: The value of true for the buttron property creates CSS properties for a simple button.

ctr('.test', {
  buttron: true
})

.test:
  buttron: true

.test {
  z-index: 0;
  color: #fff;
  height: 60px;
  margin: 0rem;
  width: 200px;
  padding: 0rem;
  border: initial;
  cursor: pointer;
  font-size: 1rem;
  overflow: hidden;
  line-height: 60px;
  border-radius: 4px;
  position: relative;
  text-align: center;
  background: #2196f3;
  box-shadow: initial;
  font-family: initial;
  font-weight: initial;
  text-decoration: none;
  vertical-align: middle;
  transform: translateZ(0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
}

ctr('.test', {
  buttron: true
})

.test {
  z-index: 0;
  color: #fff;
  height: 60px;
  margin: 0rem;
  width: 200px;
  padding: 0rem;
  border: initial;
  cursor: pointer;
  font-size: 1rem;
  overflow: hidden;
  line-height: 60px;
  border-radius: 4px;
  position: relative;
  text-align: center;
  background: #2196f3;
  box-shadow: initial;
  font-family: initial;
  font-weight: initial;
  text-decoration: none;
  vertical-align: middle;
  transform: translateZ(0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
}

.test:
  buttron: true

Notes

• An ode to the past; if it were not for this silly little button idea, none of this would have come to fruition. So it seems fitting it gets its own little place in the documentation
  • Rendition one: Stylus Material Button Mixin
  • Rendition two: Buttron
  • Rendition three: You’re looking at it
• Would I use this, meh probably not, it is primarily here for sentimental reasons