StacksGPT?

Stacks
#1
5 Likes
Use of Artificial Intelligence in Web Design
#2

Very Nice! is the prompt accessible from the stack?

1 Like
#3

Really, Stacks GPT would write a flexbox grid? (No, while I’m tempted, I’m not going to say it!) This is how Chat GPT answers that question — even it has heard of CSS Grid, and it’s not supposed to have done any learning for four years! (And, note, no need for any media queries.)

Here’s an example of CSS that creates a responsive 4 column grid:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.grid-item {
  background-color: #f2f2f2;
  padding: 20px;
}

Explanation:

  • The .grid class sets the display property to grid, which allows us to create a grid layout. The grid-template-columns property uses the repeat function to create four columns that will automatically adjust to fit the available space. The minmax function sets a minimum width of 250 pixels and a maximum width of 1 fraction unit (1fr). This means that the columns will be at least 250 pixels wide, but will expand to fill any remaining space equally. The auto-fit keyword allows the columns to wrap to a new row when the available space is too small to fit them all in one row. Finally, the gap property sets the spacing between grid items to 20 pixels.
  • The .grid-item class sets the background color to light gray (#f2f2f2) and adds padding to create some space around the content inside each grid item.

To use this grid in your HTML, you would create a container element with the .grid class, and then add child elements with the .grid-item class:

<div class="grid">
  <div class="grid-item">Column 1</div>
  <div class="grid-item">Column 2</div>
  <div class="grid-item">Column 3</div>
  <div class="grid-item">Column 4</div>
</div>

This will create a responsive grid with four columns that adjust to fit the available space, with a 20 pixel gap between each item.

#4

Yes, It is a preview only solution that can be used without ever leaving RapidWeaver.

2 Likes
#5
5 Likes
#7

This looks very interesting, Mike. Is your new stack already working with current version of Stacks, or will it work with the upcoming StacksPro app?

#8

Already works with Stacks 5 Plugin and will DEFINITELY run in Stacks Pro when it is released.

4 Likes
#9

Pretty amazing. How many folks have bought this stack?

#10

This is pretty interesting stuff, but I’m a bit confused. How is this different from just opening up a Safari tab and using ChatGPT for free? Can you explain what makes it worth the $40 price tag?

#11

Yes, I was wondering that too.

#12

@PeterSmall

StacksGPT eliminates the need to open multiple windows or switch between different applications, streamlining the development process and saving users time and effort.

I understand not everyone will want ( or need ) this, but some will.

I hope this answers your question.

#13

Thanks @yabdab.

I just created an offsite page using this tip and it’s working great. MacGPT - a free app worth checking out! - #3 by habitualshaker

image-1
image-11267×768 115 KB

I’m into the idea of AI and curious to see the potential in Stacks. However, this isn’t for me. Still, I wish you luck with it and it’ll definitely be an interesting one to watch.