CSS / FlexBox editor

Hi

New to Website Coding, and trying to learn fast.

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 ?

best regards :grinning: :christmas_tree:

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.

border: 1px solid red; 

or use background-color.

Hi, Owel

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.

regards, :grinning: :christmas_tree:

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.

1 Like

Looks good but features list is all CSS, WP, etc.
also need JavaScript, jQuery, (with syntax/error checking).

I believe the Firefox dev tools has recently added some sort of visual CSS grid editor.