[IPython-dev] nbconvert: trouble with the new style sheet

Jason Grout jason-sage at creativetrax.com
Fri Jul 5 02:58:43 EDT 2013


On 7/4/13 10:22 PM, Brian Granger wrote:
> The nesting will prevent ipython's styles from affecting your own.
> But it would still be possible for your own styles to affect ipython
> managed elements.  css has a notion of priority.  If you define
> styling for a cell class that has higher priority than our nested
> rules, it will win out.  The only way to avoid that is to use truly
> different names for css classes.

We have a fair amount of experience with these sorts of problems with 
the Sage cell server (which is designed to be embedded into other 
pages).  It's more than class names.  Things like default spacing, 
margins, padding, as well as styling on various form elements and things 
can mess up the sage cell.  We provide a sagecell_embed.css [1] file 
that basically has all of our css rules declared !important to try to 
minimize issues, but we still see problems from time to time.

I'm really looking forward to the web component stuff and shadow doms 
taking off in the near future:

https://github.com/sagemath/sagecell/issues/405

They will allow us to have a web component that isn't affected by CSS 
cascading into the component.

We also specifically don't use bootstrap because it doesn't embed well 
into random webpages.  Instead, Ira Hanson wrote a small responsive 
layout system when we needed it.  I realize you guys have a different 
use case with the IPython notebook; just pointing out that embedding 
into random webpages has a lot of different requirements than designing 
your own web app, as I'm sure you could guess.

-Jason

[1] http://sagecell.sagemath.org/static/sagecell_embed.css -- this is 
generated from our normal 
http://sagecell.sagemath.org/static/sagecell.css by appending !important 
to each rule.  Since we scope things inside the .sagecell class (or 
prepend class names with sagecell_), and wrap everything in a .sagecell 
div, we aren't messing with things outside of the sage cell.



More information about the IPython-dev mailing list