in CSS, Web Development

Creating a Responsive Website from Scratch for Absolute Beginners

Advertisement

In this article we will create a basic structure or the backbone on building responsive design which is the most important thing in every programming languages is to know the basic, though, we’re not only building responsive website here, we also create our own basic responsive framework, sounds interesting right? Yes it does.

Over the past year responsive design has become a hot topic in web design or even in web app community, this article is not exhaustive, and we won’t go deep into each technique, but you’ll have enough links and knowledge to explore further by yourself.

Demo

Click herehere to view demo page.

Aim of this tutorial

  • Create responsive design from scratch
  • Basic HTML5 DIV structure
  • Basic CSS responsive framework

responsive-webdesign

HTML Code

Below is the code for our HTML structure, with Header, Main Content(Left), Sidebar(Right) and Footer for our copyright.


<div class="wrapper">
	<!--Header-->
	<header>
		<div class="row">
			<div class="twelve columns">
				<h1 class="site-title">Welcome To My Reponsive Website</h1>
			</div>
		</div>
	</header>

	<!--Main Content-->
	<div class="main-content">
		<div class="row">
			<div class="eight columns">
				<h2>Post Title</h2>
				<p>content here….</p>
				<p>more content here…..</p>
			</div>
			<div class="four columns">
				<aside>
					<h3 class="widget-title">Sidebar Menu</h3>
					<ul class="menu">
						<li><a href="#">Menu 1</a></li>
						<li><a href="#">Menu 2</a></li>
						More menu….
					</ul>
				</aside>
			</div>
		</div>

		<div class="row">
			<div class="four columns">
				<div class="text-center">
					<h3>Who We Are?</h3>
					<img src="images/who-we-are.png" alt="Who we are" />
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
				</div>
			</div>
			<div class="four columns">
				<div class="text-center">
					<h3>What We Do?</h3>
					<img src="images/what-we-do.png" alt="What we do" />
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
				</div>
			</div>
			<div class="four columns">
				<div class="text-center">
					<h3>Contact Us</h3>
					<img src="images/contact-us.png" alt="Contact us" />
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
				</div>
			</div>
		</div>
	</div>

	<!--Footer-->
	<footer>
		<div class="row">
			<div class="full columns">
				<p class="copyright">Copyright &copy; sutanaryan.com. All Rights Reserved.</p>
			</div>
		</div>
	</footer>
</div>

CSS Code

Contains our basic CSS responsive framework and some of our demo styles.


*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body{ margin: 0; padding: 0; background-color: #FAFAFA; font-size: 16px; font-family: 'Sanchez', Arial, sans-serif; }

ul{ margin: 0; padding: 0; }
a{ text-decoration: none; }
.text-center{ text-align: center; }

/* Main */
div.wrapper{ background: url('images/bg.png') repeat 0 0; }

/* header */
header{ min-height: 100px }
h1.site-title{ text-shadow: 1px 1px 2px #fff; }

/* main-content */
div.main-content{ min-height: 500px }

/* sidebar */
aside ul{ list-style: none; }
aside ul li{ padding: 4px 0; border-bottom: 1px solid #EBE9E9; }

/* footer */
footer{ margin-top: 40px; }
p.copyright{ font-size: 14px; }

/* Responsive Reset */
.clearfix{ clear: both; content: ""; display: table; width: 100%; }
.row{ width: 960px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.row{ *zoom: 1; } /* e.g. IE bugs display: inline-block; */
.row:before, .row:after{ content: ""; display: table; }
.row:after{ clear: both; }

Using normal code the most time consuming is creating and adding DIV right? Don’t get me wrong, it became fewer burdens when some expert introduces griding system and we’re going to use the same idea here creating our grid.


/* Grid */
.columns, .column{ float: left; padding: 0 15px; position: relative; }

.one, .row .one { width: 8.33333%; }
.two, .row .two { width: 16.66667%; }
.three, .row .three { width: 25%; }
.four, .row .four { width: 33.33333%; }
.five, .row .five { width: 41.66667%; }
.six, .row .six { width: 50%; }
.seven, .row .seven { width: 58.33333%; }
.eight, .row .eight { width: 66.66667%; }
.nine, .row .nine { width: 75%; }
.ten, .row .ten { width: 83.33333%; }
.eleven, .row .eleven { width: 91.66667%; }
.twelve, .row .twelve { width: 100%; }

Our site becomes responsive and made possible by using @media selector, this selector introduces in CSS3.


/* Media Query */
@media only screen and (max-width: 768px) {
	body{ width: 100%; margin: 0; padding: 0; }

	/* Clear all float DIV */
	.row{ width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
	.column, .columns{ width: auto !important; float: none; }
	.column:last-child, .columns:last-child { float: none; }
	[class*="column"] + [class*="column"]:last-child { float: none; }
	.column:before, .columns:before, .column:after, .columns:after { content: ""; display: table; }
	.column:after, .columns:after { clear: both; }
}

If you want to target other screen resolution out there like all iOS devices or even some Android Phone and Tab


/* For iOS devices */
@media only screen and (max-width: 320px) {
	/* iPhone in portrait orientation */
}
@media only screen and (max-width: 480px) {
	/* iPhone in landscape orientation */
}
@media only screen and (max-width: 1024px) {
	/* iPad in landscape orientation (as well as netbooks, since these devices typically have a horizontal resolution of 1024px). */
}

/* For Android devices */
@media only screen and (max-width: 380px) {
	/* Samsung Galaxy in portrait orientation */
}
@media only screen and (max-width: 685px) {
	/* Samsung Galaxy in landscape orientation */
}

That’s it happy coding 😉

Advertisement

Related Articles