You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# LESS Hat 4.0 [](https://travis-ci.org/madebysource/lesshat)
8
-
9
-
**[Download latest](https://raw.github.com/csshat/lesshat/master/build/lesshat.less)** (or **[Prefixed - great with Bootstrap](https://raw.github.com/csshat/lesshat/master/build/lesshat-prefixed.less)**) **|**
6
+
**[Download latest](https://registry.npmjs.org/lesshat/-/lesshat-{{ version }}.tgz) |**
13
7
**[Get Started](#get-started) |**
8
+
**[Introduction](#intro) |**
14
9
**[Contribute](#contribute) |**
15
10
**[Documentation](#documentation) |**
16
11
17
12
---
18
-
### Current version: v{{ version }}
13
+
### Current version: v{{ version }} {{ date }}
14
+
15
+
## <aname="get-started"></a> Get started
16
+
To use lesshat, you need [node/npm installed](https://nodejs.org/) 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.
17
+
18
+
### Bower
19
+
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](https://medium.com/@nickheiner/why-my-team-uses-npm-instead-of-bower-eecfe1b9afcb) and since people already use npm for dependency management simply to install Bower, another dependency manager, it felt a bit redundant.
20
+
21
+
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:
19
22
20
-
## What's new?
21
-
* Compiling LESS Hat is much more faster (up to 60× times).
22
-
* Here is a benchmark comparing LESS Hat 2.0.15 and LESS Hat 3. Thanks to [Pixelass](https://github.com/pixelass/more-or-less/) for this test.
* The main reason why LESS Hat 2.0.15 was so slow are LESS CSS Mixin Guards. LESS Hat used Mixin Guards for configurations browser prefixes. LESS Hat 3 dropped this feature. If you still want to use prefix configurations use LESS Hat 2.0.15. You can download it [here](https://github.com/csshat/lesshat/archive/v2.0.15.zip).
Why LESS Hat? In August 2012, while we were developing and extending [CSS Hat](www.csshat.com) 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.
29
+
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`.
29
30
30
-
After a year, there is a new, **completely rewritten 3.0 version**that brings 86 great mixins, robust workflow for editing, testing and creating new mixins.
31
+
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.
31
32
32
-
Meet the best mixins library in the world. Thanks to the LESS Hat 3.0 is LESS CSS finally usable.
33
+
*You should really consider using npm instead of bower.*
33
34
34
-
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](http://lesshat.com)** - Check it out!
35
+
## <aname="intro"></a> Introduction
36
+
Why lesshat? In August 2012, while we were developing and extending [CSS Hat](www.madebysource.com) 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.
37
+
38
+
Meet the best mixins library in the world.
35
39
36
40
### Features
37
-
* <del>**Configuration** – You can turn off/on browser prefixes according to your needs.</del> **LESS Hat 3.0 dropped this feature. Read more in 'What's new'.**
38
41
***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.
39
-
***Standard naming convention** – In LESS Hat, mixins have names like all CSS3 properties. No `.rounded` or `.shadow`. It's stupid.
40
-
***Cross-browser** – LESS Hat takes care of exporting CSS for all available browsers.
41
-
***Bootstrap friendly** – You can now use prefixed LESS Hat version and gaily work with Bootstrap. Yeah it's that easy.
42
-
***Keyframes** – Although it's tricky as hell, but yeah LESS Hat has mixin for `.keyframes`
43
-
***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.
42
+
***Standard naming convention** – In lesshat, mixins have names like all CSS3 properties. No `.rounded` or `.shadow`. It's stupid.
43
+
***Cross-browser** – lesshat takes care of exporting CSS for all available browsers.
44
+
***Bootstrap friendly** – You can now use prefixed lesshat version and gaily work with Bootstrap. Yeah it's that easy.
45
+
***Keyframes** – Although it's tricky as hell, but yeah lesshat has mixin for `.keyframes`
46
+
***Blank state ready** – If you call mixin without any arguments, lesshat does not pollute your CSS with empty properties. Instead lesshat generates nothing.
44
47
***Workflow** – **No more one line editing!** We created developer friendly worklow for editing and creating mixins. You can test mixins with [MOCHA](http://visionmedia.github.io/mocha/), generate new mixin with [GRUNT](http://gruntjs.com/). Find out more about the workflow in **[contribution](#contribution)** section.
45
48
46
-
## <aname="get-started"></a> Get started
47
-
The structure of this repo is:
48
-
49
-
***build folder** – there are ready-to-use lesshat.less or lesshat-prefixed.less mixins
50
-
***mixins folder** – developer version of mixins (more about that in **[contribution](#contribution)** section)
51
-
***.gitignore** – is a list of files that git will ignore. I know you know that, but it's convention.
52
-
***.travis.yml** – Configuration file for Travis CI. Travis CI is a hosted continuous integration service for the open source community.
53
-
***Gruntfle.js** – task runner. If you don't want to use lesshat-devstack ignore it.
54
-
***LICENSE** – self-explanatory
55
-
***README-template.md** – If you want to edit readme, edit it in this file. README.md is generated.
56
-
***README.md** – please don't edit this file. Either edit README-template.md or documentation inside mixins/<mixin-name> folder.
57
-
***Bower** – is like NPM for frontend. NPM is like Gems for JavaScript. I could go on forever…
58
-
***package.json** – contains meta data for NPM.
59
-
60
-
### Structure of LESS Hat mixins
49
+
### Structure of lesshat mixins
61
50
62
-
1.**Typical LESS Hat mixin**:
51
+
1.**Typical lesshat mixin**:
63
52
64
53
.supermixin(...) {
65
54
@process: ~`(function(){})()`;
@@ -68,7 +57,7 @@ The structure of this repo is:
68
57
border-radius: @process;
69
58
}
70
59
71
-
In @process variable is all magic. Please don't edit javascrpt directly in .less file. Instead use [lesshat-devstack](https://github.com/csshat/lesshat-devstack).
60
+
In @process variable is all magic. Please don't edit javascript directly in .less file. Instead use [lesshat-devstack](https://github.com/madebysource/lesshat-devstack).
72
61
73
62
2.**Use (almost) every property without interpolation!**
74
63
@@ -92,13 +81,11 @@ The structure of this repo is:
92
81
93
82
94
83
## <aname="contribute"></a> Contribute:
95
-
1. Download this repo.
96
-
2. NPM install.
97
-
3. Now you have LESS Hat devstack (see [documentation](https://github.com/csshat/lesshat-devstack).)
98
-
4. If you create new mixin, use grunt generate command!
99
-
5. If it's possible (almost always) test the coverage for new mixins, and never break existing tests.
100
-
6. Commits should represent one logical change each. If a mixin goes through multiple iterations, squash your commits down to one.
101
-
7. Finally, commit some code and open a pull request.
84
+
1. Fork this repo
85
+
2. run `npm install`
86
+
3. If you create new mixin, please add tests and documentation on how to use it
87
+
4. Always test your changes and make sure that the documentation is being added to the README.md by running `grunt`
88
+
6. Finally, commit your changes and create a pull request
102
89
103
90
104
91
## <aname="documentation"></a> Documentation:
@@ -203,4 +190,4 @@ The structure of this repo is:
203
190
***[CSS-Tricks](http://css-tricks.com/)** (their CSS almanac is great resource)
204
191
***[Angular UI router](https://github.com/angular-ui/ui-router)** (example of good github profile)
# LESS Hat 4.0 [](https://travis-ci.org/madebysource/lesshat)
8
-
9
-
**[Download latest](https://raw.github.com/csshat/lesshat/master/build/lesshat.less)** (or **[Prefixed - great with Bootstrap](https://raw.github.com/csshat/lesshat/master/build/lesshat-prefixed.less)**) **|**
* The main reason why LESS Hat 2.0.15 was so slow are LESS CSS Mixin Guards. LESS Hat used Mixin Guards for configurations browser prefixes. LESS Hat 3 dropped this feature. If you still want to use prefix configurations use LESS Hat 2.0.15. You can download it [here](https://github.com/csshat/lesshat/archive/v2.0.15.zip).
25
-
* A lot of bug fixes...
18
+
### Current version: v4.1.0 (2016-07-19)
26
19
27
-
## Intro
28
-
Why LESS Hat? In August 2012, while we were developing and extending [CSS Hat](www.csshat.com) 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.
20
+
## <aname="get-started"></a> Get started
21
+
To use lesshat, you need [node/npm installed](https://nodejs.org/) 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` within your
29
22
30
-
After a year, there is a new, **completely rewritten 3.0 version** that brings 86 great mixins, robust workflow for editing, testing and creating new mixins.
23
+
### Bower
31
24
32
-
Meet the best mixins library in the world. Thanks to the LESS Hat 3.0 is LESS CSS finally usable.
25
+
## <aname="intro"></a> Introduction
26
+
Why lesshat? In August 2012, while we were developing and extending [CSS Hat](www.madebysource.com) 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.
33
27
34
-
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](http://lesshat.com)** - Check it out!
28
+
Meet the best mixins library in the world.
35
29
36
30
### Features
37
-
* <del>**Configuration** – You can turn off/on browser prefixes according to your needs.</del> **LESS Hat 3.0 dropped this feature. Read more in 'What's new'.**
38
31
***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.
39
-
***Standard naming convention** – In LESS Hat, mixins have names like all CSS3 properties. No `.rounded` or `.shadow`. It's stupid.
40
-
***Cross-browser** – LESS Hat takes care of exporting CSS for all available browsers.
41
-
***Bootstrap friendly** – You can now use prefixed LESS Hat version and gaily work with Bootstrap. Yeah it's that easy.
42
-
***Keyframes** – Although it's tricky as hell, but yeah LESS Hat has mixin for `.keyframes`
43
-
***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.
32
+
***Standard naming convention** – In lesshat, mixins have names like all CSS3 properties. No `.rounded` or `.shadow`. It's stupid.
33
+
***Cross-browser** – lesshat takes care of exporting CSS for all available browsers.
34
+
***Bootstrap friendly** – You can now use prefixed lesshat version and gaily work with Bootstrap. Yeah it's that easy.
35
+
***Keyframes** – Although it's tricky as hell, but yeah lesshat has mixin for `.keyframes`
36
+
***Blank state ready** – If you call mixin without any arguments, lesshat does not pollute your CSS with empty properties. Instead lesshat generates nothing.
44
37
***Workflow** – **No more one line editing!** We created developer friendly worklow for editing and creating mixins. You can test mixins with [MOCHA](http://visionmedia.github.io/mocha/), generate new mixin with [GRUNT](http://gruntjs.com/). Find out more about the workflow in **[contribution](#contribution)** section.
45
38
46
-
## <aname="get-started"></a> Get started
47
-
The structure of this repo is:
48
-
49
-
***build folder** – there are ready-to-use lesshat.less or lesshat-prefixed.less mixins
50
-
***mixins folder** – developer version of mixins (more about that in **[contribution](#contribution)** section)
51
-
***.gitignore** – is a list of files that git will ignore. I know you know that, but it's convention.
52
-
***.travis.yml** – Configuration file for Travis CI. Travis CI is a hosted continuous integration service for the open source community.
53
-
***Gruntfle.js** – task runner. If you don't want to use lesshat-devstack ignore it.
54
-
***LICENSE** – self-explanatory
55
-
***README-template.md** – If you want to edit readme, edit it in this file. README.md is generated.
56
-
***README.md** – please don't edit this file. Either edit README-template.md or documentation inside mixins/<mixin-name> folder.
57
-
***Bower** – is like NPM for frontend. NPM is like Gems for JavaScript. I could go on forever…
58
-
***package.json** – contains meta data for NPM.
59
-
60
-
### Structure of LESS Hat mixins
39
+
### Structure of lesshat mixins
61
40
62
-
1.**Typical LESS Hat mixin**:
41
+
1.**Typical lesshat mixin**:
63
42
64
43
.supermixin(...) {
65
44
@process: ~`(function(){})()`;
@@ -68,7 +47,7 @@ The structure of this repo is:
68
47
border-radius: @process;
69
48
}
70
49
71
-
In @process variable is all magic. Please don't edit javascrpt directly in .less file. Instead use [lesshat-devstack](https://github.com/csshat/lesshat-devstack).
50
+
In @process variable is all magic. Please don't edit javascript directly in .less file. Instead use [lesshat-devstack](https://github.com/madebysource/lesshat-devstack).
72
51
73
52
2.**Use (almost) every property without interpolation!**
74
53
@@ -94,7 +73,7 @@ The structure of this repo is:
94
73
## <aname="contribute"></a> Contribute:
95
74
1. Download this repo.
96
75
2. NPM install.
97
-
3. Now you have LESS Hat devstack (see [documentation](https://github.com/csshat/lesshat-devstack).)
76
+
3. Now you have lesshat devstack (see [documentation](https://github.com/madebysource/lesshat-devstack).)
98
77
4. If you create new mixin, use grunt generate command!
99
78
5. If it's possible (almost always) test the coverage for new mixins, and never break existing tests.
100
79
6. Commits should represent one logical change each. If a mixin goes through multiple iterations, squash your commits down to one.
0 commit comments