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.
+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 blockstart.css.
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 blockstart.css.
Not sure where the boxes are? Add class="debug" to the block (or 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?.
+I am inside a block, see it now?
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 class="no-flex":
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 class="no-flex":
I am inside a solid block.
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 style="--value: 3":
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 style="--value: 3":
I am inside a solid dark block.
@@ -241,7 +241,7 @@You can add a basic spacing between blocks with <hr> tags. The line is hidden.
You can add a basic vertical spacing between blocks with <hr> tags. The line is hidden.
You set the rows, columns, and gap with style variables --rows, --columns, and --gap like so:
-
<grid style="--rows: auto; --cols: 1fr 1fr 1fr; --gap: 1rem;"><grid style="--rows: auto; --cols: 1fr 1fr 1fr; --gap: 1rem;">Here is that grid setting using blocks inside for each of the patterns: