Div based Fixed or Fluid CSS/HTML layout Template


About two year back I worte an article introducing a simple HTML structure to organize the content on the web page as shown below.

Layout structure

header
sidebar left
content
sidebar right
footer

The above illustration just a simple introduction to how the template looks like. This HTML/CSS layout structure consists of examples illustrating the usage of Fixed and Fluid layouts covering following aspects

  • Without any Sidebars
  • With one Sidebar on Left
  • With one Sidebar on Right
  • With two Sidebars on either sides (Left and Right)

Folder sturcture

  • css – consists of all the CSS files
  • js – consists of all the JavaScript files
  • images – consists of all the image files
  • plugins – consists of all the third party components
  • template – consists of examples
  • readme.txt – simple introduction
  • lgpl.txt – lgpl license file

CSS

Inside the css folder you’ll find several files as illustated below, I adapted this structure after studing the Drupal Zen theme. Currely the theme is not Sass aware.

  • Core
    • html-elements.css – style rules to neutralize browser defaults and define baseline formatting to HTML elements
    • form-elements.css – style rules to format form blocks
    • layout.css – style rules to control the overall layout of the template (fixed or fluid)
    • sidebar.css – style rules to ncontrol the formating of sidebar(s)
    • print.css – style rules to format the web page when printing to a paper or PDF/Postscript.
    • website.css – style rules that requires to meets the look and feel of the custome design (main CSS file)
  • Optional
    • website-popup.css – style rules used for popul dialogs
    • handheld.css – style rules required to override website.css to make the site mobile friendly
    • ie_8.css – to keep IE 8 specific style rules
    • ie_7.css – to keep IE 7 specific style rules
    • ie_6.css – to keep IE 6 specific style rules

The above CSS files linked to the HTML markup was done within HTML head element as illustrated in Figure 1. CSS files with IE version specifc style rules were loaded inside a conditional comment block.

Figure 1: Linking of CSS files

JavaScript (breed of ECMAScript)

Inside the js folder you’ll find the javascript files used by the theme. I have used jQuery library as the base for all the client-side scripting requirements.

  • actions.js – to handle client side logic
  • window.orientation.js – to control the orientation of the page when viewing from a handheld device.

The above JavaScript files and the ones mentioned under plugins section was linked to the HTML markup was done just before the HTML closing body element as illustrated in Figure 2. This method was adapted to minimized the loading delay introduce by JavaScript files to the clent browser.

Figure 2: Linking of JavaScript files

Images

Inside the images folder you’ll find all the images used in the theme. Inside this you’ll find a folder called icons, which holds third party icons find from the Web (unfortunately I’m unable to locate the repository, my apologies to the creator/owner of the icon.)

Plugins

Inside the plugin folder you’ll find all the third pary libraries used in the theme.

Templates

Inside the template folder you’ll find examples illustrating following layouts

  • Fixed layout
    • no-sidebars-tableless-fixed
    • sidebar-left-tableless-fixed
    • sidebar-right-tableless-fixed
    • two-sidebars-tableless-fixed
  • Fluid layout
    • no-sidebars-tableless-fluid
    • sidebar-left-tableless-fluid
    • sidebar-right-tableless-fluid
    • two-sidebars-tableless-fluid

Fixed/Fluid switching

The switching between the Fixed and Fluid layout structures and be very easily achieved by toggleing the class attribute found on the HTML body element as follows:

  • Fixed – fixed-layout
  • Fluid – fluid-layout

<body class="fixed-layout">
            or
<body class="fluid-layout">

With and without Side-bars switching

The switching between the With and without Side-bars layout structures and be very easily achieved by toggleing the class attribute found on the first HTML div element next to body element as follows:

<body class="fixed-layout">
<div id="wrapper" class="no-sidebars">
            or
<body class="fixed-layout">
<div id="wrapper" class="sidebar-left">
            or
<body class="fixed-layout">
<div id="wrapper" class="sidebar-right">
            or
<body class="fixed-layout">
<div id="wrapper" class="two-sidebars">

To create an easily customizable div based HTML/CSS template by myself was their in my mind for sometimes and I’ll be sharing it for the benefit of others. The template can be download form Github repository.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,050 other followers

%d bloggers like this: