CSS for trinkets

[rikcross]

Hey, new projects will include embedded 'trinkets' for writing and editing HTML & CSS online.

Just like the embedded Scratch projects in the online versions, trinkets will need to be shown online, and ignored for the PDF rendering.

Here's an example trinket iframe:

<div class="trinket" style='padding-bottom: 10px;'>
    <iframe src="https://trinket.io/embed/html/ef4c882ae6" width="100%" height="500" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen>
    </iframe>
</div>

It'd be super if the PDF css would just ignore the trinket class entirely. Also, I've had to add some padding to the trinket class too -- could this be added to the CSS?

Cheers, Rik.

[martinpeck]

Can you give me an example web project to work with? Do you have any in your personal forks of the projects? I can see you have some in your gh-pages/github.io site, but can't see the lesson "source".

[rikcross]

sure, it's here

This is an example project: https://github.com/CodeClubRik/webdev-curriculum/tree/master/en-GB/Happy%20Birthday

[martinpeck]

You can hide things from the PDF version by adding the pdf-hidden class...

<div class="trinket pdf-hidden" style='padding-bottom: 10px;'>
    <iframe src="https://trinket.io/embed/html/850a678202" width="100%" height="400" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen>
    </iframe>
</div>

[martinpeck]

Ignore the above. I've checked in changes that should mean you can layout the trinket component as follows...

 <div class="trinket">
    <iframe src="https://trinket.io/embed/html/850a678202" width="100%" height="400" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen>
    </iframe>
</div>

[martinpeck]

the above (which I had to update, cos of copy pasta fail) will ensure that trinket has the padding you wanted, and is removed from the PDF version

[rikcross]

@martinpeck thanks :)