Home/ Questions/Q 525793
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T08:42:33+00:00

I’ve tried all other Blueprint, 960 etc . I want make custom framework for

  • 0

I’ve tried all other Blueprint, 960 etc . I want make custom framework for custom width and gutters which should be modify for any width or spacing between boxes.
I need the best optimize and quick way to make layout. Want to make a reusable framework/method/patteren in css.

For examples:

alt text
(source: fivetechnology.com)

Edit:
By now i found this article useful http://www.cssnewbie.com/build-custom-frameworks/
would like to know others views.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you genuinely understand html and css, these sorts of things literally fall together in about five minutes with notepad.

    They’re boxes…

    …After I said this, I had to see if I was really fast enough to do that in notepad. I’m high, I have nothing better to do, and I figure I should be able to back what I say up.

    I almost got too lazy, but then I just committed, cause it would only
be five minutes, right? 

Started at:

    Honor system here I guess, everything
    between this time and the next time
    was all that I typed between those two
    times. After I finished I copied it
    out into coda, saved it to see that it
    worked (it did), fixed the formatting
    for readability, and pasted it back
    in. Yes I really put the font family
    and colors in, I don’t know why. I
    figured why not?

    2:35:17

<html>
<head>
<title>Speed Challenge Impromptu</title>
</head>
<style>
 body {
  background: #000;
  color: #fff;
  margin: 0;
  padding: 0;
  font-family: helvetica;
  font-size: 12px;
  border-bottom: 1px solid #999;
 }
 #wrapper {
  width: 960px;
  margin: 0 auto;
  padding: 5px;
  border-left: 1px solid #999;
  border-right: 1px solid #999;
  background: #222;
 }
 #header {
  height: 160px;
  background: #444;
  border: 1px solid #aaa;
 }
 #menu {
  margin-top: 5px;
  margin-bottom: 5px;
  height: 50px;
  background: #555;
  border: 1px solid #aaa;
 }
 #content {
  height: 800px;
  background: #666;
  border: 1px solid #aaa;
  margin-bottom: 5px;
 }
 #footer {
  height: 25px;
  background: #444;
  border: 1px solid #aaa;
 }
</style>
<body>
<div id="wrapper">
 <div id="header">
 </div>
 <div id="menu">

 </div>
 <div id="content">

 </div>
 <div id="footer">

 </div>
</div>
</body>
</html>

2:41:52

    Not bad for being totally unprepared in a bit over six minutes. I assure you I was rather slow in typing and thinking, I wouldn’t doubt a sub two minute time. All the colors were guessed as were the sizes. It’s not ideal for a production website, but it’s great to figure out what’s going where initially.

    I didn’t have columns in mine, you can basically copy those boxes inside of themselves styling-wise and do quite a lot row-wise. Fixed widths and floating rights would get the job done for columns.

    This is what a finished version could look like. Obviously taking much longer than five minutes, but still not bad.

    • 0