Code Monkey home page Code Monkey logo

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.4 (2013.06.03) 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

laughingwithu avatar mateuszkocz avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.