search

ParasolJS / parasol-es

ES6 module for interactive visualization of multi-objective optimization problems
https://parasoljs.github.io/
MIT License
26 stars 5 forks source link

Consolidate stylesheets? #11

Open wraseman opened 5 years ago

wraseman commented 5 years ago

@joshhjacobson, is there a compelling reason not to consolidate the various stylesheets into a single CSS file (which I would call parasol.css) for the sake of simplicity in app development?

That way, users could replace this...

<link rel="stylesheet" type="text/css" href="./parcoords.css">
<link rel="stylesheet" type="text/css" href="style.css">

<!-- include slickgrid stylesheets -->
<link rel="stylesheet" href="./lib/slickgrid/slick.grid.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="./lib/slickgrid/jquery-ui-1.8.16.custom.css" type="text/css" />
<link rel="stylesheet" href="./lib/slickgrid/plugins/slick.columnpicker.css" type="text/css"/>

With this!

<link rel="stylesheet" type="text/css" href="parasol.css">

Let me know, so I can implement this if you don't see an issue with it.

joshhjacobson commented 5 years ago

For app development (use with html) this is a feasible. I agree that it would be a good idea to provide users with a single stylesheet that handles default formatting for the page, parcoords, and slickgrid. Yes, lets call it parasol.css. That said, more advanced users could still provide their own stylesheets in place of this default.

Your point also led me to another question. In the same way that we use

import './parallel-coordinates.css';

at the top of index.js, might we also want to do something like

import './slick-grid.css';

there as well? This would mainly serve the npm library aspect of parasol and not the html use since any stylesheets addressing slickgrid in the html would take precedence over this.

The thing I want to keep in mind is that the user should always have the freedom to customize slickgrid and I don't know if doing this would inhibit that freedom.

wraseman commented 5 years ago

Perhaps we can discuss this in person? You're more familiar with npm libraries than I am, so a bit of clarification would help on my end.

I'll go ahead and make a combined styling sheet and do a pull request.

joshhjacobson commented 5 years ago

Sounds great! Yeah, l'll email you about a time for next week.

wraseman commented 5 years ago

Implemented this in recent commit

joshhjacobson commented 5 years ago

I'm going to keep this open until I have a chance to test out the effects of including style sheets in the library directly. Also, I think the "proper" way to build the parasol.css file is to include default styling for all dependencies (i.e. parcoords and slickgrid) but leave the page styling out. Of course, we can still include a style.css file in the demos directory that can be used for general page formatting.

This way, the general setup would be 

<link rel="stylesheet" type="text/css" href="parasol.css">
<link rel="stylesheet" type="text/css" href="style.css">
wraseman commented 5 years ago

Got it! I'll update the examples and tutorial accordingly.