Dynamic Blox

A Web Design Resourse

Breadcrumb Section

Modern Web Design Pt 1

May, 08, 2014 | CSS,HTML

The landscape of web design has changed dramatically compared to the time when, I was introduced to the world of text-editors and IDEs (Integrated Development Environment).  With that being stated I present, modern web design Pt 1. Today you have a plethora of frameworks, free templates and the evil WYSIWYG softwares (just kidding). For years I entertained the idea of posting a tutorial on how to properly develop and design a CSS and HTML template that a beginner can use to fully understand the concept of front-end development. An exercise that will help you better understand what goes into developing a modern website for all devices.

The main focus of this tutorial is based on the process of achieving an effective website, and the necessary requirements. I will provided links for more intricate details on all of the steps. Getting knee deep into every function and element of this process is beyond the scope of the end goal. What you will get are the necessary practices in understanding, and producing a modern web page. The requirements to follow this tutorial are not much; have an open mind first and foremost,  download a text editor (there are many free ones out there like Adobe’s Bracket) and be prepared to do some research if you are truly interested.  Today we will focus on the structure of this project, by examining a grid system that will be used to build our web pages.

RESET

There are four major browsers we all have used at one point or another; Firefox, Chrome, Safari and Internet Explorer. While they all tend to provide identical functions, there are slight differences in the way they render content on the web. You have to understand this is four different entities with different values towards business and the end user. The reset tool nullifies the differences as far as each entity will allow us.  It can make our job as web designers a little easier. However, with every new development, comes a great deal of challenges. The goal of a reset is to reduce browser inconsistencies. See ( http://meyerweb.com/eric/tools/css/reset/ ) for more information.

/*===============RESET===============*/

/* The goal of a reset is to reduce browser inconsistencies. 
See http://meyerweb.com/eric/tools/css/reset/ for more information*/

html,body,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,
ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,
dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,
tr,th,td,html, body, div, section, article, aside, header, hgroup, 
footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, 
span,figure, canvas, video, th, td, tr 
{margin: 0;padding: 0;border: 0;vertical-align:baseline;font: inherit;}


html, body 
{ background: #e5e5e5; margin: 0px; padding:0px !important}

body 
{font-weight:normal; font-style:normal; font-family: 'Droid Sans', sans-serif;}

BOX-SIZING

Another must used tool is the (the “*” is a symbol for implementing a universal command for some CSS properties) “box-sizing” property. It helps your layout in ways you can’t begin to appreciate. Coming from an XHTML era where every pixel had to be accounted for might shed some light on why I am so fond of this property. You can read more about it at ( http://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/ ). The code that I provided for this segment is from (http://www.paulirish.com/2012/box-sizing-border-box-ftw/), which also goes more in dept about it and the “*” universal element.

/* The "box-sizing" elelment help solve the relationship of width and padding. For more info on this go to - http://css-tricks.com/box-sizing/ */ 

*, *:before, *:after
{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

HTML5 ELEMENTS

It’s 2014 and this is probably not necessary anymore, but you can never be too careful. I am quite adamant about not supporting older browsers, but hypocritical when it comes to letting go of safety nets. In any event, HTML5 has brought us a “SEMATIC WEB” approach that is somewhat confusing, if you let some geek beat you in the head with what he or she like to believe is the correct approach. I will not pretend to know jack squat about the spec of HTML5, I am more of a right brain thinker (when its convenient) at this juncture. However, you can research this info at (http://www.w3.org/TR/html-markup/elements.html).

/* HTML5 Elements*/

 article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, section, summary 
{display: block;}

CLEARFIX

Clearing floats is another one of those issues that will cause some stress for a beginner. For starters, it use to be absolutely necessary. The annoying part for me was the empty div in my markup that raised warnings during the validation process. The few lines of code provided below changed the game forever. For more info ( http://davidwalsh.name/css-clear-fix).

/*Clearfix helps prevent content from overlapping so they can be displayed properly.*/
/* Clearfix */

/*.blockz is a container for all html5 elements*/
.blockz:after {content: "";display: table;clear: both;}
.blockz {width: 100%;  margin:0px; padding:0px; float:left; position: relative; }

/*.wrapper is a container for all grid classes*/
.wrapper:after {content: "";display: table;clear: both;}
.wrapper {width: 95%; max-width: 1080px; margin: 0px auto;}

CSS GRID

Some swear by it and very few have no use for it. Grids are a pain in the ass. For a very long time most of us were stuck on the 960 grid system (http://960.gs/) and for good reasons. It provided very sound foundation and rules on front-end development that can be recycled for a multitude of uses.

What if you are like me though, and hate conformity? Keep in mind, I loved the strict rules of XHTML because it provided structure. However, I turned my nose up at the 960 grid, because I was once a Flash guy. My work usually required a great deal of design, and about a 100 lines of Actionscript 3 or so. However, Flash has been reduced to videos and annoying ads on the web and no longer used for full web development. Below you will find the a basic grid system developed with percentages in order to provide the flexibility for a responsive layout. Most grid system come with a 12 column layout. I will use 10 columns to keep it simple. I will also implement five addition grids for laying out the traditional sidebar and content area.  The base of this project leads to LEMONADE or just go here ( http://lemonade.im/ )…

/*This is a very simple grid system we will use to build the "My Company" website. */

[class*='col-'] {float: left;padding: 5px; margin: 0px; border: 1px transparent solid;}

/* =====================Main Widths================= */

/*====GENERAL======*/

.col-1  {width: 100%;}
.col-2  {width: 50%;}
.col-3  {width: 33.33%;}
.col-4  {width: 25%;}
.col-5  {width: 20%;}
.col-6  {width: 16.6666666667%;}
.col-7  {width: 14.2857142857%;}
.col-8  {width: 12.5%;}
.col-9  {width: 11.1111111111%;}
.col-10 {width: 10%;}

/*====CONTENT LAYOUT======*/

.col-80  {width: 80%;}
.col-70  {width: 70%;}
.col-60  {width: 60%;}
.col-40  {width: 40%;}
.col-30  {width: 30%;}

MEDIA QUERY

(Where the Magic Happens…)
In the early stages of this function, you had to create three different stylesheets for three different display models: Desktop, tablet, and phone. A more advance approach relegated this function to a single stylesheet and streamline the process. this the approach we will take for this project. For more info see (http://css-tricks.com/logic-in-media-queries/).

/*MEDIA QUERY Feature for multiple devices*/

/* Landscape mobile & down
===============================*/
@media (max-width: 480px) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-30,
  .col-40,
  .col-60,
  .col-70,
  .col-80
 {width: 100%;}
  
}

/* Mobile to Tablet Portrait
===============================*/
@media (min-width: 480px) and (max-width: 780px) {
  .col-4,
  .col-6,
  .col-8,
  .col-10
 {width: 50%;}

  .col-1,
  .col-2,
  .col-3,
  .col-5,
  .col-7,
  .col-9,
  .col-30,
  .col-40,
  .col-60,
  .col-70,
  .col-80
 {width: 100%;}
  
}

/* Landscape Tablet to Desktop
===============================*/
@media (min-width: 780px) and (max-width: 1080px) {
  .col-2,
  .col-7,
  .col-9 
 {width: 100%;}

  .col-4,
  .col-8,
  .col-10,
  .col-12
  {width: 50%;}
  

.col-80  {width: 80%;}
.col-70  {width: 70%;}
.col-60  {width: 60%;}
.col-40  {width: 40%;}
.col-30  {width: 30%;}

}

The following post to this series will focus on the main navigation bar of the web page and how we can style it for multiple devices.

Click here to view the grid system.

Click here to download it.

The Great Banda...

I dream in code, find conformity repulsive and drink excessive amounts of coffee…

8 Responses to “Modern Web Design Pt 1”

  1. Ling Fong

    September 11, 2014

    I do not suppose I’ve read through
    anything like that before. So good to discover somebody with a few uniqye thoughts on this issue.
    Seriously.. many thanks for starting this up. someone with a little originality!

  2. Jeremy S.

    June 3, 2014

    Thanks, was looking for something like this.

  3. Amanda

    May 30, 2014

    This can be very useful, but I prefer Foundation, mostly because I love using SASS

  4. Crissi

    May 29, 2014

    Wow, I was racking my brain trying to figure this out. Thanks Dan, this will really help me.

  5. Bobby

    May 27, 2014

    Did you copy and paste this from tutsplus?

  6. Barnet

    May 10, 2014

    This is a nice tutorial, I just downloaded the file and can’t read the CSS.

    • Mr. Blox

      May 14, 2014

      Check the .less file.

      • Loran

        January 25, 2017

        There’s nothing like the relief of finding what you’re looking for.