Lighter code options

Feature Requests
1

Hi lovely Tumult folks
First off, thanks for your help with the JS question I’ve had. The community and tumult team have been great. I’m nearing the end of building my site with Hype used in several places. It’s been a great tool and I’m really pleased with the results.

My feature request is based around optimisation.

I’ve tried as much as possible to strip back my exports for Hype, so, separating out JS into one single minified pipeline, gzipped, etc.

I’ve shrunk my SVG files down to tiny sizes, integrated the styling into my global CSS file so there isn’t any styling in these.

And I’ve placed the hype container css into SCSS.

And one of the things I’ve tried to do is use my own fonts from this global CSS etc.

I’ve found hype sort of fought me on some of this stuff, I could only get my own Heading and Paragraph styles across to the hype containers if I add !important onto my SCSS settings and I hate all the inline CSS that is output.

So my feature request is the ability to turn some of this stuff off for exports.

I’ve resorted to html widgets for these sort of things. I know hype is setup to be these self enclosed containers, but my feature request is that I’d like the option at least, of separating out this stuff or stopping it appearing if I can.

I’d like to be able to handle the fonts and all that sort of stuff in my SCSS, not within Hype.

If this is possible now, let me know, but without the !important overrides, it appears hype is adding styling I don’t need / want.

All the best and keep up the great work!

2

The 'protect from external styles' checkbox in the Document inspector will add some protection to your Hype document you may not want.

Without the override:

.HYPE_scene div, .HYPE_scene span, .HYPE_scene applet, .HYPE_scene object, .HYPE_scene iframe, .HYPE_scene h1, .HYPE_scene h2, .HYPE_scene h3, .HYPE_scene h4, .HYPE_scene h5, .HYPE_scene h6, .HYPE_scene p, .HYPE_scene blockquote, .HYPE_scene pre, .HYPE_scene a, .HYPE_scene abbr, .HYPE_scene acronym, .HYPE_scene address, .HYPE_scene big, .HYPE_scene cite, .HYPE_scene code, .HYPE_scene del, .HYPE_scene dfn, .HYPE_scene em, .HYPE_scene img, .HYPE_scene ins, .HYPE_scene kbd, .HYPE_scene q, .HYPE_scene s, .HYPE_scene samp, .HYPE_scene small, .HYPE_scene strike, .HYPE_scene strong, .HYPE_scene sub, .HYPE_scene sup, .HYPE_scene tt, .HYPE_scene var, .HYPE_scene b, .HYPE_scene u, .HYPE_scene i, .HYPE_scene center, .HYPE_scene dl, .HYPE_scene dt, .HYPE_scene dd, .HYPE_scene ol, .HYPE_scene ul, .HYPE_scene li, .HYPE_scene fieldset, .HYPE_scene form, .HYPE_scene label, .HYPE_scene legend, .HYPE_scene table, .HYPE_scene caption, .HYPE_scene tbody, .HYPE_scene tfoot, .HYPE_scene thead, .HYPE_scene tr, .HYPE_scene th, .HYPE_scene td, .HYPE_scene article, .HYPE_scene aside, .HYPE_scene canvas, .HYPE_scene details, .HYPE_scene embed, .HYPE_scene figure, .HYPE_scene figcaption, .HYPE_scene footer, .HYPE_scene header, .HYPE_scene hgroup, .HYPE_scene menu, .HYPE_scene nav, .HYPE_scene output, .HYPE_scene ruby, .HYPE_scene section, .HYPE_scene summary, .HYPE_scene time, .HYPE_scene mark, .HYPE_scene audio, .HYPE_scene video {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-variant: inherit;
    text-decoration: inherit;
    text-align: inherit;
    text-transform: inherit;
    text-indent: inherit;
    text-shadow: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    white-space: inherit;
    word-spacing: inherit;
    vertical-align: inherit;
    border: none;
    background-color: transparent;
    background-image: none;
    padding: 0;
    box-sizing: content-box;
}

With 'Protect' off the contents in the scene will have these base level properties which can easily be overwritten by CSS in the head:

.HYPE_scene {
    color: #000;
    font-size: 16px;
    font-weight: normal;
    font-family: Helvetica,Arial,Sans-Serif;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-decoration: none;
    text-align: left;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    line-height: normal;
    letter-spacing: normal;
    white-space: normal;
    word-spacing: normal;
    vertical-align: baseline;
    border: none;
    background-color: transparent;
    background-image: none;
    -webkit-font-smoothing: antialiased;
    -moz-backface-visibility: hidden;
}

Hype will always set styles based on what you have in the Text inspector -- your workaround for !important (and using classes in the identity inspector or in your Inner HTML) is the best workaround as of now. There are definitely ways we can improve how we handle this -- especially with handling fonts outside of Hype.

2 Likes
3

Thanks Daniel, I’ll have a look at that feature and see how it changes things. Thanks for the feedback.

1 Like