Git Product home page Git Product logo

less-dynamic-stylesheet's Introduction

LESS DSS (dynamic stylesheet)

A set of useful mixins for LESS, the CSS pre-processor: lesscss.org
I recommend 'CodeKit' app for auto compress (not only for less) ;) (OS X)
List of all functions is on: mrkrupski.github.com/LESS-Dynamic-Stylesheet/

Examples how to use functions contained in the less.dss file:

    CSS Backgrounds


  • .gradient-h - CSS3 - Horizontal background gradient.
  • .gradient-h(#fff, #aaa);
  • .gradient-hline - CSS3 - Horizontal-linear background gradient.
  • .gradient-hline(#fff, #ddd, #aaa, #ddd);
  • gradient-v - CSS3 - Vertical background gradient.
  • .gradient-v(#fff, #aaa);
  • .gradient-v3colors - CSS3 - Three-color background gradient.
  • .gradient-v3colors(#00b3ee, #7a43b6, 50%, #c3325f);
  • .gradient-radial - CSS3 - Radial background gradient.
  • .gradient-radial(#fff, #aaa);
  • .gradient-direction - CSS3 - Directional background gradient (type only the value - extension is added automatically).
  • .gradient-direction(#fff, #aaa, 120);
  • .background-clip - Crop the backgroud of an element (border-box | padding-box | content-box) - value must be without "-box"!.
  • .background-clip(border-box);
  • .background-size - Control the size of background images via CSS3.
  • .background-size(100%, 50%);

    CSS3 Borders


  • .box-shadow - CSS3 - The box-shadow property attaches one or more drop-shadows to the box (always add " before and after values - thanks to that you can use many shadows at the same time).
  • .box-shadow("0 0 5px blue");
    .box-shadow("0 0 5px blue, inset 2px 2px 10px rgba(0,0,0, .2), 0 1px 4px #000");
  • .border-image - CSS3 - Define an image to be used instead of the normal border of an element.
  • .border-image(url(picture.img));
    .border-image(url(picture.img), 100%, 1, 0, stretch);
  • .rounded - CSS3 - Round the corners of an element. Can be a single value or four space-separated values.
  • .rounded(10px);
  • .box-sizing - Change the box model for an element (e.g., border-box for a full-width input).
  • .box-sizing(border-box);
  • .tab-size - CSS3 - The tab-size CSS property is used to customize the width of a tab character.
  • .tab-size(8);

    CSS3 2D Transforms


  • .translate - CSS3 - With the translate() method, the element moves from its current position (X-axis - left, Y-axis - top).
  • .translate(20, 40);
  • .rotate - CSS3 - With the rotate() method, the element rotates clockwise at a given degree (type only the value - extension is added automatically).
  • .rotate(3);
  • .scale - CSS3 - With the scale() method, the element increases or decreases the size.
  • .scale(.8);
  • .skew - CSS3 - With the skew() method, the element turns in a given angle (X-axis - horizontal, Y-axis - vertical) (type only the value - extension is added automatically).
  • .skew(30, 4);
  • .matrix - CSS3 - The matrix() method combines all of the 2D transform methods into one.
  • .matrix(0.9, 0.2, -0.5, 0.9, 0, 0);

    CSS3 3D Transforms


  • .rotateX - CSS3 - With the rotateX() method, the element rotates around its X-axis at a given degree (type only the value - extension is added automatically).
  • .rotateX(180);
  • .rotateY - CSS3 - With the rotateY() method, the element rotates around its Y-axis at a given degree (type only the value - extension is added automatically).
  • .rotateY(40);
  • .translate3d - CSS3 - Is the same that the 'translate' option but we have at our disposal 3 values (X-axis, Y-axis, Z-axis).
  • .translate3d(8, 5, 4);
  • .perspective - CSS3 - Defines a perspective view for a 3D transformed element.
  • .perspective(140, px);

    CSS3 2D & 3D Transforms


    (they are acting only in steam with other functions from "2D & 3D Transforms" group)
  • .transform-origin - The transform-origin property allows you to change the position on transformed elements.
  • .transform-origin(50%, 50%, 0);
  • .transform-style - CSS3 - The transform-style property specifies how nested elements are rendered in 3D space.
  • .transform-style(preserve-3d);

    CSS3 Transitions


  • .transition - CSS3 - Add an effect when changing from one style to another.
  • .transition(width, .7s);

    CSS3 Animations


  • .animate - CSS3 - Create animations (checkout: http://daneden.me/animate/ - pack of done animations).
  • .animate(wobble);
    .animate(fadeIn, 0, ease, 2s, 1, normal, running);

    CSS3 Multiple Columns


  • .columns - CSS3 - Create multiple columns for laying out text (like in newspapers).
  • .columns(auto 2, normal, medium none black);

    CSS Misc


  • .clearfix - Add to any parent to clear floats within (value = none).
  • .clearfix;
  • .font - Font-size, line-height and weight.
  • .font(28, 34, bold);
  • .size - Quickly set the height and width on one line (you can enter only the values) (type only the value - extension is added automatically).
  • .size(200, 100);
  • .square - Use this if height and width have the same values (type only the value, or with the custom extension).
  • .square(400);
  • .opacity - Elements transparency (full = 1 not 100).
  • .opacity(.5);
  • .less-button - Quickly create a customize button (background-color, border-color, text color, text-shadow, font-weight, padding, rounded corners).
  • .less-button(#ccc, #999, #444, 0 1px 0 rgba(255,255,255,0.40), normal, 6px 18px, 4px);

less-dynamic-stylesheet's People

Contributors

mrkrupski avatar

Stargazers

Eric Smith avatar

Watchers

James Cloos avatar Eric Smith 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.