{Carrer web log}


Blog about web design & development

GPT-3 and CSS Frameworks

Tuesday, April 27, 2021 { 1 Comments }

Recently I gained access to the OpenAI GPT-3 API. I tried different things like content creation, code translation and other experiments. One of the amazing things of GPT-3 is the capacity to learn from simple textual examples.

Programming is one of the most complex and problem solving tasks. But I wasn’t interested in training GPT-3 to program. For me it was more interesting how GPT-3 can speed up some boring repetitive code creation.

GPT-3 works great with well structured code that has clear naming logic. I tried to train it to generate layout HTML with clear class syntax. 

I used my Smart CSS Grid Framework because it has simple naming logic. CSS Classes are named from one to twelve because it is a 12 grid system. 

The logic is the total of each row should be always 12 or something like this 3 + 3 + 4 + 2 = 12

The idea was, when I write something like this: 

 3 | 3 | 6 

To receive something like this:

<div class="three"> </div> <div class="three"> </div> <div class="six"> </div>

After a couple examples GPT-3 started to work almost perfectly even with more complex layouts.
GPT3 and CSS Frameworks

Here is the text I used to train GPT-3:

Important to keep the “temperature” to 0, we don’t want GPT-3 to be creative. 




This is a super simple example of how GPT-3 can be used to generate repetitive HTML code. Basically all CSS Frameworks follow certain rules that can be easily used for GPT-3 training.


1 Responses to “GPT-3 and CSS Frameworks”

  1. // Blogger Unknown // 4/28/2021

    This is nice but can it create custom layouts? Not to use CSS frameworks but to create it's own CSS frameworks?

    For example, in my CSS framework (Charts.CSS), I'm struggling to implement complex charts using HTML table tags using nothing but CSS (no JS). See here: https://chartscss.org/charts/

    Can GPT-3 help developers like me solve this?  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License