Skip to content

Latest commit

 

History

History
193 lines (157 loc) · 8.92 KB

README-template.md

File metadata and controls

193 lines (157 loc) · 8.92 KB

lesshat Build Status

lesshat Analytics

[Download latest](https://registry.npmjs.org/lesshat/-/lesshat-{{ version }}.tgz) | Get Started | Introduction | Contribute | Documentation |

Current version: v{{ version }} {{ date }}

Get started

To use lesshat, you need node/npm installed then run npm install lesshat --save to install and save lesshat into your package.json. From here, you just need to reference the node_modules/lesshat/lesshat.less file within any of your project less files. You can also use the prefixed version available at node_module/lesshat/lesshat-prefixed.less if you're worried about mixin name conflicts with other library.

Bower

As of version 4, lesshat has removed support for Bower by removing the build folder from the repository. There are many reasons that Bower is considered inadequate for dependency management and since people already use npm for dependency management simply to install Bower, another dependency manager, it felt a bit redundant.

Even if Bower isn't supported, it can still be used with the tarball uploaded to npm. You can add the dependency to your bower.json file like this:

"dependencies": {
    "lesshat": "https://registry.npmjs.org/lesshat/-/lesshat-4.0.1.tgz"
}

You can also use the command line to install it by running bower install lesshat=https://registry.npmjs.org/lesshat/-/lesshat-4.0.1.tgz --save.

After that, you can reference the less file directly the same way as the npm version with a slight path difference. The only downside is that bower will not update automatically because it doesn't support semantic versioning with files.

You should really consider using npm instead of bower.

Introduction

Why lesshat? In August 2012, while we were developing and extending CSS Hat for LESS we needed universal mixins. Unfortunately, none of available were good enough that would satisfy our needs and that’s why we created new custom ones on our own, which have become the most popular mixin library for the whole LESS CSS.

Meet the best mixins library in the world.

Features

  • No restrictions – If it's possible in CSS, it must be possible to be done with a mixin. Unlimited number of anything, shadows, gradients, gradient swatches.
  • Standard naming convention – In lesshat, mixins have names like all CSS3 properties. No .rounded or .shadow. It's stupid.
  • Cross-browser – lesshat takes care of exporting CSS for all available browsers.
  • Bootstrap friendly – You can now use prefixed lesshat version and gaily work with Bootstrap. Yeah it's that easy.
  • Keyframes – Although it's tricky as hell, but yeah lesshat has mixin for .keyframes
  • Blank state ready – If you call mixin without any arguments, lesshat does not pollute your CSS with empty properties. Instead lesshat generates nothing.
  • Workflow – No more one line editing! We created developer friendly worklow for editing and creating mixins. You can test mixins with Mocha, generate new mixin with Ggrunt. Find out more about the workflow in Contribute section.

Structure of lesshat mixins

  1. Typical lesshat mixin:

     .supermixin(...) {
 	@process: ~`(function(){})()`;

 	-webkit-border-radius: @process;
 	border-radius: @process;
 }

    In @process variable is all magic. Please don't edit javascript directly in .less file. Instead use lesshat-devstack.

  2. Use (almost) every property without interpolation!

    Correct mixin calling:

     .background-image(linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%))

    Incorrect calling:

     .background-image(~'linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%)')

    Unfortunately, there are exceptions:

     .keyframes(~'');
 .calc(~'');
 .selection(~'');

 // in some cases you have to interpolate border-radius or LESS CSS begins to play on calculator
 .border-radius(~'20px / 40px');

Contribute:

  1. Fork this repo
  2. run npm install
  3. If you create new mixin, please add tests and documentation on how to use it
  4. Always test your changes and make sure that the documentation is being added to the README.md by running grunt
  5. Finally, commit your changes and create a pull request

Documentation:

List of mixins:

  1. align-content flexbox
  2. align-items flexbox
  3. align-self flexbox
  4. animation
  5. animation-delay
  6. animation-direction
  7. animation-duration
  8. animation-fill-mode
  9. animation-iteration-count
  10. animation-name
  11. animation-play-state
  12. animation-timing-function
  13. appearance
  14. backface-visibility
  15. background-clip
  16. background-image
  17. background-origin
  18. background-size
  19. blur filter
  20. border-bottom-left-radius
  21. border-bottom-right-radius
  22. border-image
  23. border-radius
  24. border-top-left-radius
  25. border-top-right-radius
  26. box-shadow
  27. box-sizing
  28. brightness filter
  29. calc
  30. column-count
  31. column-gap
  32. column-rule
  33. column-width
  34. columns
  35. contrast filter
  36. display flexbox
  37. drop-shadow filter
  38. filter
  39. flex flexbox
  40. flex-basis flexbox
  41. flex-direction flexbox
  42. flex-grow flexbox
  43. flex-shrink flexbox
  44. flex-wrap flexbox
  45. font-face
  46. grayscale filter
  47. hue-rotate filter
  48. hyphens
  49. invert filter
  50. justify-content flexbox
  51. keyframes
  52. opacity
  53. order
  54. perspective
  55. perspective-origin
  56. placeholder
  57. rotate transform
  58. rotate3d transform
  59. rotateX transform
  60. rotateY transform
  61. rotateZ transform
  62. saturate filter
  63. scale transform
  64. scale3d transform
  65. scaleX transform
  66. scaleY transform
  67. scaleZ transform
  68. selection
  69. sepia filter
  70. size width, height
  71. skew transform
  72. skewX transform
  73. skewY transform
  74. transform
  75. transform-origin
  76. transform-style
  77. transition
  78. transition-delay
  79. transition-duration
  80. transition-property
  81. transition-timing-function
  82. translate transform
  83. translate3d transform
  84. translateX transform
  85. translateY transform
  86. translateZ transform
  87. user-select

{{ documentation }}

Big Thanks to: