Tried a CSS Frame Generator

Being a Web Developer, particularly a Front End Engineer, we try planning the layout first, using the HTML Tags and stuff, and then think of building the CSS. The first thing we do is, take a paper and draw the layout. And this is how it looks:

After thinking about how the layout is, we need to write the HTML Code, which is also kind of easy task, but needs some good thinking and stuff. That would give an output in the form of HTML, yeah, includes the paper-work too! Ha ha! The output would be something similar to what is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>My New App</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="wrap">
        <div id="header">
            <h1 id="logo">[url=#]My New App[/url]</h1>
        </div>
        <div id="sidebar">
            <ul>
                [*][url=#]Link 1[/url]
                [*][url=#]Link 2[/url]
                [*][url=#]Link 3[/url]
                [*][url=#]Link 4[/url]
                [*][url=#]Link 5[/url]
            </ul>
        </div>
        <div id="content">
            <!-- Content Goes Here -->
        </div>
    </div>
</body>
</html>

After this part is done, the main task of building CSS comes in! We need to find the CSS and for each element in the DOM, the output we need would be:

body {}
body div.wrap {}
body div.wrap div#header {}
body div.wrap div#header h1#logo {}
body div.wrap div#header h1#logo a {}
body div.wrap div#sidebar {}
body div.wrap div#sidebar ul {}
body div.wrap div#sidebar ul li {}
body div.wrap div#sidebar ul li a {}
body div.wrap div#content {}

But this process is really tedious when the page is too big. So we thought of using an app, which does this same work. I personally preferred #-Link-Snipped-#. Another problem comes in. It is a hosted app and when we are offline or we need to use it for private purposes, we couldn't rely on it.

So, I thought of building a same one using PHP. Now guys here, try to think of what I could have done, or at least what techniques I would have used. 😀

More to come!!! 😀