├── README ├── bundles ├── transition.less ├── border.less ├── image.less ├── display.less ├── layout.less ├── box.less ├── transform.less ├── flex.less └── gradient.less └── lessins.less /README: -------------------------------------------------------------------------------- 1 | {lessins} v0.3 - (requires v1.1.0 of less.js) 2 | A collection of useful mixins for {less} 3 | 4 | New to {less}? Visit: www.lesscss.org to learn more. -------------------------------------------------------------------------------- /bundles/transition.less: -------------------------------------------------------------------------------- 1 | #transition { /*-- TRANSITION MIXIN --*/ 2 | 3 | .transition(@transition:all 1s ease-in-out) { 4 | -webkit-transition:@transition; 5 | -moz-transition:@transition; 6 | transition:@transition; 7 | } 8 | } -------------------------------------------------------------------------------- /bundles/border.less: -------------------------------------------------------------------------------- 1 | #border { /*-- BORDER MIXIN BUNDLE --*/ 2 | 3 | .lines(@top, @right, @bottom, @left) { 4 | border-top:@top; 5 | border-right:@right; 6 | border-bottom:@bottom; 7 | border-left:@left; 8 | } 9 | 10 | .radius(@radius:5px) { 11 | -moz-border-radius:@radius; 12 | border-radius:@radius; 13 | } 14 | } -------------------------------------------------------------------------------- /bundles/image.less: -------------------------------------------------------------------------------- 1 | #image { /*-- IMAGE MIXIN BUNDLE --*/ 2 | 3 | .replace(@image, @width, @height, @posX, @posY) { 4 | #display > .block(); 5 | width:@width; 6 | height:@height; 7 | background:url('@{img-path}/@image') @posX @posY; 8 | text-indent:-9999px 9 | } 10 | 11 | .mask(@image) { 12 | -webkit-mask-image:url('@{img-path}/@image'); 13 | -moz-mask-image:url('@{img-path}/@image'); 14 | } 15 | } -------------------------------------------------------------------------------- /bundles/display.less: -------------------------------------------------------------------------------- 1 | #display { /*-- DISPLAY MIXIN BUNDLE --*/ 2 | 3 | .block() { 4 | display:block; 5 | margin:0; 6 | padding:0; 7 | } 8 | 9 | .block-centered() { 10 | .block(); 11 | margin:0 auto; 12 | } 13 | 14 | .block-inline(@align:top) { 15 | display: -moz-inline-stack; 16 | display: inline-block; 17 | zoom: 1; 18 | *display: inline; 19 | vertical-align: @align; 20 | } 21 | 22 | .block-inline-float(@align:top, @float:left) { 23 | .block-inline(@align); 24 | float:@float; 25 | } 26 | } -------------------------------------------------------------------------------- /bundles/layout.less: -------------------------------------------------------------------------------- 1 | #layout { /*-- LAYOUT MIXIN BUNDLE --*/ 2 | 3 | .columns(@count:3, @width:250px, @gap:15, @rule:1px solid #000) { 4 | -webkit-column-count:@count; 5 | -moz-column-count:@count; 6 | column-count:@count; 7 | 8 | -webkit-column-width: @width; 9 | -moz-column-width: @width; 10 | column-width: @width; 11 | 12 | -webkit-column-gap:@gap; 13 | -moz-column-gap:@gap; 14 | column-gap:@gap; 15 | 16 | -webkit-column-rule:@rule; 17 | -moz-column-rule:@rule; 18 | column-rule:@rule; 19 | } 20 | } 21 | 22 | 23 | -------------------------------------------------------------------------------- /bundles/box.less: -------------------------------------------------------------------------------- 1 | #box { /*-- BOX MIXIN BUNDLE --*/ 2 | 3 | .shadow(@x:3px, @y:3px, @blur:5px, @spread:0, @color:rgba(0,0,0,.5)) { 4 | -webkit-box-shadow:@arguments; 5 | -moz-box-shadow:@arguments; 6 | box-shadow:@arguments; 7 | } 8 | 9 | .shadow-inset(@x:3px, @y:3px, @blur:5px, @spread:0, @color:rgba(0,0,0,.5)) { 10 | -webkit-box-shadow:inset @arguments; 11 | -moz-box-shadow:inset @arguments; 12 | box-shadow:inset @arguments; 13 | } 14 | 15 | .sizing( @type:border-box ) { 16 | -moz-box-sizing:@type; 17 | -webkit-box-sizing:@type; 18 | box-sizing:@type; 19 | } 20 | } -------------------------------------------------------------------------------- /bundles/transform.less: -------------------------------------------------------------------------------- 1 | #transform { /*-- TRANSFORM MIXIN BUNDLE --*/ 2 | 3 | .translate(@posX, @posY){ 4 | -webkit-transform:translate(@arguments); 5 | -moz-transform:translate(@arguments); 6 | transform:translate(@arguments); 7 | } 8 | 9 | .scale(@scale){ 10 | -webkit-transform:scale(@scale); 11 | -moz-transform:scale(@scale); 12 | transform:scale(@scale); 13 | } 14 | 15 | .rotate(@deg){ 16 | -webkit-transform:rotate(@deg); 17 | -moz-transform:rotate(@deg); 18 | transform:rotate(@deg); 19 | } 20 | 21 | .skew(@deg){ 22 | -moz-transform:skew(@deg); 23 | -webkit-transform:skew(@deg); 24 | transform:skew(@deg); 25 | } 26 | } -------------------------------------------------------------------------------- /bundles/flex.less: -------------------------------------------------------------------------------- 1 | #flex { /*-- FLEXIBLE BOX MODEL MIXIN BUNDLE --*/ 2 | 3 | /* @orient: horizontal | vertical | inherit */ 4 | /* @align: start | end | center | baseline | stretch */ 5 | /* @direction: normal | reverse */ 6 | /* @pack: start | end | center | justify */ 7 | 8 | .parent(@orient, @align, @direction, @pack) { 9 | display:-webkit-box; 10 | display:-moz-box; 11 | display:box; 12 | 13 | -webkit-box-orient:@orient; 14 | -moz-box-orient:@orient; 15 | box-orient:@orient; 16 | 17 | -webkit-box-align:@align; 18 | -moz-box-align:@align; 19 | box-align:@align; 20 | 21 | -webkit-box-direction:@direction; 22 | -moz-box-direction:@direction; 23 | box-direction:@direction; 24 | 25 | -webkit-box-pack:@pack; 26 | -moz-box-pack:@pack; 27 | box-pack:@pack; 28 | } 29 | 30 | /*Note: @flex:0 = inflexible. */ 31 | .child(@flex:0, @ordinal:1) { 32 | -webkit-box-flex:@flex; 33 | -moz-box-flex:@flex; 34 | box-flex:@flex; 35 | 36 | -webkit-box-ordinal-group:@ordinal; 37 | -moz-box-ordinal-group:@ordinal; 38 | box-ordinal-group:@ordinal; 39 | } 40 | } -------------------------------------------------------------------------------- /bundles/gradient.less: -------------------------------------------------------------------------------- 1 | #gradient { /*-- GRADIENT MIXIN BUNDLE --*/ 2 | 3 | .horizontal(@startColor: #555, @endColor: #333) { 4 | background-color: @endColor; 5 | background-repeat: no-repeat; 6 | background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); 7 | background-image: -webkit-linear-gradient(right center, @startColor, @endColor); 8 | background-image: -moz-linear-gradient(right center, @startColor, @endColor); 9 | background-image: -o-linear-gradient(left, @startColor, @endColor); 10 | background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); 11 | filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=1)",@startColor,@endColor)); 12 | -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=1))",@startColor,@endColor); 13 | } 14 | 15 | .vertical(@startColor: #555, @endColor: #333) { 16 | background-color: @endColor; 17 | background-repeat: no-repeat; 18 | background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); 19 | background-image: -webkit-linear-gradient(@startColor, @endColor); 20 | background-image: -moz-linear-gradient(@startColor, @endColor); 21 | background-image: -o-linear-gradient(top, @startColor, @endColor); 22 | background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); 23 | filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=0)",@startColor,@endColor)); 24 | -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=0))",@startColor,@endColor); 25 | } 26 | 27 | .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 28 | background-color: @endColor; 29 | background-repeat: no-repeat; 30 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); 31 | background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor); 32 | background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor); 33 | } 34 | } -------------------------------------------------------------------------------- /lessins.less: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------------------------------------*/ 2 | // // 3 | // {lessins} v0.3 // 4 | // (requires v1.1.0 of less.js) // 5 | // // 6 | // a collection of useful mixins for {less} // 7 | // // 8 | /*--------------------------------------------------------------------------*/ 9 | 10 | /*--------------------------------------------------------------------------*/ 11 | /*----------------------------- BUNDLED MIXINS -----------------------------*/ 12 | /*--------------------------------------------------------------------------*/ 13 | 14 | /*-------------------------- DISPLAY MIXIN BUNDLE --------------------------*/ 15 | /*-- .block(); .block-centered(); .block-inline(); .block-inline-float(); --*/ 16 | @import 'bundles/display'; 17 | 18 | /*-------------------------- BORDER MIXIN BUNDLE ---------------------------*/ 19 | /*-------------------------- .lines(); .radius(); --------------------------*/ 20 | @import 'bundles/border'; 21 | 22 | /*---------------------------- BOX MIXIN BUNDLE ----------------------------*/ 23 | /*----------------- .shadow(); .shadow-inset(); .sizing(); -----------------*/ 24 | @import 'bundles/box'; 25 | 26 | /*--------------------- FLEXIBLE BOX MODEL MIXIN BUNDLE --------------------*/ 27 | /*---------------------------- .wrap(); .box(); ----------------------------*/ 28 | @import 'bundles/flex'; 29 | 30 | /*-------------------------- GRADIENT MIXIN BUNDLE -------------------------*/ 31 | /*--------- .horizontal(); .vertical(); .vertical-three-colors(); ----------*/ 32 | @import 'bundles/gradient'; 33 | 34 | /*------------------------- TRANSFORM MIXIN BUNDLE -------------------------*/ 35 | /*-------------- .translate(); .scale(); .rotate(); .skew(); ---------------*/ 36 | @import 'bundles/transform'; 37 | 38 | /*------------------------- TRANSITION MIXIN BUNDLE ------------------------*/ 39 | /*---------------------------- .transition(); ------------------------------*/ 40 | @import 'bundles/transition'; 41 | 42 | /*--------------------------- IMAGE MIXIN BUNDLE ---------------------------*/ 43 | /*-------------------------- .replace(); .mask(); --------------------------*/ 44 | @import 'bundles/image'; 45 | 46 | /*--------------------------- LAYOUT MIXIN BUNDLE --------------------------*/ 47 | /*------------------------------ .columns(); -------------------------------*/ 48 | @import 'bundles/layout'; 49 | 50 | /*--------------------------------------------------------------------------*/ 51 | /*---------------------------- CONFIG VARIABLES ----------------------------*/ 52 | /*--------------------------------------------------------------------------*/ 53 | @img-path:'/_images'; 54 | 55 | --------------------------------------------------------------------------------