Skip to content

Latest commit

 

History

History
228 lines (185 loc) · 10.7 KB

README-template.md

File metadata and controls

228 lines (185 loc) · 10.7 KB
Raw

LESS Hat 2.0 Build Status

LESS Hat 2.0

Download latest (or Prefixed - great with Bootstrap) | Get Starded | Contribute | Documentation |

Current version: v{{ version }}

Intro

Why LESS Hat? 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.

After a year, there is a new, completely rewritten 2.0 version that brings 86 great mixins, robust workflow for editing, testing and creating new mixins.

Meet the best mixins library in the world. Thanks to the LESS Hat 2.0 is LESS CSS finally usable.

If you would like to use CSS Hat for working with LESS Hat and you still don't have one, we have a suprise for you at lesshat.com - Check it out!

Features

  • Configuration – You can turn off/on browser prefixes according to your needs.
  • 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 LESS Hat, mixins have names like all CSS3 properties. No .rounded or .shadow. It's stupid.
  • Cross-browser – LESS Hat takes care of exporting CSS for all available browsers.
  • Bootstrap friendly – You can now use prefixed LESS Hat version and gaily work with Bootstrap. Yeah it's that easy.
  • Keyframes – Although it's tricky as hell, but yeah LESS Hat has mixin for .keyframes
  • Blank state ready – If you call mixin without any arguments, LESS Hat does not pollute your CSS with empty properties. Instead LESS Hat 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 GRUNT. Find out more about the workflow in contribution section.

Get started

The structure of this repo is:

  • build folder – there are ready-to-use lesshat.less or lesshat-prefixed.less mixins
  • mixins folder – developer version of mixins (more about that in contribution section)
  • .gitignore – is a list of files that git will ignore. I know you know that, but it's convention.
  • .travis.yml – Configuration file for Travis CI. Travis CI is a hosted continuous integration service for the open source community.
  • Gruntfle.js – task runner. If you don't want to use lesshat-devstack ignore it.
  • LICENCE – self-explanatory
  • README-template.md – If you want to edit readme, edit it in this file. README.md is generated.
  • README.md – please don't edit this file. Either edit README-template.md or documentation inside mixins/ folder.
  • Bower – is like NPM for frontend. NPM is like Gems for JavaScript. I could go on forever…
  • package.json – contains meta data for NPM.

Structure of LESS Hat mixins

  1. Global prefix configuration:

    @webkit: true;
@moz: true;
@opera: true;
@ms: true;
@w3c: true;

    If you for example don't want to generate prefixes for opera, just turn it to false.

  2. Typical LESS Hat mixin:

     .supermixin(...) {

 	@webkit_local: true;
 	@w3c_local: true;

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

 	.result (@arguments, @signal, @boolean, @local_boolean) when (@boolean = true) and (@local_boolean = true) {
 		.inception (@signal, @arguments) when (@signal = 1) and not (@process = 08121991) { -webkit-border-radius: @process;  }
 		.inception (@signal, @arguments) when (@signal = 1) and (@process = 08121991) {} 
 		.inception (@signal, @arguments) when (@signal = 3) and not (@process = 08121991) { border-radius: @process;  }
 		.inception (@signal, @arguments) when (@signal = 3) and (@process = 08121991) {} 
 		.inception(@signal, @arguments);
 	}
 	
 	.result (@arguments, @signal, @boolean, @local_boolean) when not (@boolean = true), not (@local_boolean = true) {}

 	.result(@arguments, 1, @webkit, @webkit_local);
 	.result(@arguments, 3, @w3c, @w3c_local);
 }

    At the top, there are a local prefix configurations. So you can turn off/on browser for one specific mixin. This is quite useful.

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

    If you call mixin without arguments, some mixins return CSS default value for specific property, but some mixins return magic number 08121991 (Yeah, it's like Lost, TV series, but numbers are different) and because of that LESS CSS generates nothing.

    Why 08121991 and not just 0 (zero)?
    Some CSS properties have zero as default value. So we need more difficult number.

  3. 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. Download this repo.
  2. NPM install.
  3. Now you have LESS Hat devstack (see documentation.)
  4. If you create new mixin, use grunt generate command!
  5. If it's possible (almost always) test the coverage for new mixins, and never break existing tests.
  6. Commits should represent one logical change each. If a mixin goes through multiple iterations, squash your commits down to one.
  7. Finally, commit some code and open 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. invert filter
  49. justify-content flexbox
  50. keyframes
  51. opacity
  52. order
  53. perspective
  54. perspective-origin
  55. placeholder
  56. rotate transform
  57. rotate3d transform
  58. rotateX transform
  59. rotateY transform
  60. rotateZ transform
  61. saturate filter
  62. scale transform
  63. scale3d transform
  64. scaleX transform
  65. scaleY transform
  66. scaleZ transform
  67. selection
  68. sepia filter
  69. size width, height
  70. skew transform
  71. skewX transform
  72. skewY transform
  73. transform
  74. transform-origin
  75. transform-style
  76. transition
  77. transition-delay
  78. transition-duration
  79. transition-property
  80. transition-timing-function
  81. translate transform
  82. translate3d transform
  83. translateX transform
  84. translateY transform
  85. translateZ transform
  86. user-select

{{ documentation }}

Big Thanks to: