Skip to content

Latest commit

 

History

History
228 lines (186 loc) · 10.8 KB

README-template.md

File metadata and controls

228 lines (186 loc) · 10.8 KB
Raw

LESS Hat 2.0 Build Status

LESS Hat 2.0 Analytics

Download latest (or Prefixed - great with Bootstrap) | Get Started | 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.
  • LICENSE – 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. 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: