search

DeepBlueCLtd / json-schema-editor

JSON Editor focussed on developing/editing JSON Schema documents
https://deepbluecltd.github.io/json-schema-editor/
GNU General Public License v3.0
9 stars 2 forks source link

CSS Styling to increase density #3

Open IanMayo opened 5 years ago

IanMayo commented 5 years ago

The standard JSON-Editor makes use of whitespace and lines to organise data.

It should be possible to amend this layout to increase element density, and so reduce the space taken up by the schema editor on the page.

pmk65 commented 5 years ago

If you want to have "full" control over the styling layout, use the "Barebones" Theme. That one has no CSS and doesn't rely on any CSS frameworks.

IanMayo commented 5 years ago

Hmm @pmk65 , the Barebones theme introduces even more whitespace.

image

I would have guessed that starting with BootStrap 4 and spotting areas of excessive whitespace would be a quicker route to a nice compact layout.

pmk65 commented 5 years ago

The "Barebones" Theme is completely unstyled, so what you see is just raw HTML output. Other Themes apply additional wrapping and classes etc.. required for the theme to work with the selected framework. You can also create a custom Theme based on the "Bootstrap4" theme, a then load/use that.

IanMayo commented 5 years ago

Great advice, thanks @pmk65

IanMayo commented 5 years ago

@Franciman - you've indicated that you're not experienced in HTML/CSS fiddling. Once the current phase is complete I'll pass this task to a front-end dev.