The Grid in css-doodle
CSS-Doodle - The Grid
The GridIf 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 -->
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 PropertyAs 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 */
The doodle-specific @size PropertyNow 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 PropertyWe 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 PropertyIf 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 */
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.
New css-doodle SketchLet'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.
- 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.
- Select the sketch name and change it to css-doodle-course - The Grid (see screenshot).
- Click the arrow next to the file name and choose Rename. Rename the HTML file to css-doodle-Grid (see screenshot).
- Add the code above in to the css-doodle tag.
- Change the header title to Get Started with css-doodle - The Grid.
- Click File - Save to save your changes to the code.
- Click the Run button (see screenshot) to see your grid.
You will see the sketch name change to css-doodle-course copy.
Now let's rename this copy of css-doodle-startup HTML file.
Let's update the header title for this tutorial (see screenshot).
Creating Code Art with css-doodle - Tutorial Series Index
Editor's Picks Articles
Top Ten Articles
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.