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:
Edit: By now i found this article useful http://www.cssnewbie.com/build-custom-frameworks/ would like to know others views.
If there was a "best way" to build a CSS framework, then one of the existing products would either already be using it, or whoever knew it would be building one right now.
Unfortunately, since you've tried all the products and they don't work for you, I don't think you're going to have much luck. No one can just tell you the "best way" to build a framework. It's like asking what the "best way to build a car" would be. It's a pretty broad subject.
If you have specific questions relate to the technical aspects of framework building, someone can probably give you a hand.
The kinds of layouts you have shown makes me feel that 960 grid system might be fit for that.
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.
