itsjavi / css-grid-playground Goto Github PK

• add a button to add/edit/remove a new container. Similar to the grid items.
• add a select to select active container for CSS editing
• add a way to style the wrapper container as well

User value: being able to prototype grids of grids, like year calendars or:

like in the original project

• add grid selector (first item = all)
• add grid item selector (first item = all)
• when editing the CSS:
  • if selected = all: we edit the base styles
  • if selected = numeric = we edit the individual styles

• add a selector for popular grid layouts
• changing the selection will change the current styles and items
• add a footer in the page to references/links to these examples, also to the web.dev page for the grids
• based on:
  • https://web.dev/patterns/layout
  • https://web.dev/articles/one-line-layouts
  • supereffective.gg pokemon boxes grid

user value: Don't have to start from scratch every time, providing a good base

save the state in localStorage and in the URL as base64

This will obviously have size limitations when using query strings, so it's better to save the state in the location hash

Edit: don't use localStorage. The URL is the state. Otherwise we have to handle complex scenarios (like loading from the URL having precedence over localStorage if they differ).

User value: being able to save state as a bookmark or share prototypes with other devs and iterate a design