S3Framework by Shaz3e

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

<!-- HTML Marketup -->
<body>
  <div class="dc-wrapper">
    <!-- row container will go here -->
  </div>
</body>

<body>

</div>

</body>

Row Container

<div class="dc-wrapper">
  <div class="dc-row">
    <!-- column and block -->
  </div>
</div>

</div>

Column Container

<div class="dc-wrapper">
  <div class="dc-row">
    <div class="dc-col-1">
      <!-- change col-x to number of columns supported upto 12-->
    </div>
  </div>
</div>

</div>

Block Container

<div class="dc-wrapper">
  <div class="dc-row">
    <div class="dc-col-1">
      <div class="dc-block">
        <!-- your content -->
      </div>
    </div>
  </div>
</div>

</div>

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

LESS CSS Styles

Main Wrapper

.dc-wrapper {
  margin: 0 auto;
  padding:0;
  max-width: 95%;
}

.dc-wrapper {

margin: 0 auto;

padding:0;

max-width: 95%;

}

Row Container

.dc-row {
  display: flex;
  flex-flow: row wrap;
  margin:0;
  margin-bottom: 5px;
}
.dc-row:last-child {
  margin-bottom: 0;
}

.dc-row {

display: flex;

flex-flow: row wrap;

margin:0;

margin-bottom: 5px;

}

.dc-row:last-child {

margin-bottom: 0;

}

Column Container

.dc-col-1,.dc-col-2,.dc-col-3,.dc-col-4,.dc-col-5,.dc-col-6,
.dc-col-7,.dc-col-8,.dc-col-9,.dc-col-10,.dc-col-11,.dc-col-12{
  float:left; // float is optional
}

.dc-col-1,.dc-col-2,.dc-col-3,.dc-col-4,.dc-col-5,.dc-col-6,

.dc-col-7,.dc-col-8,.dc-col-9,.dc-col-10,.dc-col-11,.dc-col-12{

float:left; // float is optional

}

Block Container

.dc-block{
  // make sure either you use top margin or bottom margin
  margin:0 5px 5px 5px; // space between grids
  padding:5px; // padding as necessary
}

.dc-block{

// make sure either you use top margin or bottom margin

margin:0 5px 5px 5px; // space between grids

padding:5px; // padding as necessary

}

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.

@width:100%;

1	@width:100%;

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

@media (min-width: 1024px){
  .dc-col-1{width:@width;}
  .dc-col-2{width:@width / 2;}
  .dc-col-3{width:@width / 3;}
  .dc-col-4{width:@width / 4;}
  .dc-col-5{width:@width / 5;}
  .dc-col-6{width:@width / 6;}
  .dc-col-7{width:@width / 7;}
  .dc-col-8{width:@width / 8;}
  .dc-col-9{width:@width / 9;}
  .dc-col-10{width:@width / 10;}
  .dc-col-11{width:@width / 11;}
  .dc-col-12{width:@width / 12;}
}

@media (min-width: 1024px){

.dc-col-1{width:@width;}

.dc-col-2{width:@width / 2;}

.dc-col-3{width:@width / 3;}

.dc-col-4{width:@width / 4;}

.dc-col-5{width:@width / 5;}

.dc-col-6{width:@width / 6;}

.dc-col-7{width:@width / 7;}

.dc-col-8{width:@width / 8;}

.dc-col-9{width:@width / 9;}

.dc-col-10{width:@width / 10;}

.dc-col-11{width:@width / 11;}

.dc-col-12{width:@width / 12;}

}

Tablet or Laptop

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

@media (min-width: 768px) and (max-width: 1024px){
  // 1 column
  .dc-col-1,
  .dc-col-3,
  .dc-col-5,
  .dc-col-7,
  .dc-col-9,
  .dc-col-11{width:@width;}
  
  // 2 columns
  .dc-col-2,
  .dc-col-4{width:@width / 2;}
  
  // 3 columns
  .dc-col-6{width:@width / 3;}
  
  // 4 columns
  .dc-col-8{width:@width / 4;}
  
  // 5 columns
  .dc-col-10{width:@width / 5;}
  
  // 6 columns
  .dc-col-12{width:@width / 6;}
}

@media (min-width: 768px) and (max-width: 1024px){

// 1 column

.dc-col-1,

.dc-col-3,

.dc-col-5,

.dc-col-7,

.dc-col-9,

.dc-col-11{width:@width;}

// 2 columns

.dc-col-2,

.dc-col-4{width:@width / 2;}

// 3 columns

.dc-col-6{width:@width / 3;}

// 4 columns

.dc-col-8{width:@width / 4;}

// 5 columns

.dc-col-10{width:@width / 5;}

// 6 columns

.dc-col-12{width:@width / 6;}

}

Smart Phones

If device maximum width 768px

@media (max-width: 768px){
  // 1 column
  .dc-col-1,
  .dc-col-3,
  .dc-col-5,
  .dc-col-7,
  .dc-col-9,
  .dc-col-11{width:@width;}
  
  // 2 columns
  .dc-col-2,
  .dc-col-4,
  .dc-col-8{width:@width / 2;}
  
  // 3 columns
  .dc-col-6,
  .dc-col-12{width:@width / 3;}
  
  // 5 columns
  .dc-col-10{width:@width / 5;} 
}

@media (max-width: 768px){

// 1 column

.dc-col-1,

.dc-col-3,

.dc-col-5,

.dc-col-7,

.dc-col-9,

.dc-col-11{width:@width;}

// 2 columns

.dc-col-2,

.dc-col-4,

.dc-col-8{width:@width / 2;}

// 3 columns

.dc-col-6,

.dc-col-12{width:@width / 3;}

// 5 columns

.dc-col-10{width:@width / 5;}

}

Small Screens

if device maximum width 480px

@media (max-width: 480px){
  .dc-col-1,.dc-col-2,.dc-col-3,
  .dc-col-4,.dc-col-5,.dc-col-6,
  .dc-col-7,.dc-col-8,.dc-col-9,
  .dc-col-10,.dc-col-11,
  .dc-col-12{width:@width / 1 !important;}
}

@media (max-width: 480px){

.dc-col-1,.dc-col-2,.dc-col-3,

.dc-col-4,.dc-col-5,.dc-col-6,

.dc-col-7,.dc-col-8,.dc-col-9,

.dc-col-10,.dc-col-11,

.dc-col-12{width:@width / 1 !important;}

}

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.

<form action="mailer.php" method="post" role="form">
	<!-- Form elements are here -->
</form>

</form>

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

<form action="mailer.php" method="post" class="s3-form" role="form">
	 
		<div class="s3-box">
			<label>Full Name:</label>
			<input type="text" name="sender_name" class="s3-input" required />
		</div>
		
		<div class="s3-box">
			<label>Contact Number:</label>
			<input type="text" name="sender_number" class="s3-input" required />
		</div>
		
		<div class="s3-box">
			<label>Email:</label>
			<input type="email" name="sender_email" class="s3-input" required />
		</div>
		
		<div class="s3-box">
			<label>Message:</label>
			<textarea name="sender_messaeg" class="s3-input" required></textarea>
		</div>
		
		<div class="s3-box">
			<input type="submit" name="submit" class="s3-btn" value="Send">
		</div>
</form>

</div>

<label>Contact Number:</label>

</div>

<label>Email:</label>

</div>

<label>Message:</label>

</div>

</div>

</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 = '';

1	$mail_to = '';

$mail_to will send the email to specify email.

$name    = 		$_POST['sender_name'];
$number  = 		$_POST['sender_number'];
$email   = 		$_POST['sender_email'];
$message = 		$_POST['sender_messaeg'];

$name = $_POST['sender_name'];

$number = $_POST['sender_number'];

$email = $_POST['sender_email'];

$message = $_POST['sender_messaeg'];

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

$subject = '';

1	$subject = '';

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

$body_message = 'From: ' . $name . "\r\n";
$body_message .= 'E-mail: ' . $email . "\r\n";
$body_message .= 'Phone: ' . $number . "\r\n";
$body_message .= 'Message: ' . $message;

$body_message = 'From: ' . $name . "\r\n";

$body_message .= 'E-mail: ' . $email . "\r\n";

$body_message .= 'Phone: ' . $number . "\r\n";

$body_message .= 'Message: ' . $message;

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.

$headers = 'From: ' . $name . "\r\n";
$headers .= 'Reply-To: ' . $email . "\r\n";

1 2	$headers = 'From: ' . $name . "\r\n"; $headers .= 'Reply-To: ' . $email . "\r\n";

Send email now

$send = mail($mail_to, $subject, $body_message, $headers);

1	$send = mail($mail_to, $subject, $body_message, $headers);

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.

if($send == true){ ?>

    <script language="javascript" type="text/javascript">
		alert('Email Sent! We will keep in touch with you shortly.');
		window.location = 'index.html';
	</script>

<?php }else { ?>

    <script language="javascript" type="text/ecmascript">
		alert('Failed! Message not sent. Please notify the site administrator.');
		window.location = 'index.html';
	</script>

<?php } ?>

if($send == true){ ?>

alert('Email Sent! We will keep in touch with you shortly.');

window.location = 'index.html';

</script>

<?php }else { ?>

alert('Failed! Message not sent. Please notify the site administrator.');

window.location = 'index.html';

</script>

<?php } ?>

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

<?php
	$mail_to = 'your.email@your-website.com'; // type your email address
	
	// Assigning data from the $_POST array to variables
	$name    = 		$_POST['sender_name'];
	$number  = 		$_POST['sender_number'];
	$email   = 		$_POST['sender_email'];
	$message = 		$_POST['sender_messaeg'];
	
	// Construct email subject
	$subject = 'Message from Visitor'; // change the subject
	
	// Construct email body
	$body_message = 'From: ' . $name . "\r\n";
	$body_message .= 'E-mail: ' . $email . "\r\n";
	$body_message .= 'Phone: ' . $number . "\r\n";
	$body_message .= 'Message: ' . $message;
	
	// Construct email headers
	$headers = 'From: ' . $name . "\r\n";
	$headers .= 'Reply-To: ' . $email . "\r\n";

	// send email
	$send = mail($mail_to, $subject, $body_message, $headers);

	// Generate success/error message with javascript
if($send == true){ ?>

    <script language="javascript" type="text/javascript">
		alert('Email Sent! We will keep in touch with you shortly.');
		window.location = 'index.html';
	</script>

<?php }else { ?>

    <script language="javascript" type="text/ecmascript">
		alert('Failed! Message not sent. Please notify the site administrator.');
		window.location = 'index.html';
	</script>

<?php } // if($send == true){

?>

<?php

$mail_to = 'your.email@your-website.com'; // type your email address

// Assigning data from the $_POST array to variables

$name = $_POST['sender_name'];

$number = $_POST['sender_number'];

$email = $_POST['sender_email'];

$message = $_POST['sender_messaeg'];

// Construct email subject

$subject = 'Message from Visitor'; // change the subject

// Construct email body

$body_message = 'From: ' . $name . "\r\n";

$body_message .= 'E-mail: ' . $email . "\r\n";

$body_message .= 'Phone: ' . $number . "\r\n";

$body_message .= 'Message: ' . $message;

// Construct email headers

$headers = 'From: ' . $name . "\r\n";

$headers .= 'Reply-To: ' . $email . "\r\n";

// send email

$send = mail($mail_to, $subject, $body_message, $headers);

// Generate success/error message with javascript

if($send == true){ ?>

alert('Email Sent! We will keep in touch with you shortly.');

window.location = 'index.html';

</script>

<?php }else { ?>

alert('Failed! Message not sent. Please notify the site administrator.');

window.location = 'index.html';

</script>

<?php } // if($send == true){

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

How to Create Responsive 12 Column Grid with LESS

HTML Markeup

LESS CSS Styles

Responsive Styles

Large Desktop

Tablet or Laptop

Smart Phones

Small Screens

Final Demo

Like this:

How to Create an HTML/PHP Contact Form – Processing Form Data with PHP

Like this:

Hello world!

Like this:

How to Create Responsive 12 Column Grid with LESS

HTML Markeup

LESS CSS Styles

Responsive Styles

Large Desktop

Tablet or Laptop

Smart Phones

Small Screens

Final Demo

Share this:

Like this:

How to Create an HTML/PHP Contact Form – Processing Form Data with PHP

Share this:

Like this:

Hello world!

Share this:

Like this: