{Carrer web log} ←
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.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”
-
// 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?
<< Home
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 <<<
- AI Prompt Directory
- Hand Drawn Icons
- Font Design Inspiration
- Font Pairings
- Free SVG Cut File
- Upcoming NFT projects
- Discord Tutorials
- Free Sublimation Designs
- Tech Feed
- MySQL Lite Administrator
- Quark Mini PHP CMS
- Formy - CSS Form Framework
- Emastic - CSS Framework
- Malo - CSS Library
- The Golden Grid
- 1 line CSS Grid Framework
- Two Lines CSS Framework
- Child Selector System - CSS Framework
- Better Web Readability Project
- Azbuka - CSS Typographical Base Rendering Library
- ClipR - bookmarklet for better reading
- CSS3 Action Framework
- CSS Mini Reset
- HTML5 Mini Template
- CSS Mobile Reset
- picoCSS - JavaScript Framework
- HTML Lorem Ipsum Crash Test
- Object Auto Documentation - JavaScript
- o - JS Library for Object Manipulation
- Foxy - CSS Framework
- Tumblr Free Theme - Better Readability Project
- Box - CSS Framework
- SMART CSS GRID
- nanoJS - Minimal JS DOM Library
- Flexy CSS Framework
- Katana is CSS Layout System made with Flexbox
- Micro CSS Reset
- 60 Grid System
- Simple CSS Button
- ramd.js JavaScript library for making web applications.
- Minimal Notes web app build with Vue.js
- Scribble Font for Prototyping & Wireframing
- Flex One - 1 CSS Class System
- Floaty - CSS Float Based Layout System
- Infinity CSS Grid
- CLI Convert websites into readable PDFs
- keywords-extract - CLI tool, extract keywords from any web page.
- screenshoteer - Make website screenshots and mobile emulations from the command line.
- Basic.css - Classless CSS Starter File
§§Previous Posts <<<
- Don’t use CSS Reset use CSS Set
- One Page 2020 Calendar Print Version
- 3 CLI tools based on Node.js
- Scribble Font for Prototyping & Wireframing
- ramd.js - Small JavaScript library for making TODO...
- Katana.scss - CSS Layout System made with Flexbox
- Flexy CSS Framework
- nanoJS - JavaScript for DOM manipulation
- SMART CSS GRID
- 1 Line CSS Framework
Other Profiles <<<
Content is licensed under a Creative Commons Public Domain License