mateuszkocz / 3l Goto Github PK

Lots of Love for LESS

Home Page: http://mateuszkocz.github.io/3l/

CSS 100.00%

3l's Introduction

3L was made for YOU to help you create awesome websites and fill the Internet with excessive amount of Love! ♥

3L is MIT licensed. Includes normalize.css, reset.css and some code from HTML5 Boilerplate. For the licencess refer to the LICENCES.md.

3L version: 1.4.5 (2016.02.25) LESS version: 1.3.3 Reset.css version: 2.0 Normalize.css version: 2.1.2 HTML5BP's CSS version: 4.0.1

Get your own LESS.js

HOW TO USE

Basic use

Download 3L.zip file, unzip it and place it in your project. You can start editing style.less file or @import 3L.less into your previously created LESS stylesheet. Use .normalize() or .reset() classes if you want.

Namespacing

If you're using anoter mixins library you might want to put 3L into a namespace so the two libraries won't clash. Just type #3L {@import '3L/3L';} and the 3L will be fully contained in its own namespace. Access the mixins with #3L > .mixin().

Animations

@import "animation[1-5]" (they're in 3L/assets/animationsins) to your stylesheet, create a class .animation[1-5]() {/* @keyframes properties */} and declare your animation. 3L will make the prefixed @keyframes for you. Now just use this animation in any element you want with .animation() mixin.

Refer to the documentation

The 3L.less file has all documentation included. If you want to know more how to use a mixin, what parameters it takes, what browsers it supports or where you could find more information about a CSS property just find the corresponding section in the file or refer to the 3L wiki on GitHub.

Compile

All .less files should be compiled to .css. You can use native LESS compiler or you can try Winless, Prepross and CodeKit. Your output CSS file will be clean. Only the used mixins from 3L will be included, nothing else.

ANIMATIONS

Using animations with 3L is pretty easy. Copy the animations less files (animationX.less) to the folder where you have your style sheet. In your code just type @import "animation1" (or any other number), create a class .animation1 (or any other) and declare your animation. 3L will make @keyframes for you. Now just use this animation in any element you want with .animation() class.

	@import "animation1";
	.animation1 () {
		/* your @keyframes rules */
		}
	.someClassName {
		.animation(.animation1 1s);
		}

FAQ and TROUBLESHOOTING

Compiler I use fail to compile 3L!

Unfortunately not all compilers can deal with some of the 3L classes. The hardest to compile are opacity in percentages (it uses a small piece of JavaSript), keyframes and guarded mixins. I strongly encourage you to use WinLess (also the online version) as it works very well with all 3L classes.

Other solution would be to delete the option to declare opacity in percentages (it's the biggest class in opacity block in 3L.less file and uses JavaScript). If it still doesn't help, you seriously need to consider getting a better compiler compatible with all LESS functionality!

3l's People

Contributors

Stargazers

Watchers

3l's Issues

.transform() missing Opera

http://caniuse.com/#feat=transforms2d

-o-transform: @arguments;

Thank you!!!

Less namespace

Thanks for your work.

This is a rather simple request. Could you place everything in its own namespace, so there aren't "mixin collisions"? See http://lesscss.org/#-namespaces

For HTML5/CSS3 classes and IDs can start with numbers, so I think wrapping everything in #3l {} would be fine.

Filters are not cross-browser

Eg:

.grayscale(@amount) {
    -webkit-filter: grayscale(@arguments);
    -moz-filter: grayscale(@arguments);
    -ms-filter: grayscale(@arguments);
    filter: grayscale(@arguments);
}

There is no -moz- or -ms- prefix. But should use inline svg for Firefox and others that does not support the -webkit- bare one.

Could be filter: gray on IE9- (does not support @amount), and for IE10+... it seems like https://github.com/kununu/gray does a fucking hack. I didn't dug further, but this project exposes the following CSS:

.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /*
  Chrome 19+,
  Safari 6+,
  Safari 6+ iOS,
  Opera 15+
  */
  -webkit-filter: grayscale(100%);
}

missing components in the ZIP

3L-mini.less – the basic file with mixins
3L-maxi.less – mixins with documentation and examples

Will you add those?

Old flexbox fallback

Would it be possible to have the flexbox mixins also fallback to the old spec to be compatible with older phones?

Animations doesn't work

First, thank you for sharing this amazing collection of mixins it's a time saver.
I have a problem with animations

What i have in my main.less (3l-mini.less & animation1.less are in the same folder):

@import "3l-mini";
@import "animation1";
.animation1 () {
/* your @Keyframes rules */
}
.someClassName {
.animation(.animation1 1s);
}

What i get with both JS official compiler or SimpLess compiler :
Syntax Error on line 7
in main.less on line 7, column 16:

6.someClassName {
7 .animation(.animation1 1s);
8 }

Any idea ? I'm using the last version of Less and HTML5 boilerplate.

Please provide more examples and more detailed documentation on animation

So far, nobody in my office understands how your animation thing works. =/
(we've followed your instructions to the letter, and it results in an error)

edit:
I figured it out: it seems the reason it keeps returning an error is the compiler doesn't accept the animation1.less file. All I had to do fix it was move it into the style.less file itself.

Modular system?

I like 3L, but find it pretty aggressive in some ways.
Unfortunately 3Ls namespaces quite often collide with my own mixins and find myself looking for bugs unkowingly produced by 3L.

Example: your .hidden has !important which overwrote everything I did in combination with my own .hidden – of course I commented yours out when the project started. But one day the bower part inside of CodeKit thought it was a good idea to update everything and I ended up with a new version of 3L; of course all my commented things in the version were overwritten aswell.

long story short–
I love many parts of the library but would like to have more control over what gets imported and what not.

How about boolean vars for every component where I simply and quickly could select what I want and what not.

Or even cooler: parameters on the import? And if not possible a special mixin to load 3L?
That way 3L could update whenever it wants and I keep my setup as expected.

What do you think?
Are you interested in a modular 3L?

an idea: font-smoothing

I know that it's WebKit only, but it still beats adding a vendor prefix:

.font-smoothing ()
{
    -webkit-font-smoothing: antialiased;
}

Work with bower?

Could you guys add a bower package for this awesome repo?

3L working with LessPHP?

Sorry to bother with a seemingly nobrainer- for me it isn't! And the internet is a great place with lots of helpful people, right? :)

I really don't like the client-side preprocessing and end up using lessPHP (http://leafo.net/lessphp/) since I love less so much!

But it seems lessPHP isn't up to date, is it?

So is 3L working with LessPHP?

Thx!