Less toolkit

toolkit.less

/**
 * This toolkit is developed and maintained by Julien Leicher (http://julien.leicher.me).
 * Since I found myself rewriting it, I've decided to make a small toolkit.
 */

/**
 * -----------------------------------------------------------------------------
 *   Needed variables
 * -----------------------------------------------------------------------------
 */

// Types & sizes

@base-font-size: 16px;
@baseline : 24px;
@base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

// Colors

@accent: blue;

// Grid

@columns: 12;

/**
 * -----------------------------------------------------------------------------
 *   Types
 * -----------------------------------------------------------------------------
 */

/**
 * Sets the baseline according to the ratio
 * @param  {Numeric} @ratio Ratio to use
 */
.baseline(@ratio) {
  line-height: @ratio * @baseline;
}

/**
 * Defines base font settings
 * @param  {Numeric} @font-size:   @base-font-size   Font size to set
 * @param  {Numeric} @line-height: @baseline         Line height
 * @param  {Numeric} @font-family: @base-font-family Font family to use
 */
.base-font(
  @font-size: @base-font-size,
  @line-height: @baseline,
  @font-family: @base-font-family) {
  font-family: @font-family;
  font-size: @font-size;
  line-height: @line-height;
}

/**
 * Defines base hyperlink settings
 * @param  {Color} @color:                 @accent        Color to set
 * @param  {String} @text-decoration:       none           Text decoration on normal links
 * @param  {Color} @hover-color:           darken(@color, 10%)          Hover color to set
 * @param  {String} @hover-text-decoration: none           Hover text decoration
 */
.base-link(
  @color: @accent,
  @text-decoration: none,
  @hover-color: darken(@color, 10%),
  @hover-text-decoration: none) {

  &,
  &:link,
  &:visited {
    color: @color;
    text-decoration: @text-decoration;
  }

  &:hover {
    color: @hover-color;
    text-decoration: @hover-text-decoration;
  }
}

/**
 * -----------------------------------------------------------------------------
 *   Layouts
 * -----------------------------------------------------------------------------
 */

/**
 * Clear all floating elements
 */
.clearfix() {
  &:after {
    content: "";
    clear: both;
    line-height: 0;
    display: block;
  }
}

/**
 * Adds left baseline margin
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.lmargin(@ratio: 1) { margin-left: @ratio * @baseline; }

/**
 * Adds right baseline margin
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.rmargin(@ratio: 1) { margin-right: @ratio * @baseline; }

/**
 * Adds top baseline margin
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.tmargin(@ratio: 1) { margin-top: @ratio * @baseline; }

/**
 * Adds bottom baseline margin
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.bmargin(@ratio: 1) { margin-bottom: @ratio * @baseline; }

/**
 * Adds left baseline padding
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.lpadding(@ratio: 1) { padding-left: @ratio * @baseline; }

/**
 * Adds right baseline padding
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.rpadding(@ratio: 1) { padding-right: @ratio * @baseline; }

/**
 * Adds top baseline padding
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.tpadding(@ratio: 1) { padding-top: @ratio * @baseline; }

/**
 * Adds bottom baseline padding
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.bpadding(@ratio: 1) { padding-bottom: @ratio * @baseline; }

/**
 * Auto margin for centering content
 */
.automargin() {
  margin-left: auto;
  margin-right: auto;
}

/**
 * Adds baseline vertical margins
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.vmargin(@ratio: 1) {
  .tmargin(@ratio);
  .bmargin(@ratio);
}

/**
 * Adds baseline horizontal margins
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.hmargin(@ratio: 1) {
  .lmargin(@ratio);
  .rmargin(@ratio);
}

/**
 * Adds baseline margins
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.margin(@ratio: 1) {
  .vmargin(@ratio);
  .hmargin(@ratio);
}

/**
 * Adds baseline vertical paddings
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.vpadding(@ratio: 1) {
  .tpadding(@ratio);
  .bpadding(@ratio);
}

/**
 * Adds baseline horizontal paddings
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.hpadding(@ratio: 1) {
  .lpadding(@ratio);
  .rpadding(@ratio);
}

/**
 * Adds baseline paddings
 * @param  {Numeric} @ratio: 1             Ratio to use
 */
.padding(@ratio: 1) {
  .vpadding(@ratio);
  .hpadding(@ratio);
}

/**
 * Sets a new container
 */
.container() {
  .clearfix();
}

/**
 * Span columns
 * @param  {Numeric} @nb    Number of columns to span
 * @param  {Numeric} @total :             @columns Total number of columns
 */
.span-columns(@nb, @total : @columns) {
  float: left;
  box-sizing: border-box;
  width: percentage(@nb / @total);
}