php-the-right-way/styles/base/idioms.less

/**
 * New Media Campaigns Idioms
 *
 * These are common patterns we use in all of our
 * projects. They are consolidated here to keep code DRY.
 *
 * Listing
 *    * .no-text, .text-replace
 *    * .no-list
 *    * .no-form
 *    * .fixed-width(@width)
 *    * .column-width(@width)
 *    * .column-left(@width)
 *    * .column-right(@width)
 *    * .full-size
 *    * .absolute-default
 *    * .absolute-fullsize
 *    * .clearfix
 */

/*  Hides text when using image replacement */
.no-text, .text-replace{
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

/*  Removes bullets, margin, and padding from list */
.no-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

/*  Removes webkit styling from form element */
.no-form{
    border: none;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
}

/*  Center a fixed width container */
.fixed-width(@width) {
    margin: 0 auto;
    width: @width;
}

/*  Adds left or right columns (e.g. content and sidebar) */
.column-width(@width){
    display: inline;
    width: @width;
}
.column-left(@width){
    .column-width(@width);
    float: left;
}
.column-right(@width){
    .column-width(@width);
    float: right;
}

/*  Set width and height of element to that of its parent */
.full-size{
    height: 100%;
    width: 100%;
}

/*  Position element absolutely to 0,0 */
.absolute-default{
    position: absolute;
    left: 0;
    top: 0;
}

/*  Position element absolutely and set its width and height to that of its parent (useful for slideshows) */
.absolute-fullsize{
    .absolute-default;
    .full-size;
}

/*  The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix {
    *zoom:1;

    &:before,
    &:after {
        content:"";
        display:table;
    }
    &:after {
        clear:both;
    }
}