Friday, March 3, 2017

LESS - Overview

What is LESS?

LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site. LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly.

LESS - Installation

This article provides step-by-step procedure of LESS installation.

System Requirements for LESS

  • Operating System : Cross-platform
  • Browser Support: IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

LESS - Nested Rules

Description

It is a group of CSS properties which allows using properties of one class into another class and includes class name as its properties. In LESS, you can declare mixin in the same way as CSS style using class or id selector. It can store multiple values and can be reused in the code whenever necessary.

LESS - Nested Directives and Bubbling

Description

You can nest the directives such as media and keyframe in the same manner, how you nest the selectors. You can place the directive on top and its relative elements will not be changed inside its rule set. This is known as bubbling process.

LESS - Operations

Description

LESS provides support for some arithmetical operations such as plus (+), minus (-), multiplication (*) and division (/) and they can operate on any number, color or variable. Operations save lot of time when you are using variables and you feel like working on simple mathematics.

LESS - Escaping

Description

It builds selectors dynamically and uses property or variable value as arbitrary string.

Example

The below example demonstrates use of escaping in the LESS file:
<html>
<head>
   <title>Less Escaping</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

LESS - Functions

Description

LESS maps JavaScript code with manipulation of values and uses predefined functions to manipulate HTML elements aspects in the style sheet. It provides several functions to manipulate colors such as round function, floor function, ceil function, percentage function etc.

LESS - Namespaces and Accessors

Description

It is used to group the mixins under common name. Using namespaces you can avoid conflict in name and encapsulate group of mixins from outside.

LESS - Scope

Description

Variable scope specifies place of the available variable. The variables will be searched from the local scope and if they are not available, then compiler will search from the parent scope.

LESS - Comments

Description

Comments makes code clear and allows users to understand easily. You can use both block style and inline comments in the code, but when you compile the LESS code, the single line comments will not appear in the CSS file.

LESS - Importing

Description

It is used to import the contents of the LESS or CSS files.

Example

The below example demonstrates use of importing in the LESS file:
<html>
<head>

LESS - Variables

LESS allows variables to be defined with an @ symbol. Variable assignment is done with a colon(:).
Below table demonstrates the use of LESS variables in detail.
S.N.Variables usage & Description
1 Overview
Repetition of same value many times is usually seen and it can be avoided by the use of variables.

LESS - Extend

Extend is a LESS pseudo class which extend other selector styles in one selector by using :extend selector.

Example

The below example demonstrates use of extend in the LESS file:

LESS - Mixins

Mixins are similar to functions in programming languages. Mixins are group of CSS properties which allows you to use properties of one class into another class and includes class name as its properties. In LESS, you can declare mixin in the same way as CSS style using class or id selector. It can store multiple values and can be reused in the code whenever necessary.

LESS - Parametric Mixins

Description

Parametric mixins uses one or more parameters which extends functionality of LESS by taking arguments and its properties to customize the mixin output when mixed into another block.
For instance, consider a simple LESS code snippet:
.border(@width; @style; @color) {
    border: @width @style @color;

Less - Mixins as Functions

In this chapter let's study about Mixins as Functions. Mixins and functions work very similarly. Like functions, the mixins can be nested, can accept parameters and return values too.
The below table demonstrates the use of mixins as functions in details.

LESS - Passing Rulesets to Mixins

Description

Detached ruleset contains an ordinary ruleset such as properties, nested rulesets, variables declaration, mixins etc. It is stored in a variable and included into other structure where all its properties of the ruleset will get copied to that structure.

Less - Import Directives

Description

The @import directive is used to import the files in the code. It spread the LESS code over different files and allows to maintain the structure of code easily. You can put @import statements anywhere in the code.
For instance, you can import the file by using @import keyword as @import "file_name.less".

LESS - Import Options

In this chapter let's study about Import Options. LESS offers @import that allow style sheets to import both LESS and CSS style sheets.
The following tables lists the import directives that will be implemented in import statements.

LESS - Mixin Guards

Description

If you want to match simple values or number of arguments on expressions, then you can make use of guards. It is associated with mixin declaration and includes condition that is attached to a mixin. Each mixin will be having one or more guards which are separated by comma and guard must be enclosed within parentheses. LESS uses guarded mixins instead of if/else statements and perform calculations to specify matched mixin.

LESS - CSS Guards

Description

Guards are used to match simple values or number of arguments on expressions. It is applied to the CSS selectors. It is syntax for declaring mixin and calling it immediately. To successfully bring out the if type statement; join this with feature &, which allows you to group multiple guards.

LESS - Loops

Loops statement allows us to execute a statement or group of statements multiple times. Various iterative/loop structures can be created when recursive mixin combined with Guard Expressions and Pattern Matching.

Less - Merge

Description

It is a feature of LESS which allows adding values to comma or space separated list from multiple properties using a single property. It can be used for background and transform properties.
The following table describes two types of features supported by the Merge.

LESS - Parent Selectors

In this chapter let's study about Parent Selectors. It is possible to reference the parent selector by using &(ampersand) operator. Parent selectors of a nested rule is represented by & operator and is used when applying a modifying class or pseudo class to an existing selector.
The following table shows the types of parent selector:

LESS - Misc Functions

Misc function consists of group of function of different kind.
Following table lists all the types of misc function:
S.N.Functions & Description
1 color
It is a string which represents colors.
2 image - size
It is used to examine the dimension of the image from the file.

Less - String Functions

Description

Less supports some of the string functions as listed below:
  • escape
  • e
  • % format
  • replace

LESS - List Functions

Description

LESS consists of list fuctions which are used to specify length of the list and position of the value in the list.
Following table lists the list functions used in the LESS:
S.N.Function & Description
1 Length
It will take a comma or space separated list of values as parameter.
2 Extract
It will return the value at a specified position in a list.

Less - Math Functions

Description

Math functions includes methods which are used for performing numeric operations such as round, square root, power value, modulus, percentage etc.
Following table shows Math Functions used in LESS:

Less - Type Functions

In this chapter let's study about Type Functions. They are used to determine the type of the value.
Following table shows the Type Functions used in LESS.

Less - Color Defination Functions

Description

LESS provides number of useful color functions to alter and manipulate colors in different ways. LESS supports some of the Color Definition Functions as shown in the table below:

Less - Color Channel Functions

Less supports few build-in functions which set value about a channel. The channel set the value depending on the color definition. The HSL colors have hue, saturation and lightness channel and the RGB color have red, green and blue channel. Following are the list of color channel function:

Less - Color Operation

Description

LESS provides number of useful operation functions to alter and manipulate colors in different ways and take parameters in the same units. LESS supports some of the Color Operation Functions as shown in the table below:

Less - Color Blending Functions

In this chapter let's study about Color Blending Functions. These are similar operations used in image editors like Photoshop, Fireworks or GIMP, which matches your CSS colors to your images.
The following table shows the color blending functions used in LESS.

Less - Command Line Usage

Using the command line we can compile the .less file to .css.

Installing lessc for Use Globally

The following command is used to install lessc with npm(node package manager) to make the lessc available globally.
npm install less -g
You can also add a specific version after the package name. For eg: npm install less@1.6.2 -g

Less - using-less-in-the-browser

Less is used in the browser when you want to compile the less file dynamically when needed and not on the serverside, this is because less is a large javascript file.
First we need to add the LESS script to use LESS in the browser:
<script src="less.js"></script>

Less - Browser support

LESS is cross browser friendly that supports modern browsers such as Google Chrome, Mozilla Firefox, Safari and Internet Explorer and allows reusing CSS elements and write LESS code with the same semantics.

Less - Plugins

Plugin can be uploaded to expand the functionality of the site. Plugins are used to make your work easier.

Command Line

To install plugin using command line, you first need to install the lessc plugin. The plugin can be installed using less-plugin at the beginning. Below is command line to install the clean-css plugin:
npm install less-plugin-clean-css

Less - Programmatic Usage

The main point of programmatic usage in the LESS is less.render function. This function uses below format in LESS:
less.render(input_data, options)
    .then(function(output) {
        //code here
    },
    function(error) {

Less - Online Compilers

Online compilers are used to compile the less code into css code. Online compilers tools easily helps to generates the css code. Following are the available online less compilers:

Less - GUIs

In this chapter let's study about GUIs for LESS. Here you can use different LESS tools for your platform. For command line usage and tools click this link.
The below table lists the GUI compilers that supports cross platform.

Less - Editors and Plugins

In this chapter let's study about editors and plugins. Editor is a system or program which allows a user to edit text. Plugins are piece of software that is used to expand the functionality of the site.
Let's us discuss editors and IDEs for LESS.

Less - Third Party Compilers

Node.js Compilers

Following are the Node.js compilers used for LESS.

grunt-contrib-less

Grunt is a Node task runner. It will compile your stylesheets every time you commit changes to your LESS files.

Less - Frameworks

UI/Theme Frameworks and Components

LESS supports some of the UI/Theme frameworks as listed in the following table:
S.N.Framework & Description
1 1pxdeep
It is flat Bootstrap 3 theme that provides powerful color scheme controls.
2 Bootflat
It is open source framework based on Bootstrap.

Laravel - Overview

Introduction

Laravel is a MVC framework with bundles, migrations, and Artisan CLI. Laravel offers a robust set of tools and an application architecture that incorporates many of the best features of frameworks like CodeIgniter, Yii, ASP.NET MVC, Ruby on Rails, Sinatra, and others.

Laravel - Installation

For managing dependencies, Laravel uses composer. Make sure you have a Composer installed on your system before you install Laravel.
Step 1 − Visit the following URL and download composer to install it on your system.

Laravel - Application Structure

Root Directory

The root directory of Laravel contains various folders and files as shown in the following figure.
Root Directory

Laravel - Configuration

The config directory, as the name implies, contains all of your application's configuration files. In this directory, you will find various files needed to configure database, session, mail, application, services etc.

Laravel - Routing

Basic Routing

Basic routing is meant to route your request to an appropriate controller. The routes of the application can be defined in app/Http/routes.php file. Here is the general route syntax for each of the possible request.
Route::get('/', function () {
   return 'Hello World';

Laravel - Middleware

Define Middleware

As the name suggest, Middleware acts as a middle man between request and response. It is a type of filtering mechanism. For example, Laravel includes a middleware that verifies whether user of the application is authenticated or not. If the user is authenticated, he will be redirected to the home page otherwise, he will be redirected to the login page.

Laravel - Controllers

Basic Controllers

In MVC framework, the letter ‘C’ stands for Controller. It acts as a directing traffic between Views and Models.

Laravel - Request

Retrieving the Request URI

The “path” method is used to retrieve the requested URI. The “is” method is used to retrieve the requested URI which matches the particular pattern specified in the argument of the method. To get the full URL, we can use the “url” method.

Laravel - Cookie

Creating Cookie

Cookie can be created by global cookie helper of Laravel. It is an instance of Symfony\Component\HttpFoundation\Cookie. The cookie can be attached to the response using the withCookie() method. Create a response instance of Illuminate\Http\Response class to call the withCookie() method. Cookie

Laravel - Response

Basic Response

Each request has a response. Laravel provides several different ways to return response. Response can be sent either from route or from controller. The basic response that can be sent is simple string as shown in the below sample code. This string will be automatically converted to appropriate HTTP response.

Laravel - Views

Understanding Views

In MVC framework, the letter “V” stands for Views. It separates the application logic and the presentation logic. Views are stored in resources/views directory. Generally, the view contains the HTML which will be served by the application.

Laravel - Redirections

Redirecting to Named Routes

Named route is used to give specific name to a route. The name can be assigned using the “as” array key.
Route::get('user/profile', ['as' => 'profile', function () {
   //
}]);
Note − Here, we have given the name “profile” to a route “user/profile”.

Laravel - Working With Database

Connecting to Database

Laravel has made processing with database very easy. Laravel currently supports following 4 databases −
  • MySQL
  • Postgres
  • SQLite
  • SQL Server

Laravel - Errors and Logging

Errors

A project while underway, is borne to have a few errors. Errors and exception handling is already configured for you when you start a new Laravel project. Normally, in a local environment we need to see errors for debugging purposes. We need to hide these errors from users in production environment.