Frustrated after trying different editors and not being able to view the grid layout in Preview Panel.
Latest editions of Atom and CoffeeCup are prime examples.
This is just a hobby for me.
Living on State Pension and Disability Benefits, I cannot afford subscriptions or paid-for applications.
Does anyone know of a FREE ide/editor that fits my requirements ?
TIP: If youโre trying to visualize how big/large/extents of a div box/grid/etc is, just add a temporary code in your CSS file (or in the Inspector of your browser) to draw an outline.
Nice tip and will make use of it.
However, it will be still be hard to see the effects of borders/margins, grid-gaps, flows, placement, etc.
.
Nothing Iโve seen so far compares to Developer.
Only itโs Editor does not seem as refined in coding as other IDEs.
.
I need something that has kept up with FlexBox developments.
There are editors that allow you to quickly visualize the DIVs and make changes on the fly and see the results. โฆ kinda like a hybrid of source editing and WYSIWYG.
Pinegrow web editor is one example. (But itโs not free.)
Here, on this screenshot I pulled up a website that uses CSS grids and you can see it allows me to see the heirarchy and the area/space/paddings/margins occupied by the different divs/elements.