CSS Build Process

[javag97]

My name is Javier and I am a UI/UX Design Intern with Jupyter Cal Poly. @isabela-pf and I were wondering how CSS is structured in JupyterLab. We've been working with variables.css in jupyterlab/packages/theme-light-extension/style/variables.css. Our goal is to find ways to make it easier for designers to work with developers.

We see that there are lots of imported style sheets that are both within JupyterLab and outside (ex: Phosphor). We want to understand how these imports interact so that we can design more accurately with this knowledge. For example, instead of giving developers hard-coded hexadecimal values, we've been giving the appropriate color variables. This helps both designers design more accurately and developers implement UI quickly within the preexisting CSS framework.

On a higher level, we're looking at trying to hand developers components rather than static images. To do this, we want to understand how JupyterLab currently puts all of these pieces together. If any developers have experience working with JupyterLab CSS, can you explain how it was organized?

[blink1073]

Hi @javag97! The following documentation probably belongs in https://github.com/jupyterlab/jupyterlab/blob/master/docs/source/developer/css.rst.

JupyterLab itself pulls in CSS in the following order:

• application-extension
• the rest of the non-theme extensions in alphabetical order.

The extensions import the CSS of their dependent packages in order of dependency level and then import their local CSS (in base.css).

We import Phosphor's base CSS before importing any of our own CSS to make it easier to override styles without adding CSS specificity.

The theme is loaded at run-time and brings in its CSS variable values and its icons/fonts.

An example of loading CSS from a third party application is our filebrowser example. It loads the application CSS, then the CSS of its dependencies in order, the light theme CSS, and finally its local overrides.