Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mrkrupski/LESS-Dynamic-Stylesheet

A set of useful mixins for LESS, the CSS pre-processor: http://lesscss.org
https://github.com/mrkrupski/LESS-Dynamic-Stylesheet

Last synced: 4 months ago
JSON representation

A set of useful mixins for LESS, the CSS pre-processor: http://lesscss.org

Awesome Lists containing this project

README 

        
LESS DSS (dynamic stylesheet)

=============



It's a set of useful mixins for LESS, the CSS pre-processor: lesscss.org.


I recommend a "CodeKit" app for the auto compress (OS X).


Licensed under the [MIT License](http://opensource.org/licenses/MIT)



Examples how to use the functions contained in "less.dss" (v1.8.1) file:



 
    

       
    Backgrounds Group
    

       
    


       
  • .gradient-h
    • 

       .gradient-h ( #fff, #aaa );
    


       
  • gradient-v
    • 

       .gradient-v ( #fff, #aaa );
    


       
  • .gradient-vline
    • 

       .gradient-vline ( #fff, #ddd, #aaa, #ddd );
    


       
  • .gradient-v3colors
    • 

       .gradient-v3colors ( #00b3ee, #7a43b6, 50%, #c3325f );
    


       
  • .gradient-radial
    • 

       .gradient-radial ( #fff, #aaa );
    


       
  • .gradient-direction
    • 

       .gradient-direction ( #fff, #aaa, 120 );
    


       
  • .bg-clip
    • 

       .bg-clip ( border-box );

       
    

       .bg-clip ( border );
    


       
  • .bg-size
    • 

       .bg-size ( 100%, 50% );
    


       
    

       
    Box Group
    

       
    


       
  • .box-align
    • 

       .box-align ( baseline );
    


       
  • .box-direction
    • 

       .box-direction ( normal );
    


       
  • .box-orient
    • 

       .box-orient ( horizontal );
    


       
  • .box-pack
    • 

       .box-pack ( center );
    


       
  • .box-sizing
    • 

       .box-sizing ( content-box );
    


       
  • .box-shadow
    • 

       .box-shadow ( "0 0 5px blue, inset 2px 2px 10px rgba (0,0,0, .2), 0 1px 4px #000" ); (multi)

       
    

       .box-shadow ( in, 0 1px 4px #ddd ); (inset)

       
    

       .box-shadow ( out, 0 1px 4px rgba(0,0,0, .5) ); (outset)

       
    

       .box-shadow ( 0 1px 4px, #ccc, 45% ); (alpha)
    


       
    

       
    Border Group
    

       
    


       
  • .border-image
    • 

       .border-image ( "../img/picture.img", 30 30 repeat );
    


       
  • .rounded
    • 

       .rounded ( 10px );

       
    

       .rounded ( 3px 2px 4px 10px );

       
    

       .rounded ( top, 5 );

       
    

       .rounded ( right, 5 );

       
    

       .rounded ( bottom, 5 );

       
    

       .rounded ( left, 5 );
    


       
    

       
    Transform Group
    

       
    


       
  • .transform
    • 

       .transform ( perspective(0) translate3d(50px, 40px, 80px) scale3d(1, 2, 0) rotate3d(0, 1, 0, 45deg) );
    


       
  • .matrix
    • 

       .matrix ( 0.9, 0.2, -0.5, 0.9, 0, 0 );
    


       
  • .matrix3d
    • 

       .matrix3d ( "1, 0, 0, 0, 0, 0.60, 0, -0.0009, 0, 0, 1, 0, 0, 0, 0, 1" );
    


       
  • .rotate
    • 

       .rotate ( 45 );

       
    

       .rotate ( x, 45 );

       
    

       .rotate ( y, 45 );

       
    

       .rotate ( z, 45 );
    


       
  • .rotate3d
    • 

       .rotate ( 15, 10, 5, 45 );

       

       
  • .scale
    • 

       .scale ( 0.8 );

       
    

       .scale ( x, 0.4 );

       
    

       .scale ( y, 1.3 );

       
    

       .scale ( z, .7 );
    


       
  • .scale3d
    • 

       .scale3d ( .4, .5, 1.2 );
    


       
  • .translate
    • 

       .translate ( 20, 40 );

       
    

       .translate ( x, 20 );

       
    

       .translate ( y, 40 );

       
    

       .translate ( z, 60 );
    


       
  • .translate3d
    • 

       .translate3d ( 20, 40, 60 );
    


       
  • .skew
    • 

       .skew ( 30, 4 );

       
    

       .skew ( x, 20 );

       
    

       .skew ( y, -30 );
    


       
  • .perspective
    • 

       .perspective ( 250 );

       
    

       .perspective ( 250, px );
    


       
  • .perspective-origin
    • 

       .perspective-origin ( 50% 50% );
    


       
  • .transform-origin
    • 

       .transform-origin ( 30%, 40%, 0 );
    


       
  • .transform-style
    • 

       .transform-style ( preserve-3d );
    


       
    

       
    Transition
    

       
    


       
  • .transition
    • 

       .transition ( width, .7s );

       
    

       .transition ( property, 0.2s, ease-out, 0 );
    


       
    

       
    Animation Group
    

       (checkout: http://daneden.me/animate/)

       
    


       
  • .animate
    • 

       .animate ( wobble );

       
    

       .animate ( wobble, 2s, ease, 0, 1, normal );
    


       
  • .animation-state
    • 

       .animation-state ( running );
    


       
    

       
    Column
    

       
    


       
  • .columns
    • 

       .columns ( 2, normal );
    


       
    

       
    Misc Group
    

       
    


       
  • .opacity
    • 

       .opacity ( 0.7 );
    


       
  • .font
    • 

       .font ( italic, normal, bold, 14px, 1, "'Lucida Grande', Helvetica, Arial, Verdana, sans-serif" );
    


       
  • .font-face
    • 

       .font-face ( MyFontName, "../assets/fonts/sofia-pro" );
    


       
  • .size
    • 

       .size ( 400, 200 );
    


       
  • .square
    • 

       .square ( 400 );
    


       
  • .resizable
    • 

       .resizable ( vertical );
    


       
  • .hide-text
    • 

       .hide-text;
    


       
  • .center-block
    • 

       .center-block;
    


       
  • .clearfix
    • 

       .clearfix;