Tag: css

Categories
Web Design

How to use Mixins in LESS CSS

Mixins allowed you to embed the whole properties of a class/id into another class/id just simply include the class/id name. It works like a variable but whole class/id properties. Mixins can behave like a function, it’s take arguments. lets see example

Example of Mixins :

.radius-corners(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
.header{
  background-color: green;
  width: 500px;
  height: 100px;
  .radius-corners   /*Including the radius-corners class*/
}

Mixins with Argument :

.radius-corners(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
.header{
  background-color: green;
  width: 500px;
  height: 100px;
  .radius-corners(20px);   /*Including the radius-corners class and passing parameter */
}

This is really easy to use and very much effective for working flow.

Categories
Web Design

How to use Variables in LESS CSS

LESS (dynamic stylesheet Language) allowed declare variable and use it when we need. We have to follow some rules to declare and use variable. I am gonna show you how to declare and use variable for LESS.

How to declare Variable :

Variable start with at-sign (@), so you have to write (@) as a first character of your variable name and use colon (:) to assign the value of that variable. Like:

/*Creating a variable. Variable name color*/
@color : #C00;

How to use variable :

 It is pretty easy to use those variable. just create a clsss/id. write a css properties (e.g color) and use @color variable as a value of that properties. like

.text{
  color: @color  /*Use Color variable*/
}

so the color of the text class will be (#C00). This is the simple use of variable. Actually when this code is compiled then then value of the color properties (#C00). I am showing you another example.

LESS CSS Code:

@text-color: #CCC;
@layout: 910px;

#header{
  width : @layout; 
  color: @text-color;
}

When this code will be compiled it become….

#header {
  width: 910px;
  color: #cccccc;
}

So you see how to declare and use variable. hope you guys are enjoy it.

 

 

Categories
Web Design

How to start LESS CSS

Less is dynamic stylesheet Language. Less is CSS preprocessors which represent an awesome way to extends CSS with dynamic behavior like variables, mixins, operations and functions. Less can run both server (Client-side Server and Server-side Server). In this tutorial I am gonna show you how to configure LEES in Client-side Server.

LESS Configuration for Client-side Server:

It’s is very easy to configure LESS in local/ Client-side server. Link your “.less" stylesheets with the rel set to “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Then Download the latest less.js from lesscss.org and include the js file into your <head> section of your page. Like:

<script src="less.js" type="text/javascript"></script>

NB: Make sure you have included stylesheets before the Script.

All have done, now I show you a simple example.

index.php

<!DOCTYPE html>
<html>
<head lang="en">
    <title>LESS Practice</title>
    <link rel="stylesheet/less" type="text/css" href="styles.less" />
    <script src="less.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<h2 class="h2">Hello World</h2>
</body
</html>

styles.less

@color : red;
.h2{
  color: @color
}

Copy this code and paste in into your editor and then see the output.

Categories
Web Design

How to use CSS3 column-rule-width Property

column-rule-width is pretty new property in Cascading Style Sheet styling system Level 3. It’s used to create multicolumn module by a single line. I am gonna show you how o use column-rule-width.

How to use it:

<html>
<head>
    <style type="text/css">

        .multicolumn{
            columns: 180px 3;
            -moz-columns: 180px 3;
            -webkit-columns: 180px 3;
        }

    </style>
</head>
<body>

<p class="multicolumn">
     Lorem Ipsum sample text Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text
    Lorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample textLorem Ipsum sample text

</p>

</body>
</html>

You can also add some other properties like.

.multicolumn{
  columns: 180px 3;
  -moz-columns: 180px 3;
  -webkit-columns: 180px 3;

  column-rule-color: #ccc;
  -moz-column-rule-color: #ccc;
  -webkit-column-rule-color: #ccc;

  column-rule-style: solid;
  -moz-column-rule-style: solid;
  -webkit-column-rule-style: solid;
  }

This is really awesome properties of CSS3