<p>The <ahref="/blockstart.css">blockstart.css</a> file gives you a simple set of basic layout primitives to get started. It allows you to follow a process similar to painters:</p>
<p>The <ahref="/blockstart.css">blockstart.css</a> file gives you a simple set of basic layout primitives to get started. It allows you to follow a simple process:</p>
<ol>
<ol>
<li>Organize the big "gross" structure without details in monochrome.</li>
<li>Create a general monochrome block layout with little to no detail.</li>
<li>Develop a first statement with a meaningful structure and a simplified monochrome design.</li>
<li>Divide these simple layout blocks with smaller elements.</li>
<li>Refine a second statement by filling in the structure with content and additional refinements for that content.</li>
<li>Refine these smaller elements with fake (or real) content, and refine the smaller elements based on the content.</li>
<li>Complete a third statement with further refined details, fonts, and color schemes.</li>
<li>Finalize the design with further details and make everything fit together as a whole (the
gestalt).</li>
</ol>
</ol>
<p>In practical terms this means:</p>
<p>This is a similar process to the one used by many painters and other artists. The theory behind this process is to reduce the amount of information you need to manage to only the information that's needed at that stage. For example, there's no point in worrying about colors and fonts if you have no idea where the big blocks of text will go. In practical terms this means:</p>
<ol>
<ol>
<li>Use <ahref="/blockstart.css">blockstart.css</a> to get a "chunky" boxes and grids layout.</li>
<li><b>Layout</b> -- Large blocks divide the page, most likely 4-5 blocks.</li>
<li>Replace the <ahref="/blockstart.css">blockstart.css</a> with semantic HTML tags and your own CSS, adding first refinements.</li>
<li><b>First statement</b> -- Contents of each layout block placed as small blocks and visual elements, most likely the layout blocks are invisible now.</li>
<li>Fill in your blocks with media so you have something to design around that's real, refining further.</li>
<li><b>Second statement</b> -- Fake (or real) content such as media, lorem ipsum, real copy, text, icons, fonts, and possibly colors.</li>
<li>Develop this last stage of the design with font choices, color, and other details that fit the content.</li>
<li><b>Third statement</b> -- More small details worked out, but more importantly everything works as a whole, which is called the "gestalt."</li>
</ol>
</ol>
<p>The <ahref="/blockstart.css">blockstart.css</a> file helps with this process by giving you the minimum necessary blocks to create the first statement. There is almost nothing in the CSS, making it easy to replace in later stages...if you want.</p>
<p>A "statement" is another term from painting which means "an attempt at saying what you want for that stage of the work." Each step isn't a final complete step, but rather an attempt to say something, which you'll refine later as you try to "say" more. I like this way of looking at artistic processes because paintings, web pages, and other visual art is a communication medium, and it's usually trying to "state" or "say" something.</p>
<p>The <ahref="/blockstart.css">blockstart.css</a> file helps with the <b>Layout</b> and <b>First statement</b> parts of the process by giving you the minimum necessary blocks to create the first statement. There is almost nothing in the CSS, making it easy to replace in later stages...if you want.I actually recommend <b>not</b> keeping the markup and CSS from <code>blockstart.css</code>.</p>
