Category: Web Design

Web Design

Categories
Angular JS AngularJS HTML Tools and Technologies Web Design

What is AngularJS and How to Start

What is AngularJS?

AngularJS is the web application development framework which provides a flexible way to build testable and maintainable front-end applications. Generally, AngularJS javascript MV framework which is developed by google for build dynamic web application. For more details click here.

How to Start?

It’s really easy to start AngularJS. Just need to download AngularJS JavaScript file, and add to your web page with a script tag: You can also add it from remote url (e.g. http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js).  Here is an example code, so you can see how it works.

Explanation of this Code:

Here I will use 3 types of directives of AngularJS  which are:

ng-app:  This directive will define the angular application, That means this ng-app directive is for initializing the Angular into the page.

ng-model: This directive binds/takes the value from HTML controls (input, select, text area) to application data.

ng-bind: This directive  display the application data to the HTML view.

You can see ng-app directive is declared into the body tag that means Angular  is initialized among whole web page.  and the ng-model directive is declared three times called (name, title, and comment) and which was binds by {{name}}, {{title}}, {{comment}}
{{name}} bind for ng-model="name",
{{title}} bind for ng-model="title",
{{comment}} bind for ng-model="comment"

Output

What is AngularJS and How to Start
What is AngularJS and How to Start

Hope you can learn the basic concept of AngularJS from this article. Thanks!!!

Categories
Web Design

How to use Nested in LESS CSS

LESS best feature is its support for “Nested Rules”.Where in normal CSS you need to make CSS rules with long selectors but in the LESS CSS you can simply nest selectors inside other selectors.This create inheritance and make style sheet  shorter.

Example of Nest Code:

.header{
  width:960px;
  height:auto;
  font-family:arial;
  font-size:14px;
  color:#333;
  .logo{
    float:left;
    text-align:left;
    .span{
      color:#C00;
      font-size:11px;
    }
  }
}

when this code is compiled then the code will see like that.

After the Compiled of Nest Code:

.header {
  width: 960px;
  height: auto;
  font-family: arial;
  font-size: 14px;
  color: #333;
}
.header .logo {
  float: left;
  text-align: left;
}
.header .logo .span {
  color: #C00;
  font-size: 11px;
}

This is really good feature of LESS CSS. This make our code inheritance and shorter our coding.

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