To get started, download the project. This project includes all of the stretch examples, source code dependencies you'll need to get started.

Unzip the project somewhere on your local drive. The package includes an initial version of the project you'll be working with.

After this, you can create a folder called myProject and import stretch.less main file. After imported file, all of stretch mixins, variables and functions are imported.

I don't know how your organization for less files. But assuming you have a folder called less and it has a main file import others. You can import main stretch file that is locate in src/less/stretch.less. It import the other mixins files, functions and variables :)

Variables still don't exist in CSS, but they do in LESS and other CSS preprocessors. Stretch includes a several groups of meaningful and useful variables for any project.

@color-10: darken(#FFFFFF, 10%);
@color-20: darken(#FFFFFF, 20%);
@color-30: darken(#FFFFFF, 30%);
@color-40: darken(#FFFFFF, 40%);
@color-50: darken(#FFFFFF, 50%);
@color-60: darken(#FFFFFF, 60%);
@color-70: darken(#FFFFFF, 70%);
@color-80: darken(#FFFFFF, 80%);
@color-90: darken(#FFFFFF, 90%);
        

@brand-primary: #3B83C0;
@brand-success: #5BBD72;
@brand-warning: #E07B53;
@brand-danger:  #D95C5C;
@brand-info:    #00B5AD;
        

Typography

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1 - Stretch Heading

h2 - Stretch Heading

h3 - Stretch Heading

h4 - Stretch Heading

h5 - Stretch Heading

h6 - Stretch Heading

<h1>H1 - Stretch Heading</h1>
<h2>H2 - Stretch Heading</h2>
<h3>H3 - Stretch Heading</h3>
<h4>H4 - Stretch Heading</h4>
<h5>H5 - Stretch Heading</h5>
<h6>H6 - Stretch Heading</h6>

Stretch's global default font-size is 14px, with line-height of 1.4.

Body copy

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

<p>...</p>

Built with LESS

The typographic scale is based on two Less variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Stretch adapts.

Box Sizing

The box-sizing property is used to alter the default CSS Box Model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

.box-sizing(@box-model) {
    .prefixer(box-sizing, @box-model);
}

Opacity

Set the opacity for all browsers and provide a filter fallback for IE8.

.opacity(@opacity) {
    opacity: @opacity;
    @opacity-ie: @opacity * 100;
    filter: ~"alpha(opacity=@{opacity-ie})"; // IE8
}

Resizable

Easily configure the resize options for any textarea, or any other element. Some options are default like direction.

Options available for direction are: horizontal, vertical, both.

.resizable(@direction: both, @overflow: auto) {
    resize: @direction;
    overflow: @overflow;
}

Size

Specify the dimension of any object more easily.

.size(@width, @height) {
    width: @width;
    height: @height;
}

.square(@width, @height) {
    .size(@width, @height);
}

An example is its use with avatars:

.avatar {
    .size(80px, 85px);
}

.avatar-image {
    .square(80px, 85px);
}

Transform

Rorate, scale, translate (move), or skew any object.

Rotate

.rotate(@degrees) {
    .prefixer(transform, rotate(@degrees));
}

Scale

.scale(@ratio) {
    .prefixer(transform, scale(@ratio));
}

Translate

.translate(@x, @y) {
    .prefixer(transform, translate(@x, @y));
}

Skew

.skew(@x, @y) {
    .prefixer(transform, skewX(@x) skewY(@y));

    -webkit-backface-visibility: hidden;
}

Translate3D

.translate3d(@x, @y, @z) {
    .prefixer(transform, translate3d(@x, @y, @z));
}

Transition

The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function and transition-delay. It enables you to define the transition between two states of an element.

Transtitions

.transition(@transition) {
    .prefixer(transition, @transition);
}

Transition Delay

.transition-delay(@transition-delay) {
    .prefixer(transition-delay, @transition-delay);
}

Transition Duration

.transition-duration(@transition-duration) {
    .prefixer(transition-duration, @transition-duration);
}

px to em

This is not a function, it remains a mixin. But convert px to em :)

.em(@selector, @amt, @default-px: 16) when (ispixel(@amt)) {
    @{selector}: unit((@amt / @default-px), em);
}

Use it is so easy:

div {
    .em(font-size, 16px); // 1em
    .em(max-width, 18px); // 1.125em
}

Output:

div {
    font-size: 1em;
    max-width: 1.125em;
}

Border Radius

Today all modern browsers support the non-prefixed border-radius property. As such, there is no .border-radius() mixin, but stretch does include shortcuts for quickly rounding two corners on a particular side of an object.

.border-top-radius(@radius) {
    border-top-right-radius: @radius;
    border-top-left-radius: @radius;
}

.border-right-radius(@radius) {
    border-bottom-right-radius: @radius;
    border-top-right-radius: @radius;
}

.border-bottom-radius(@radius) {
    border-bottom-right-radius: @radius;
    border-bottom-left-radius: @radius;
}

.border-left-radius(@radius) {
    border-bottom-left-radius: @radius;
    border-top-left-radius: @radius;
}

Clearfix

Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Also use this clearfix from Nicolas Gallager.

.clearfix() {
    &:before,
    &:after {
        content: " ";
        display: table;
    }

    &:after {
        clear: both;
    }
}