Grid Wiz

CSS Grid frameworks with custom browser support in a snap

1 follower

CSS Grid frameworks with custom browser support in a snap

1 follower

Grid Wiz takes your company’s grid design and generates CSS Grid code! With specific browser compatibility, you can support the right browsers with minimal code. Subgrids allow for your users to write deep HTML without breaking out of your grid’s design. The tool is both a progressive web app and an open-source package to be used either way.

Launch tags:Web App•Design Tools•Open Source

Launch Team

Render Sandboxes: a computer for every agentIsolated compute, persistent state and a real filesystem

Promoted

Grid Wiz

Maker

Hi there! I am excited to share with you Grid Wiz today! Grid frameworks are essential for experiences that span many codebases to keep the layouts aligned. The grid keeps columns at specific dimensions as the user goes to different pages within the experience. After making CSS Gridish at IBM, I noticed some fundamental problems about that tool: Flexibility, relative sizing, and the technologies used. So I set out to improve on all of those points with a personal project that makes the best decisions for the user. Here are some quick benefits of Grid Wiz: 1. With CSS, there are always new ways of making grid frameworks with less code for performance. Grid Wiz lets you choose which CSS features you want to use. This means you can choose older browser support or a more lean user experience. I believe this is a first for grid generators! 2. HTML isn’t written one layer deep. A great grid framework should allow you to embed divs within divs, but still remember how many columns are available. Without “subgrids”, users of your grid framework are prone to accidentally break out of your design spec. Not only does Grid Wiz give you the ability of subgrids early, it is also future-proof to add the upcoming native browser support of CSS Grid’s subgrid. 3. With the web app, you can edit your company’s grid design without every writing your own code. It gives you back all of the CSS needed to use your grid anywhere! If you want to distribute your grid code across a team, the code package is made to work both in a Node environment or straight in the browser. Let me know if you have anymore questions or comments! Check out the GitHub repo to star and leave issues too.

Report

8yr ago

Club Glacier 🍦

@seejamescode Great work James! I could definitely replace some of my own code with this, especially when considering point 2 and sub-grids not breaking out the design 👌

Report

8yr ago

Perfect for people have OCD like me!

Report

8yr ago

cool

Report

8yr ago

Reviews

Grid Wiz

Maker

Report

8yr ago

Club Glacier 🍦

@seejamescode Great work James! I could definitely replace some of my own code with this, especially when considering point 2 and sub-grids not breaking out the design 👌

Report

8yr ago

Perfect for people have OCD like me!

Report

8yr ago

cool

Report

8yr ago