To create Responsive grid with LESS all you have to know is how many view-port you need and how your grid should react on different devices.

We need a wrapper which will hold all container and than we need a column how many column we need and than we need block to wrap our module sounds complicated? let’s look at the code.

HTML Markeup

Main Wrapper

Row Container

Column Container

Block Container

Easy Enough to understand HTML Markup let’s learn LESS CSS Styles respectively.


Main Wrapper

Row Container

Column Container

Block Container

Until now HTML Markup and LESS CSS Styles are easy enough to understand let’s learn how to make all responsive and I’ll make sure that will be easy to understand for beginners.

Responsive Styles

First define the default width as 100% and we take advantage less to do some math for us.

creating responsive styles is with media queries is easy so in this tutorial 4 type to devices or view-port will be covered you can add as much as you want or as less as you need its totally depend on your needs.

Large Desktop

if device has minimum width 1024px

Tablet or Laptop

If device minimum width is 768px and maximum width 1024px

 Smart Phones

If device maximum width 768px

 Small Screens

if device maximum width 480px

Final Demo

Let’s have a look at demonstration on codepen and share your thoughts in the comments.

I was working on my client’s website and they need contact form in their website so I thought I should write an article about “How to Create an HTML/PHP Contact Form – Processing Form Data with PHP” to help those who needs it.

The Idea behind it this can be done with HTML page which requires separate PHP file to process HTML form so let’s get started with the simple HTML form but before we dive into it please keep in mind this requires a live web server to work in the end of tutorial you can find the downloadable files to make the necessary changes and you are ready to go with it.

As in example above I called a separate file action=”mailer.php” which will handle PHP code and process it below is the complete HTML Form

Until now its quite simple and easy right? so let’s get started with PHP Code now to understand how will it work as you remember we called a separate php file mailer.php in our form action we will now work on mailer.php and please make sure you keep both files in the same directory but before we create mailer.php let’s understand how will it work.

$mail_to will send the email to specify email.

these are the variables each variable contains their respective data to send with HTML Form.

$subject variable will contain the subject and show us the same subject in our email.

This is how our email will look like in a real

From: sender_name
E-mail: sender_email
Phone: sender_number
Message: sender_message

Create headers to send some information with headers to show who send that email and if want to reply to that email address header will take care of it.

Send email now

While we are sending our email let’s generate some alert message through JavaScript for user to inform either the email has been sent or failed in both case we generate the respective message for user’s information.

As we have understood mailer.php complete lets marge all together and see how our mailer.php will look like.

Download Files

Please share your problem/thoughts in the comments.

This is the first ever post of my blog to testify that I am starting blogging today and I always try to keep this blog updated if you would like to keep in touch with me when I am not blogging please follow @Shaz3e or FB or Shaz3e Google

%d bloggers like this: