<p>Here are a few simple demos of using <ahref="/blockstart.css">blockstart.css</a> to create copies of landing pages. Copying other websites is a great way to learn web development. The text in the demos is either taken from the "inspiration" site, or is from <ahref="https://hipsum.co/">hipster ipsum</a>.</p>
<p>Here are a few simple demos of using <ahref="/blockstart/blockstart.css">blockstart.css</a> to create copies of landing pages. Copying other websites is a great way to learn web development. The text in the demos is either taken from the "inspiration" site, or is from <ahref="https://hipsum.co/">hipster ipsum</a>.</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>
<p>The <ahref="/blockstart/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>
<li>Create a general monochrome block layout with little to no detail.</li>
@ -64,7 +64,7 @@
<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/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>
@ -117,7 +117,7 @@
<h2>Values</h2>
<p>What's a value? A value represents a simple number for the "light" and "dark" of something. Think of it as a measure of the amount of light produced. A value 9 object gives off a lot of light, so it's white. A value 0 object gives off no light, so it's black. You can do most initial designs with only 5 values, but <ahref="/blockstart.css">blockstart.css</a> has 10 (0-9) to help with contrast. You can usually change the background with <code>--value: 0</code> and the text with <code>--text: 9</code> in most places.</p>
<p>What's a value? A value represents a simple number for the "light" and "dark" of something. Think of it as a measure of the amount of light produced. A value 9 object gives off a lot of light, so it's white. A value 0 object gives off no light, so it's black. You can do most initial designs with only 5 values, but <ahref="/blockstart/blockstart.css">blockstart.css</a> has 10 (0-9) to help with contrast. You can usually change the background with <code>--value: 0</code> and the text with <code>--text: 9</code> in most places.</p>
<p>We can fix that last block's contrast with value 9 text using <code>style="--text: 9;"</code>:</p>
@ -327,7 +327,7 @@
<h2>Getting Started</h2>
<p>Once you download the <ahref="/blockstart.css">blockstart.css</a> you need a web server. For people who use Node.js you can run the <ahref="https://www.npmjs.com/package/http-server">http-server</a> package to get a simple one. Here's the commands that I use to get a project started:</p>
<p>Once you download the <ahref="/blockstart/blockstart.css">blockstart.css</a> you need a web server. For people who use Node.js you can run the <ahref="https://www.npmjs.com/package/http-server">http-server</a> package to get a simple one. Here's the commands that I use to get a project started:</p>
<pre>
<code>
@ -341,7 +341,7 @@ npx http-server -d -c-1 public
</code>
</pre>
<p>Once you do that you can place the <ahref="/blockstart.css">blockstart.css</a> in the <code>public/</code> directory and start putting your <code>.html</code> files in the same place. Here's a decen starter template:</p>
<p>Once you do that you can place the <ahref="/blockstart/blockstart.css">blockstart.css</a> in the <code>public/</code> directory and start putting your <code>.html</code> files in the same place. Here's a decen starter template:</p>
<pre>
<code>
@ -361,7 +361,7 @@ npx http-server -d -c-1 public
</code>
</pre>
<p>There's a lot you can add to an HTML page to make it work on different platforms, including all the icons ever invented by Apple, but this file gets you started when using the <ahref="/blockstart.css">blockstart.css</a>.
<p>There's a lot you can add to an HTML page to make it work on different platforms, including all the icons ever invented by Apple, but this file gets you started when using the <ahref="/blockstart/blockstart.css">blockstart.css</a>.
