Responsive Web Design – Sample Code

Responsive Web Design – Sample Code

Created By: Debasis Das (25-Nov-2016)

There is no doubt that Websites needs to be designed to be responsive to different viewing areas and should be usable with equal ease in mobile, tablets and computer browser which has varied viewing areas.

However do we really need to start from scratch to develop a responsive website. Answer is no when there are magnificent CSS Templates like bootstrap that already handles it with ease and is easy to learn and implement. Bootstrap is well tested and used in millions of websites today.

In this article we are not suggesting to build your own responsive web design templates but rather focusing on the concept of RWD using some simple examples. For actual use one should rather use bootstrap.

RWD Sample 1

https://knowstack.github.io/html/rwd.html

rwd-2
rwd-1

<!doctype html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}

[class*="col-"] {
    float: left;
    padding-top: 10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
.header{
	background-color: #239B56;
	padding:15px;
	color:#FFFFFF;
	border-radius: 0px;
	border:1px solid #989898;
}
.footer {
    background-color: #58D68D;
    color: #FFFFFF;
    text-align: center;
    font-size: 1.2em;
    padding: 15px;
    border-radius: 0px;
    border:1px solid #989898;
}
.well{
	background-color:#82E0AA; 
	border:1px solid #989898;
	border-radius: 5px;
	padding:10px;
}

    #main {
        min-height: 500px;
        background-color: #D1F2EB;
        padding:10px;
        border:1px solid #989898;
    }

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
</style>
</head>
<body>
<div class = "header" >
<h1>Responsive Web Design - Sample</h1>
</div>

<div class="row" id="main">
	<div class="col-3" > 
	<div class="well">
		3 Columns 
		<ul>
			<li>Home</li>
			<li>Page 1</li>
			<li>Page 2</li>
			<li>Page 3</li>
			<li>Contact Us</li>
	    </ul>
	</div>
	</div>
	<div class="col-6">
	<div class="well"> 6 Columns 
	Details<br>
	Details<br>
	Details<br>
	Details<br>
	Details<br>
	Details<br>
	</div>
	
	</div>
	<div class="col-3" > 
	
	<div class="well">3 Columns </div>
	</div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>

RWD Sample 2

https://knowstack.github.io/html/rwdflex.html

rwd-flex-1
rwd-flex-2

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
    body {
        font: 24px Helvetica;
        background: #000000;
    }

    #main {
        min-height: 500px;
        margin: 0px;
        padding: 0px;
        display: flex;
        flex-flow: row;
    }
 
    #main > article {
        margin: 4px;
        padding: 5px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: #F7DC6F;
        flex: 3 1 60%;
        order: 2;
    }

    #main > nav {
        margin: 4px;
        padding: 5px;
        border: 1px solid #888888;
        border-radius: 7pt;
        background: #F1C40F;
        flex: 1 6 20%;
        order: 1;
    }
  
    #main > aside {
        margin: 4px;
        padding: 5px;
        border: 1px solid #888888;
        border-radius: 7pt;
        background: #B9770E;
        flex: 1 6 20%;
        order: 3;
    }
 
    header, footer {
        display: block;
        margin: 4px;
        padding: 5px;
        min-height: 100px;
        border: 1px solid #eebb55;
        border-radius: 7pt;
        background: #A04000;
    }
 
    /* Too narrow to support three columns */
    @media all and (max-width: 640px) {
        #main, #page {
            flex-direction: column;
        }

        #main > article, #main > nav, #main > aside {
        /* Return them to document order */
            order: 0;
        }
  
        #main > nav, #main > aside, header, footer {
            min-height: 50px;
            max-height: 50px;
        }
    }
    </style>
  </head>
  <body>
    <header>header</header>
    <div id='main'>
      <article>article</article>
      <nav>nav</nav>
      <aside>aside</aside>
    </div>
    <footer>footer</footer>
  </body>
</html>
Posted in CSS, HTML5, Web Technology Tagged with: ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news