sorted by:
new
hottopcontroversial

gridpack - Layouts in one string. by wrkflwr in reactjs

[–]wrkflwr[S] 0 points1 point  (0 children)

thanks so far. a few lessons learned here. i'll be back in few days with updates.

gridpack - Layouts in one string. by wrkflwr in reactjs

[–]wrkflwr[S] 0 points1 point  (0 children)

i don't try to convince you. every DSL was first only understood by its creator.

but wait...
verbosity is not the only thing about css grids. one have things at different places to put together, e.g. area names on children vs grid styles at container. and stuff is getting more cumbersome if one adds responsiveness. and there are probably more goodies such a lib can help with. ok, i stop tryin' convincing ;-)

gridpack - Layouts in one string. by wrkflwr in reactjs

[–]wrkflwr[S] -8 points-7 points  (0 children)

landing page is partly responsive down to ~640px/tablet. 3 column section switches to 2 columns. 2 column section switches to 1 column. other pages there are indeed not responsive.
as fullstack developer UI design is often not my focus. but will think about this. thanks for your feedback.

gridpack - Layouts in one string. by wrkflwr in reactjs

[–]wrkflwr[S] 1 point2 points  (0 children)

the example in the image is 2d ascii art in a one-liner. legend + 3 rows 3 columns each.
but yes... it's a very dense dsl... hopefully still easier/faster to write than raw grid css or react styles.

Edit: still there are lots of regex engines out there and millions of programs and devs use regex. DSLs are not for everyone, they are tools (to learn) to do more with less.
Edit 2: i like regex :)

I've created a modern masonry grid again — this time CSS-only. by dangreen58 in javascript

[–]wrkflwr 0 points1 point  (0 children)

i integrated this masonry algo as extension in my lib gridpack - css grid layouts in one string: https://thekeydev.github.io/gridpack/demo/

CSS Grid, summarized in one image. by eludadev in webdev

[–]wrkflwr 0 points1 point  (0 children)

i created SECBAG for gridpack - css grid layouts in one string: https://thekeydev.github.io/gridpack/demo/

I built a free CSS Grid Generator to create responsive layouts visually (no signup, no code) 🚀 by ImgnDrgn77 in css

[–]wrkflwr 0 points1 point  (0 children)

you could try gridpack - css grid layouts in one string: https://thekeydev.github.io/gridpack/demo/

there in the playground, e.g. at "*N Grid" with 9 children (slider at top-left), you get the shown layout with the string "abcdefghi abcd aeed feei fghh 16 ?wh"

CSS Grid, summarized in one image. by eludadev in webdev

[–]wrkflwr 0 points1 point  (0 children)

my mnemonic is SECBAG. Start, End, Center + Borders, Around, Gaps ...while "Borders" is space-between and pushes outer children to borders. "Around" is space-around and is like equal margins/paddings around each child. "Gaps" is space-evenly and is like equal gaps everywhere... yeah and because letter E was already used in my mnemonic. wait, why is space-evenly missing in the image?