The Grid in css-doodle

The Grid in css-doodle
In this tutorial, we will continue to work on our first css-doodle pattern project. We have set up our startup file using the p5.js online editor in the last tutorial. Now, we will learn how to set up the grid for our css-doodle pattern using some CSS code and some doodle-specific code. Use the link below to view the completed code for this tutorial.

CSS-Doodle - The Grid

The Grid

If repeat patterns are a part of your design process, you know that a pattern is created by repeating a seamless tile across the canvas. Your design elements will be inside this repeat tile. That's exactly how css-doodle makes patterns. It all starts with a grid of empty squares, called cells, that we will use as our canvas. As the creative coder, you will control the number and size of the grid cells and also the design elements inside the cells. css-doodle does this using the CSS Grid Layout Module, which is a way to control how design elements are displayed on a webpage by using columns and rows.

Let's go to your p5.js editor account and open the project sketch from the last tutorial. As you can see, we already have both the css-doodle tag and selector added to the code, along with a title and copyright notice within the HTML code.

<!-- css doodle tag and selector -->
    :doodle {

Click on the red Play button (see screenshot) at the top of the code window to see what will happen in the Preview window. You will see just the title and copyright text. Why? Because we haven't put any code inside the css-doodle tag and selector. To make the grid visible on the canvas, we need to do four things.

  • Set the background color for the grid cells using the CSS background property

  • Set the width and height of the grid using the @size property

  • Set the number of rows and columns in our grid using the @grid property

  • Set the size of the gap or empty area between grid cells using the CSS grid-gap property

CSS Background Property

As for the background color of our grid canvas, we can use the CSS background property to set this. As the background of the web browser is white by default, the background color for our grid cells needs to be any color except white. We will set the background color to black using the HTML color code #000000.

/* CSS background property */
background: color;

The doodle-specific @size Property

Now we can set the overall size of the grid using the @size property. Notice the @ before the property name, which tells us that this is a special property created for css-doodle. We will set the size of the canvas grid to 200 pixels high and wide. As you can see from the example below, the @size property takes a value for both the width and the height and we can use various units of measurements for the web such as pixels (@size: 200px 200px;). However, when the width and height are the same, we can shorten the syntax to just one value (@size: 200px;).

/* @size property */
@size: width height;

The doodle-specific @grid Property

We will also want to set the number of grid rows and columns. We will use another doodle-specific property called the @grid property. The number of rows will be the first value listed and the number of columns is listed next. Let's set up our grid to have 5 rows and 10 columns.

/* @grid property */
@grid: rows x columns;

The CSS grid-gap Property

If you click the Run button, you will see a black square drawn on the canvas but you can't see the individual cells in the grid. To see the cells, we need to put an empty space, or gap, between each cell using the grid-gap CSS property. We will set the gap to 1 pixel.

/* CSS grid-gap property */
grid-gap: number;

Well, that's all the code needed to display the grid on the webpage. Here is all the code together in the css-doodle tag.

    :doodle {
    @size: 200px;
    @grid: 5x10;
    grid-gap: 1px;
    background: #000000;

New css-doodle Sketch

Let's make a new sketch for this project in the p5.js editor. Login to your account and go to My Sketches. Click the css-doodle-course sketch, to open the sketch in to the editor. Let's duplicate this sketch for our lastest css-doodle.

  1. With the css-doodle-course sketch open, click File - Duplicate (see screenshot) from the menu to make a duplicate of the css-doodle-course sketch.

  2. You will see the sketch name change to css-doodle-course copy.

  3. Select the sketch name and change it to css-doodle-course - The Grid (see screenshot).

  4. Now let's rename this copy of css-doodle-startup HTML file.

  5. Click the arrow next to the file name and choose Rename. Rename the HTML file to css-doodle-Grid (see screenshot).

  6. Add the code above in to the css-doodle tag.

  7. Let's update the header title for this tutorial (see screenshot).

  8. Change the header title to Get Started with css-doodle - The Grid.

  9. Click File - Save to save your changes to the code.

  10. Click the Run button (see screenshot) to see your grid.

Try changing the values for each property in the css-doodle code and click the Run button to see the results. Unless coded otherwise, a square will be drawn in each cell of the grid by default. So you have just created a simple repeat pattern of black squares. In the next tutorial, we will experiment with some other design elements.

CSS Reference

Creating Code Art with css-doodle - Tutorial Series Index

css-doodle Copyright (c) Yuan Chuan. Licensed under the MIT License. css-doodle Documentation.
Screenshots used by permission. Processing (Java), p5.js (JavaScript) and (Python) are software projects created by the Processing Foundation.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2019 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.