A simple CSS file to make it easier to layout a web page quickly at the start. It's meant to be removed once you have the basic layout done, but you could probably keep it if you like it.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

377 lines
16 KiB

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>blockstart.css</title>
<link rel="stylesheet" href="/blockstart/blockstart.css">
<style>
code, pre {
background-color: var(--value8);
}
pre {
padding-left: 0.5rem;
padding-right: 0.5rem;
border-radius: var(--border-radius);
font-size: 1.1em;
}
body {
font-size: 1.2em;
}
</style>
</head>
<body>
<blockstart>
<block class="horizontal" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
<a href="/blockstart/">blockstart.css</a>
<div class="horizontal" style="--spacing: end;">
<a href="/blockstart/#about">About</a> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
</div>
</block>
<block class="center center-text" style="--w: 100%; --value: 7; --h: 400px;">
<div class="center center-self">
<h1>The blockstart.css</h1>
<p>Quickly get your initial layout idea done with minimal CSS and HTML.</p>
</div>
</block>
<block class="center" style="--w: 1080px;">
<div>
<h1 id="#about">About blockstart.css</h1>
<p>The <a href="/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>
<li>Divide these simple layout blocks with smaller elements.</li>
<li>Refine these smaller elements with fake (or real) content, and refine the smaller elements based on the content.</li>
<li>Finalize the design with further details and make everything fit together as a whole (the
gestalt).</li>
</ol>
<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>
<li><b>Layout</b> -- Large blocks divide the page, most likely 4-5 blocks.</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><b>Second statement</b> -- Fake (or real) content such as media, lorem ipsum, real copy, text, icons, fonts, and possibly colors.</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>
<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 <a href="/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>
<h2 id="docs">Blocks</h2>
<p>The <code>&lt;block&gt;</code> is the main structure. It's a block. When you put things in it, they stay in there. That's how a block should work:</p>
<block>
<p>I am inside a block.</p>
</block>
<h2>Width and Height</h2>
<p>You can set the width and height of a <code>&lt;block&gt;</code> (or immediate children) by simply setting the <code>--w</code> and <code>--h</code> variables:
<pre><code>
&lt;block style="--w: 400px; --h: 200px;"&gt;400x200 block&lt;/block&gt;
</code></pre>
<p>That will make a block that's 400px by 200px.</p>
<h2>.fill</h2>
<p>If you just want a block to fill its parent then give it the class <code>.fill</code>. That will probably make it expand to fill, but it's kind of dodgy whether it works as expected. If it's not working then just remove it and use the <code>--h</code> and <code>--w</code>.</p>
<h2>Debugging</h2>
<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>
<block class="debug">
<p>I am inside a block, see it now?</p>
</block>
<h2>Blocks Propagate</h2>
<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>
<block class="debug">
<top>
<p>Line 1</p>
<p>Line 2</p>
</top>
<bottom class="no-flex">
<p>No Flex Line 1</p>
<p>No Flex Line 2</p>
</bottom>
</block>
<p>In that example, the "No Flex" lines are spaced normally because the code has <code>class="no-flex"</code> on that block.</p>
<h2>Block Values and Text</h2>
<p>All blocks have a <code>--value</code> variable that sets the backgrond value, and <code>--text</code> for the text value. A "value" is a number 0-9 that indicates the darkness or lightness of an object. Think of it as the amount of light in the object, with 0 meaning no light, and 9 being all the light. Here is a <code>--value: 0; --text: 9;</code></p>
<block style="--value: 0; --text: 9;">
<p>I am inside a solid block.</p>
</block>
<p>Notice how it takes up the whole page width? 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>
<block style="--value: 3">
<p>I am inside a solid dark block.</p>
</block>
<p>We can't read that text so we need something called a "Value."</p>
<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 <a href="/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>
<block style="--value: 3; --text: 9;">
<p>I am inside a solid dark block too.</p>
</block>
<p>If we use <code>style="--value: 0; --text: 9;"</code> we can get a high contast dark block:</p>
<block style="--value: 0; --text: 9;">
<p>I am inside a solid black block.</p>
</block>
<p>Values make it easier to solve contrast in your designs because you don't have to think about thousands of colors and their luminance levels. Just make the difference in value between your text (the subject) and background (the ground) to increase contrast. In the previous block the difference was 9 because background is value 0 and text is value 9.</p>
<h3>Fixed Values</h3>
<p>There are 10 preset values you can use in other CSS settings:</p>
<pre><code>--value0: hsl(0, 0%, calc(0 * var(--value-scale)));
--value1: hsl(0, 0%, calc(1 * var(--value-scale)));
--value2: hsl(0, 0%, calc(2 * var(--value-scale)));
--value3: hsl(0, 0%, calc(3 * var(--value-scale)));
--value4: hsl(0, 0%, calc(4 * var(--value-scale)));
--value5: hsl(0, 0%, calc(5 * var(--value-scale)));
--value6: hsl(0, 0%, calc(6 * var(--value-scale)));
--value7: hsl(0, 0%, calc(7 * var(--value-scale)));
--value8: hsl(0, 0%, calc(8 * var(--value-scale)));
--value9: hsl(0, 0%, calc(9 * var(--value-scale)));
</code></pre>
<p>These are useful when you need to set something that's not covered by Blockstart. Say you want to add a bottom-border that's middle gray:</p>
<pre><code>&lt;block style="border-bottom: 1px solid var(--value5);"&gt;</pre></code>
<h3>.solid</h3>
<p>For convenience you can just add a <code>class="solid"</code> and get a default gray background
with light text.</p>
<h2>Shapes</h2>
<p>You always need some kind of rectangle shape to represent where a photo might go, and the <code>shape</code> tag handles that:</p>
<shape style="--w: 300px; --h: 300px;">
<h1>Image</h1>
</shape>
<p>You set the shape's size with <code>style="--w: 300px; --h: 300px;"</code>.</p>
<h2>Padding</h2>
<p>Just the variable <code>style="--pad: 1rem"</code> to change its padding.</p>
<h2>Borders</h2>
<p>Things need borders and you can add a border with <code>class="border"</code>:</p>
<block class="center border">
<h3>This box has a border</h3>
</block>
<h2>Center</h2>
<p>Many times in the beginning you'll want to say something is centered, and you mean the whole thing, not just randomly the box but not its content. Add <code>class="center"</code> and it will be centered:</p>
<block class="center border">
<h2>This Block Is Center</h2>
<p>You say it's centered, it's centered.</p>
</block>
<p>Notice the text isn't centered, because many times you don't want centered text. On landing pages it seems that <b>everything</b> is centered, so you can add <code>center-text</code> to also center the text. You can place this on anything too, not just blocks:</p>
<block class="center center-text border">
<h2>This Text is Center Too</h2>
<p>Ok, now it's totally centered.</p>
</block>
<p>You can also add <code>class="center-self"</code> on
elements that you want to center but not really the contents, and when it's not explicitly a <code>block</code> tag but you want it centered.</p>
<block class="solid">
<demo class="solid border center-self" style="--value: 9; --text: 0;">
DEMO
</demo>
</block>
<h2>Horizontal</h2>
<p>By default blocks are vertical, like a web page, because blocks being horizontal by default is stupid. You can make a block horizontal with <code>class="horizontal"</code>, and then make it vertical again with <code>class="vertical"</code>. Here's a side-by-side block using <code>horizontal</code>:</p>
<block class="border horizontal">
<left class="solid vertical">
<h3>I'm Left</h3>
<p>Everything is set to flex, 'cause
that's easier.</p>
</left>
<right class="vertical">
<h4>I'm Right</h4>
<p>That makes doing left and right oriented
content that actually contains what it holds
easier.
</p>
</right>
</block>
<h2>Spacer</h2>
<p>You can add a basic <b>vertical</b> spacing between blocks with <code>&lt;hr&gt;</code> tags. The line is hidden.</p>
<h2>Grids</h2>
<p>
You can make a grid, and it'll actually be a grid, that
contains its contents. Amazing. Your boxes can also have
solid backgrounds or dots, stripes, and lines.
</p>
<p>You set the rows, columns, and gap with style variables <code>--rows</code>, <code>--cols</code>, and <code>--gap</code> like so:
<pre><code>&lt;grid style="--rows: auto; --cols: 3; --gap: 1rem;"&gt;</code></pre>
<p>Here is that grid setting using blocks inside for each of the patterns:</p>
<grid style="--rows: auto; --cols: 3; --gap: 1rem;">
<block class="border center">
<h1>Grids</h1>
</block>
<block class="solid center border">
<h1>Solid</h1>
</block>
<block class="solid center border">
<h1>Dots</h1>
</block>
<block class="solid center border">
<h1>Lines</h1>
</block>
<block class="solid center border">
<h1>Stripes</h1>
</block>
<block class="solid center border"
style="--value: 0; --text: 9;">
<h1>Solid</h1>
</block>
<block class="solid center border"
style="--value: 0; --text: 9;">
<h1>Dots</h1>
</block>
<block class="solid center border"
style="--value: 0; --text: 9;">
<h1>Lines</h1>
</block>
<block class="solid center border"
style="--value: 0; --text: 9;">
<h1>Stripes</h1>
</block>
</grid>
<h2>Stacked Layers</h2>
<p>Frequently you need to use multiple layers as in an image with text on top. You might not need this in the layout phase, but in the first statement it does come up. The <code>stack</code> tag will position all of it's children on top of each other in order, and you can set one as the top with <code>class="top"</code>.</p>
<p>In this demo I have a block with "I'm on Bottom" that I cover with another block that uses a transparent gray background. This gives the effect of putting a "screen". Remember that these stack in the reverse order you write them, unless you tag one with <code>class="top"</code>.
</p>
<stack class="center" style="width: 300px; height: 150px;">
<block class="center">
<h2>I'm on Bottom</h2>
</block>
<block class="debug" style="--spacing: flex-end; background-color: hsla(0, 0%, 50%, 50%);">
<h1 class="no-flex">I'm on Top</h1>
</block>
</stack>
<p>I put <code>class="debug"</code> around the "I'm on Top" class so you can see where it gets placed. The "top" block has the transparent gray background. The "I'm on Bottom" text is hiding behined it, but looks like it has a gray background. View the source to see what I'm talking about.
</p>
<h2>Content</h2>
<p>If you toss <code>&lt;p&gt;</code> inside a <code>block</code> tag it'll act like any other tags, taking on the <code>block</code> settings. Remember that Blockstart is about big chunky layout blocks, so all you have to do is wrap your content in a regular old <code>&lt;div&gt;</code> and the content will display the way you expect.</p>
<h2>Getting Started</h2>
<p>Once you download the <a href="/blockstart/blockstart.css">blockstart.css</a> you need a web server. For people who use Node.js you can run the <a href="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>
mkdir myproject
cd myproject
npm init
# Answer all the questions
npm install http-server
mkdir public
npx http-server -d -c-1 public
</code>
</pre>
<p>Once you do that you can place the <a href="/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 reasonable starter template:</p>
<pre>
<code>
&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;title&gt;Blockstart Template&lt;/title&gt;
&lt;link rel="stylesheet" href="/blockstart.css"&gt;
&lt;style&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
</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 <a href="/blockstart/blockstart.css">blockstart.css</a>.
</p>
</div>
</block>
</blockstart>
</body>
</html>