Understanding relative and absolute positioning in CSS didn’t come easily to me when I first started building websites.Now ages after building more websites than I count.I have gotten used to way the browser positions stuff.

Before I talk about absolute/relative position I need to explain what static position is.

0


 

By default every element in the DOM is positioned static.Which means every element appears one after the other in the order they were written in the body tag.

So what is absolute position?Absolute position is where you set the position of the current element relative to the firstĀ parentĀ element.

0


Relative position on the other hand sets the element relative to the parent.

0

So we can build awesome stuff by combining the two.

0



A year ago I was working on a project.It was a standard HTML and CSS project.Since it was side project I had about an hour to work on it every day.

The first few weeks the project CSS was fairly large each file with about ~1000 lines of hate.But after a couple of weeks the CSS was now about 2000 lines and reusing CSS had become cumbersome.

Wow it’s 2013 and I was not using a build process for my saas files.I got so tired of running compass manually on the files and waiting for it complete so I could refresh the browser tab.

I took a stab at grunt.Grunt is a task runner for JavaScript.It has a huge collection of plugins which can be installed and used to create your build pipeline.

Grunt is cross platform and it runs on nodes.So the first thing I had to set up was node.I suggest getting the latest version of node.With every node project you need to use a package manger as it takes care of downloading and dependency management for the packages.

Grunt includes a command line tool which has to be installed globally

npm install -g grunt-cli

You need to create a package .json file by running the npm init command in your shell.You will also need to create a Gruntfile.js file in the project root directory.

Add the following dependencies to package.json file.

{
  "name": "Demo site",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-compass": "^1.0.1",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-express": "^1.4.1",
    "grunt-open": "^0.2.3",
    "matchdep": "^0.3.0"
  }
}

 

You then need to add the following tasks to Gruntfile.

module.exports = function(grunt){
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
  grunt.initConfig({
    express: {
    all: {
        options: {
          bases: ['/Users/surajshirvankar/Desktop/vk.ae/'],
          port: 8080,
          hostname: "0.0.0.0",
          livereload: true
        }
      }
    },
    compass:{
      dev:{
        options: {
          sassDir: 'sass',
          cssDir: 'css'
        }
      }
    },
    watch: {
      compass: {
        files: ['sass/*'],
        tasks: ['compass:dev']
      },
      all: {
          files: ['*.html', 'css/*.css'],
          options: {
              livereload: true
        }
      }
    },
    open: {
      all: {
        path: 'http://localhost:8080/index.html'
      }
    }
  });
  grunt.registerTask('default', ['express','open','watch']);
}

 

You are now done.Just run grunt and it takes care of starting a local server,live-reloading if you change files and build your CSS.