Poetry of Code
With any language, the origins start with functionality and then, as it evolves and progresses, artistry. I really don’t see any difference with coding languages.
If we?treat simple website coding languages like HTML and CSS as bonafide languages, we see that they are still in their infancy. HTML, the most basic building block for any website, has celebrated it’s 21st birthday this year. CSS is still a minor at 17 years old this year. Their use has predominately been that of function, but that will soon be changing.
I see a future where soon the artists and poets of code will soon be creating their code equivalents of the great epics, prose and operas of these new languages. The time might not be now, but soon… very soon it will be approaching.
To this extent, after a bout of insomnia, I played around with an idea that I’ve had for close to a decade about websites. I created a webpage purely coded with HTML and CSS in the style of Mondrian and the early 20th century De Stijl art movement.
The Specifics
I wanted to create a work of HTML/CSS art that would slightly change depending on the size of the browser. I started by creating a 10×10 column grid in HTML, giving each piece of the grid a viewport height and width of 10 in the CSS. Each piece of the grid were then positioned in the browser also using viewport height and widths but this time applied to top and left margins.
I made sure to add systematic classes to each div. In this way, if I want to make any changes to the design of my De Stijl art, It is simply a matter of adding or subtracting classes to the divs. The CSS doesn’t need to be touched. (I just realised that this is kind of quirky of changing the style of a website, not in the stylesheet, but rather the HTML)
Now that I had the grid set up, it became time for artsy fun.
The horizontal and vertical black lines are simple borders, and the coloured areas are background colours. After the original setup, I can now play around and create as many of these works of art in about 30 minutes or so.
If I want to escape the 10×10 grid, I can always divide one of them in half and go smaller.
Next Steps
This is by no means perfect. I’m sure, with a bit more though, I could have streamlined the code, but I wanted something fully responsive that adapts to any screen size.
I would like to make a script for De Stijl art soon. Ideally this script would be something that can randomly generate a De Stijl inspired piece of digital art.
Have a look and tell me what you think.
