Skip to content

Latest commit

 

History

History
154 lines (116 loc) · 5.3 KB

README.md

File metadata and controls

154 lines (116 loc) · 5.3 KB
Raw

even.less

A LESS CSS library with one goal: write.even.less.

even.less is a library for LESS CSS that utilizes extremely terse naming abbreviations coupled with consistency to make write you LESS files faster, easier and smaller.

API

Box Model

Display

  • .dsp(@value) --> set display: @value
  • .none() --> none
  • .blk() --> block
  • .nln() --> inline
  • .iln() --> inline
  • .ilb() --> inline-block
  • .nblk() --> inline-block
  • .iblk() --> inline-block
  • .ilnblk() --> inline-block

Position

  • .pos(@value) --> set position: @value
  • .rel() --> relative
  • .abs() --> absolute
  • .fxd() --> fixed
  • .stc() --> static

Offsets (top/left/right/bottom)

  • .l(@value) --> left: @value
  • .r(@value) --> right: @value
  • .t(@value) --> top: @value
  • .btm(@value) --> bottom: @value (.b is used by border, a far more common property)

There are several compound offset properties, the second param is always optional and, if omitted, will be the same as the first:

  • .tl(@top[, @left]) --> top & left
  • .tr(@top[, @right]) --> top & right
  • .btml(@btm[, @left]) --> bottom & left
  • .btmr(@btm[, @right]) --> bottom & right

Note: Compound properties for top & bottom, or left & right don't exist because of their basically pointless use in most every day settings.

Additionally, the following utility function exists for quickly setting something to absolute position with an x and y:

  • .xy(@x[, @y]) --> absolute, left, & top

Margins

Margin mixins use the .m prefix, plus optional t, l, b, r suffixes for combination methods (top, left, bottom, and right, respectively)

  • .m(@value) --> margin: @value
  • .mt(@value) --> margin-top
  • .ml(@value) --> margin-left
  • .mb(@value) --> margin-bottom
  • .mr(@value) --> margin-right

Combinations (currently only two-sided combos exist, three-sided do not):

  • .mtl(@top[, @left]) --> top & left
  • .mtr(@top[, @right]) --> top & right
  • .mbl(@btm[, @left]) --> bottom & left
  • .mbr(@btm[, @right]) --> bottom & right
  • .mtb(@top[, @btm]) --> top & bottom
  • .mlr(@left[, @right]) --> left & right

Padding

Padding mixins follow the same rules as the margin mixins, but use the .p prefix

  • .p(@value) --> padding: @value
  • .pt(@value) --> padding-top
  • .pl(@value) --> padding-left
  • .pb(@value) --> padding-bottom
  • .pr(@value) --> padding-right

Combinations:

  • .ptl(@top[, @left]) --> top & left
  • .ptr(@top[, @right]) --> top & right
  • .pbl(@btm[, @left]) --> bottom & left
  • .pbr(@btm[, @right]) --> bottom & right
  • .ptb(@top[, @btm]) --> top & bottom
  • .plr(@left[, @right]) --> left & right

Borders

Since Borders are much more complex than Margins or Padding, they occupy several prefixes:

  • .b(@width, @color[, @style: solid]) --> border: @width @style @color
    • .bt(@width, @color[, @style: solid]) --> border-top
    • .bl(@width, @color[, @style: solid]) --> border-left
    • .bb(@width, @color[, @style: solid]) --> border-bottom
    • .br(@width, @color[, @style: solid]) --> border-right
    • Because of the number of parameters and the use of defaults, mutli-side combination mixins only take one set of params and use it for both sides
      • .btl(@width, @color[, @style: solid]) --> top & left
      • .btr(@width, @color[, @style: solid]) --> top & right
      • .bbl(@width, @color[, @style: solid]) --> bottom & left
      • .bbr(@width, @color[, @style: solid]) --> bottom & right
      • .btb(@width, @color[, @style: solid]) --> top & bottom
      • .blr(@width, @color[, @style: solid]) --> left & right
  • .bw(@value) --> border-width: @value
    • .bwt(@value) --> top
    • .bwl(@value) --> left
    • .bwb(@value) --> bottom
    • .bwr(@value) --> right
  • .bc(@value) --> border-color: @value
  • .bs(@value) --> border-style: @value
  • .brd(@value) --> border-radius: @value
    • (Note: .brd and it's combos set vendor-prefixed properties like -webkit-border-radius)
    • .brd combos work a bit differently: single corner settings use two letters like .brdtr for setting the top-right border-radius.
    • However, one letter suffixes like .brdt set both top corners (top-left & top-right)

Decorations

Basics

  • .c(@color) --> color: @color

Backgrounds

  • .bg(@value) --> background: @value
  • .bgc(@color) --> background-color: @color
  • .bgi(@image) --> background-image: @image

Additional Background Settings:

  • .bgr(@value) --> background-repeat: @value
    • .bgr-no() --> no-repeat
    • .bgr-x() --> repeat-x
    • .bgr-y() --> repeat-y

CSS3 Transformations & Transitions

Transitions

  • .xtn(@value) --> transition: @value & vendor-prefixes
  • .xtn(@time, @function[, @property: all]) --> useful for applying an all transition

Transforms

  • .xfm(@value) --> transform: @value & vendor-prefixes
  • .rot(@angle) --> rotate by angle
  • .scl(@factor) --> scale by factor
  • .skw(@x-angle, @y-angle) --> skew by x-angle and y-angle
  • .xlt(@x, @y) --> translate by x,y

Since CSS Transforms will override each other with successive property declarations, we need combos. Combos are chained in alphabetical order (by abbreviation, not function-name).

  • .rot-scl(@angle, @factor)
  • .rot-skw(@angle, @x-angle, @y-angle)
  • .rot-xlt(@angle, @x, @y)