<div dir="ltr">One problem is probably the 'reset' styles. While it makes sense for the webapp to have just one `style.min.css`, we should probably generate at least one or two more css files, so that others can use just the IPython style without inheriting reset and (maybe) bootstrap.</div>
<div class="gmail_extra"><br><br><div class="gmail_quote">On Thu, Jul 4, 2013 at 2:23 PM, Jacob Vanderplas <span dir="ltr"><<a href="mailto:jakevdp@cs.washington.edu" target="_blank">jakevdp@cs.washington.edu</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr"><div class="gmail_extra"><div class="im">On Thu, Jul 4, 2013 at 1:42 PM, Min RK <span dir="ltr"><<a href="mailto:benjaminrk@gmail.com" target="_blank">benjaminrk@gmail.com</a>></span> wrote:<br>
</div><div class="gmail_quote"><div class="im">
<blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">We are going to have to explore a few options, it's not obvious what's the best choice for various contexts. It will help to have the various sticky points affecting Jake as data points.<br>
</blockquote><div class="gmail_quote"><br></div></div>I like the idea of wrapping everything so it's self-contained. My "sticky points" are basically all due to this: either places where the blog theme overrides the notebook and makes it look ugly, or places where the notebook css overrides the blog theme and makes it look ugly. Most of my hacks to the CSS have involved getting the template to the point of being essentially what you're describing here. Because it's not designed that way from the ground up, however, some of the styles aren't carrying down to multiply nested elements.</div>
<div class="gmail_quote"><br></div><div class="gmail_quote">I think the best solution would have the following:</div><div class="gmail_quote"><br></div><div class="gmail_quote">- use non-generic CSS class names (e.g. "ipynb-cell" rather than "cell", and "ipynb-highlight" rather than "highlight"),</div>
<div class="gmail_quote">or nest any such generic names within an "ipynb" namespace.</div><div class="gmail_quote">- make no global CSS modifications (e.g. global-level header formatting, page formatting, body formatting)</div>
<div class="gmail_quote">- design the CSS so that notebook sections in a div, such as <div class="ipynb"></div>, so that multiple notebook snippets can easily be included in a page which otherwise has arbitrary html/css styling.</div>
<div class="gmail_quote"><br></div><div class="gmail_quote">I don't have a great deal of experience with CSS, but from my understanding, this sort of approach should be possible.<br><div> Jake</div><div><div class="h5">
<div class="gmail_extra">
<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">
<span><font color="#888888"><br>
-MinRK<br>
</font></span><div><div><br>
On Jul 4, 2013, at 13:37, Brian Granger <<a href="mailto:ellisonbg@gmail.com" target="_blank">ellisonbg@gmail.com</a>> wrote:<br>
<br>
> One other usage case - if someone wants to integrate ipython assets<br>
> into their web page at a finer grained scale - imagine someone wanting<br>
> to put a single cell at various locations on their non-ipython using<br>
> page. In that case, each IPython containing div would have to have<br>
> the .ipython class? I don't think that is a problem, but I just want<br>
> to make sure we are covering the different usage cases...<br>
><br>
> Cheers,<br>
><br>
> Brian<br>
><br>
> On Thu, Jul 4, 2013 at 12:38 PM, MinRK <<a href="mailto:benjaminrk@gmail.com" target="_blank">benjaminrk@gmail.com</a>> wrote:<br>
>> There are two ways of applying style to descendants - immediate (with `>`)<br>
>> and any level (with space, or as you posted).<br>
>><br>
>> So if we just put all of our style in a `.ipython {...}` block, then our<br>
>> classes in a single `.ipython` div, our style would not apply outside that<br>
>> context.<br>
>><br>
>> Illustration: <a href="http://nbviewer.ipython.org/5929801" target="_blank">http://nbviewer.ipython.org/5929801</a><br>
>><br>
>><br>
>><br>
>><br>
>> On Thu, Jul 4, 2013 at 12:25 PM, Brian Granger <<a href="mailto:ellisonbg@gmail.com" target="_blank">ellisonbg@gmail.com</a>> wrote:<br>
>>><br>
>>> Does the less syntax for nesting:<br>
>>><br>
>>> .ipython {<br>
>>><br>
>>> .cell {}<br>
>>><br>
>>> }<br>
>>><br>
>>> map to only the immediate children or all descendents? If it only<br>
>>> works for immediate children, our css stylesheets would have to become<br>
>>> horribly nested.<br>
>>><br>
>>> Cheers,<br>
>>><br>
>>> Brian<br>
>>><br>
>>> On Thu, Jul 4, 2013 at 12:11 PM, MinRK <<a href="mailto:benjaminrk@gmail.com" target="_blank">benjaminrk@gmail.com</a>> wrote:<br>
>>>> Matthias is right - we don't actually have to prefix every name, we can<br>
>>>> just<br>
>>>> scope our CSS based on the outer ipython container.<br>
>>>><br>
>>>><br>
>>>> On Thu, Jul 4, 2013 at 12:04 PM, Matthias Bussonnier<br>
>>>> <<a href="mailto:bussonniermatthias@gmail.com" target="_blank">bussonniermatthias@gmail.com</a>> wrote:<br>
>>>>><br>
>>>>> Short from my phone:<br>
>>>>><br>
>>>>> Could we add an .ipython class to body,<br>
>>>>> And wrap the all less import in a .ipython{}<br>
>>>>><br>
>>>>> CSS will then only apply to elements that are included in a div.ipython<br>
>>>>> ?<br>
>>>>><br>
>>>>> Le jeudi 4 juillet 2013, Brian Granger a écrit :<br>
>>>>><br>
>>>>>> There are a couple of factors going on:<br>
>>>>>><br>
>>>>>> * We are now minimizing the stylesheet which obscures everything.<br>
>>>>>> * We are transitioning to using bootstrap. You may have direct<br>
>>>>>> conflicts with bootstrap classes as well as ours<br>
>>>>>> * Our css classes are horribly named - generic names like "cell" or<br>
>>>>>> "selected". To address this we are planning on renaming our css<br>
>>>>>> classes using the following convention:<br>
>>>>>><br>
>>>>>> ipy-cell-selected<br>
>>>>>> ipy-notebook-foo<br>
>>>>>><br>
>>>>>> We probably won't have time to do all of our classes before 1.0, but<br>
>>>>>> we can prioritize the ones you are having problems with. Can you open<br>
>>>>>> an issue for this and provide us with a list of the ones you are<br>
>>>>>> running into?<br>
>>>>>><br>
>>>>>> Cheers,<br>
>>>>>><br>
>>>>>> Brian<br>
>>>>>><br>
>>>>>><br>
>>>>>> On Thu, Jul 4, 2013 at 9:10 AM, Jacob Vanderplas<br>
>>>>>> <<a href="mailto:jakevdp@cs.washington.edu" target="_blank">jakevdp@cs.washington.edu</a>> wrote:<br>
>>>>>>> Hi,<br>
>>>>>>> I've been working on adapting the recently-merged nbconvert refactor<br>
>>>>>>> to<br>
>>>>>>> work<br>
>>>>>>> with my Pelican blogging plugin, and am having a really difficult<br>
>>>>>>> time.<br>
>>>>>>> In<br>
>>>>>>> particular, the header content produced by the new nbconvert (via<br>
>>>>>>> CSSHTMLHeaderTransformer) contains a lot of extra stuff compared to<br>
>>>>>>> the<br>
>>>>>>> old<br>
>>>>>>> version. This is conflicting with the default blog theme, and<br>
>>>>>>> leading<br>
>>>>>>> to<br>
>>>>>>> some results which are not very pretty.<br>
>>>>>>><br>
>>>>>>> In the old iteration of the notebook plugin, I used about half a<br>
>>>>>>> dozen<br>
>>>>>>> regular expression replace statements to modify the stylesheet &<br>
>>>>>>> content and<br>
>>>>>>> make it play well with the blog style. My hope was that the new<br>
>>>>>>> nbconvert<br>
>>>>>>> would be flexible enough to obviate the need for this sort of<br>
>>>>>>> text-mangling;<br>
>>>>>>> in reality the required text-mangling in the new version is much<br>
>>>>>>> more<br>
>>>>>>> extensive. I've been working at it for several hours, and still<br>
>>>>>>> don't<br>
>>>>>>> have<br>
>>>>>>> a suitable solution that leads to nicely-formatted notebooks within<br>
>>>>>>> blog<br>
>>>>>>> posts.<br>
>>>>>>><br>
>>>>>>> For those of you familiar with the new nbconvert: what is the reason<br>
>>>>>>> for the<br>
>>>>>>> changes in the default CSS styles between nbconvert 1 and 2? Is<br>
>>>>>>> there<br>
>>>>>>> a<br>
>>>>>>> good way to recover the old style sheet within the new codebase?<br>
>>>>>>><br>
>>>>>>> Thanks,<br>
>>>>>>> Jake<br>
>>>>>>><br>
>>>>>>> _______________________________________________<br>
>>>>>>> IPython-dev mailing list<br>
>>>>>>> <a href="mailto:IPython-dev@scipy.org" target="_blank">IPython-dev@scipy.org</a><br>
>>>>>>> <a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a><br>
>>>>>><br>
>>>>>><br>
>>>>>><br>
>>>>>> --<br>
>>>>>> Brian E. Granger<br>
>>>>>> Cal Poly State University, San Luis Obispo<br>
>>>>>> <a href="mailto:bgranger@calpoly.edu" target="_blank">bgranger@calpoly.edu</a> and <a href="mailto:ellisonbg@gmail.com" target="_blank">ellisonbg@gmail.com</a><br>
>>>>>> _______________________________________________<br>
>>>>>> IPython-dev mailing list<br>
>>>>>> <a href="mailto:IPython-dev@scipy.org" target="_blank">IPython-dev@scipy.org</a><br>
>>>>>> <a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a><br>
>>>>><br>
>>>>><br>
>>>>> _______________________________________________<br>
>>>>> IPython-dev mailing list<br>
>>>>> <a href="mailto:IPython-dev@scipy.org" target="_blank">IPython-dev@scipy.org</a><br>
>>>>> <a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a><br>
>>>><br>
>>>><br>
>>>> _______________________________________________<br>
>>>> IPython-dev mailing list<br>
>>>> <a href="mailto:IPython-dev@scipy.org" target="_blank">IPython-dev@scipy.org</a><br>
>>>> <a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a><br>
>>><br>
>>><br>
>>><br>
>>> --<br>
>>> Brian E. Granger<br>
>>> Cal Poly State University, San Luis Obispo<br>
>>> <a href="mailto:bgranger@calpoly.edu" target="_blank">bgranger@calpoly.edu</a> and <a href="mailto:ellisonbg@gmail.com" target="_blank">ellisonbg@gmail.com</a><br>
>>> _______________________________________________<br>
>>> IPython-dev mailing list<br>
>>> <a href="mailto:IPython-dev@scipy.org" target="_blank">IPython-dev@scipy.org</a><br>
>>> <a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a><br>
>><br>
>><br>
>><br>
>> _______________________________________________<br>
>> IPython-dev mailing list<br>
>> <a href="mailto:IPython-dev@scipy.org" target="_blank">IPython-dev@scipy.org</a><br>
>> <a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a><br>
><br>
><br>
><br>
> --<br>
> Brian E. Granger<br>
> Cal Poly State University, San Luis Obispo<br>
> <a href="mailto:bgranger@calpoly.edu" target="_blank">bgranger@calpoly.edu</a> and <a href="mailto:ellisonbg@gmail.com" target="_blank">ellisonbg@gmail.com</a><br>
> _______________________________________________<br>
> IPython-dev mailing list<br>
> <a href="mailto:IPython-dev@scipy.org" target="_blank">IPython-dev@scipy.org</a><br>
> <a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a><br>
_______________________________________________<br>
IPython-dev mailing list<br>
<a href="mailto:IPython-dev@scipy.org" target="_blank">IPython-dev@scipy.org</a><br>
<a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a><br>
</div></div></blockquote></div></div></div><br></div></div>
<br>_______________________________________________<br>
IPython-dev mailing list<br>
<a href="mailto:IPython-dev@scipy.org">IPython-dev@scipy.org</a><br>
<a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a><br>
<br></blockquote></div><br></div>