https://github.com/itsjavi/css-grid-playground

Interactive CSS Grid Layout tool: Edit, view real-time changes, and share prototypes. Includes some helpful presets to get started.
https://github.com/itsjavi/css-grid-playground

css-flex-grid css-flexbox css-flexbox-grid css-flexbox-layout css-grid css-grid-layout playground

Last synced: 3 months ago
JSON representation

Interactive CSS Grid Layout tool: Edit, view real-time changes, and share prototypes. Includes some helpful presets to get started.

• Host: GitHub
• URL: https://github.com/itsjavi/css-grid-playground
• Owner: itsjavi
• License: mit
• Created: 2024-01-08T20:18:04.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-11T20:23:23.000Z (over 2 years ago)
• Last Synced: 2024-12-31T23:12:45.452Z (over 1 year ago)
• Topics: css-flex-grid, css-flexbox, css-flexbox-grid, css-flexbox-layout, css-grid, css-grid-layout, playground
• Language: TypeScript
• Homepage: https://itsjavi.com/css-grid-playground/
• Size: 1.81 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
# CSS Grid Playground [![Build Status](https://github.com/itsjavi/css-grid-playground/actions/workflows/quality.yml/badge.svg)](https://github.com/itsjavi/css-grid-playground/actions/workflows/quality.yml)

**CSS Grid Playground** lets you visually play with the [CSS Grid Layout](https://www.w3.org/TR/css3-grid-layout/)

elements in the browser to quickly sketch up a layout for your site.

The layout, which provides a basic way of editing a container and its direct children, renders changes instantly as you

update the corresponding CSS giving you instant feedback.

![Demo](public/twitter-card.png)

## Tech Stack

- Bun as a JS runtime, bundler and package manager

- [Vite + React.js + SWC](https://github.com/vitejs/vite-plugin-react-swc)

- CSS Grid Layouts

- SCSS Modules

- OpenProps for CSS variables

- Zustand for state management

- localStorage to persist state

- URL hash to share state

- Github Actions as CI/CD

- Github Pages for deployments

SVG Icons are from lucide.dev

## Getting Started

First, you will need [Bun](https://bun.sh/) 1.0.20 or higher installed on your machine. Then, you can run the following

commands after cloning this repository, to get started:

```bash

bun install

bun run dev

```

## Background

This project is more than a fork, but actually a total rewrite inspired in "CSS Grid Playground", the original work from

[@purplecones](https://github.com/purplecones/css-grid-playground).

This version aims to provide better maintainability with a more modern codebase, and also a richer user experience while

keeping its simplicity.