Exporting CSS, JS and IMG separated files


(Flavio) #1

Is there any way to export CSS, inline JS with 3.6.2 pro version and export scripts?


(Jonathan Deutsch) #2

There’s an option in the File > Advanced Export… panel in v3.5+ that is “Inline data file+loader” which will inline the *_hype_generated_script.js file into the exported HTML. This option is exposed to Export Scripts as the "exportShouldInlineDocumentLoader" key; check out line 185 of the DoubleClick Studio.hype-export.py to see how it is used.

There’s not presently an option to inline the HYPE-XXX.thin.min.js/HYPE-XXX.full.min.js and HYPE-XXX.waypoints.min.js files since they are dynamically loaded based on need. However, you could include these in the head yourself safely if you have the contents of the full runtime and the waypoints script. This could be automated in an Export Script.

As for CSS, Hype dynamically sets this on elements in the runtime, so there’s no CSS needed to be inlined.

Does that help?


(Flavio) #3

Hi Jonathan,

thanks for your quick response. It definitely helps. Now, let’s say that I do some CSS styling on a object as well as certain animation. Can we export the associated CSS style?

Regards,
Flavio


#4

What (and why would you?) do you need to “export” the CSS?


(Jonathan Deutsch) #5

If you mean converting how Hype styles elements to CSS code, there’s no method to do this. Hype applies styles directly to the DOM and often uses several methods/techniques that aren’t even all represented in CSS or browser dependent.

If you need to get specific values out (say to communicate to an engineer) I simply recommend looking in the inspector. You can also copy the element in Hype and paste into a text editor; this will give a DOM representation but is very specific to WebKit and won’t be great for general purpose use. Likewise with an export you can inspect the element using a browser’s developer tools, but the CSS values may not be applicable to all browsers.

On the other workflow side, if you have some CSS you’ve made on your own that you want to apply to Hype elements, you can really put that wherever you want… for example you could have a link to a .css file instead of embedding in the head’s style tag and that might help you be more portable.