Quickly get your initial layout idea done with minimal CSS and HTML.
The blockstart.css file gives you a simple set of basic layout primitives to get started. It allows you to follow a simple process:
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:
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.
The blockstart.css file helps with the Layout and First statement 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 not keeping the markup and CSS from
<block> 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:
I am inside a block.
Not sure where the boxes are? Add
class="debug" to the
grid) and it will put a red border around the outer box, then a blue border around the children:
I am inside a block, see it now?
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
No Flex Line 1
No Flex Line 2
In that example, the "No Flex" lines are spaced normally because the code has
class="no-flex" on that block.
You can make a block solid with
I am inside a solid block.
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
I am inside a solid dark block.
We can't read that text so we need something called a "Value."
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 blockstart.css has 10 (0-9) to help with contrast. You can usually change the background with
--value: 0 and the text with
--text: 9 in most places.
We can fix that last block's contrast with value 9 text using
I am inside a solid dark block too.
If we use
style="--value: 0; --text: 9;" we can get a high contast dark block:
I am inside a solid black block.
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.
You always need some kind of rectangle shape to represent where a photo might go, and the
shape tag handles that:
You set the shape's size with
style="--w: 300px; --h: 300px;".
class="pad" to give a simple 1rem padding to a block. Use the variable
style="--pad: 1rem" to change its padding.
Things need borders and you can add a border with
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
class="center" and it will be centered:
You say it's centered, it's centered.
Notice the text isn't centered, because many times you don't want centered text. On landing pages it seems that everything is centered, so you can add
center-text to also center the text. You can place this on anything too, not just blocks:
Ok, now it's totally centered.
You can also add
elements that you want to center but not really the contents, and when it's not explicitly a
block tag but you want it centered.
Sometimes you need a little indicator for a block to make it different for later changes. You can use three patterns of
You can change the line/dot/stripe color with
--pat-val, and combine it with the block background setting
--value. For example, these are all white patterns on black blocks:
By default blocks are vertical, like a web page, because blocks being horizontal by default is stupid. You can make a block horizontal with
class="horizontal", and then make it vertical again with
class="vertical". Here's a side-by-side block using
Everything is set to flex, 'cause that's easier.
That makes doing left and right oriented content that actually contains what it holds easier.
You can add a basic vertical spacing between blocks with
<hr> tags. The line is hidden.
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.
You set the rows, columns, and gap with style variables
--gap like so:
<grid style="--rows: auto; --cols: 1fr 1fr 1fr; --gap: 1rem;">
Here is that grid setting using blocks inside for each of the patterns:
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
stack tag will position all of it's children on top of each other in order, and you can set one as the top with
In this demo I have a block with "I'm on Bottom" that I cover with another block that uses a stripes pattern. This gives the effect of putting the text behind bars. Remember that these stack in the reverse order you write them, unless you tag one with
class="debug" around the "I'm on Top" class so you can see where it gets placed. The "top" block has the lines and you can read the text clearly. The "I'm on Bottom" text is hiding behined these lines.
Many times you want one section to take up the whole page width, but then content under that to be padded. You can just manually set the width most of the time, or use the
content tag. Add on the
class="pad" to give it padding, or
class="sized" to set its width or height.
Once you download the blockstart.css you need a web server. For people who use Node.js you can run the http-server package to get a simple one. Here's the commands that I use to get a project started:
mkdir myproject cd myproject npm init # Answer all the questions npm install http-server mkdir public npx http-server -d -c-1 public
Once you do that you can place the blockstart.css in the
public/ directory and start putting your
.html files in the same place. Here's a reasonable starter template:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Blockstart Template</title> <link rel="stylesheet" href="/blockstart.css"> <style> </style> </head> <body> </body> </html>
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 blockstart.css.