<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>
<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>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 are 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>
<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>
<h2id="docs">Blocks</h2>
@ -79,12 +79,12 @@
<p>Not sure where the boxes are? Add <code>class="debug"</code> to the <code>block</code> (or <code>grid</code>) and it will put a red border around the outer box, then a blue border around the children:</p>
<blockclass="debug">
<p>I am inside a block, see it now?.</p>
<p>I am inside a block, see it now?</p>
</block>
<h2>Blocks Propagate</h2>
<p>The first children in a block become a blocks too. In the beginning that's usually what you want. This means you don't need to put blocks inside blocks unless you want to. You can remove this on an element with <code>class="no-flex"</code>:</p>
<p>The first children in a block become blocks too. In the beginning that's usually what you want. This means you don't need to put blocks inside blocks unless you want to. You can remove this on an element with <code>class="no-flex"</code>:</p>
<blockclass="debug">
<top>
@ -107,7 +107,7 @@
<p>I am inside a solid block.</p>
</block>
<p>Notice how it takes up the whole page? Notice how it is monochrome? That's all you need. You can change the "value" of a solid block with a variable <code>style="--value: 3"</code>:</p>
<p>Notice how it takes up the whole page? Notice how it's monochrome? That's all you need. You can change the "value" of a solid block with a variable <code>style="--value: 3"</code>:</p>
<blockclass="solid"style="--value: 3">
<p>I am inside a solid dark block.</p>
@ -241,7 +241,7 @@
<h2>Spacer</h2>
<p>You can add a basic spacing between blocks with <code><hr></code> tags. The line is hidden.</p>
<p>You can add a basic <b>vertical</b>spacing between blocks with <code><hr></code> tags. The line is hidden.</p>
<h2>Grids</h2>
@ -253,7 +253,7 @@
<p>You set the rows, columns, and gap with style variables <code>--rows</code>, <code>--columns</code>, and <code>--gap</code> like so:
