I have dowloaded and installed the Drupal Bootstrap module, using the LESS starterkit. I turned off the CDN option and downloaded Bootstrap 3.3.7 files and placed them in mytheme/bootstrap. I added a file called custom.less (for my own styles) and added `@import 'custom';` to style.less (at he bottom of the file). I also copied a few variables to variables-overrrides.less, and altered the values to my preference.

Here's my problem: when I refresh a page I see the default styles for a few hundred milliseconds, and then my desired styles appear - as I intended. The old styles appearing (very briefly) before being altered to the new (desired) styles doesn't look good. It's visually jarring.

So, it seems like a large css file (style.css, presumably) is loaded: certain styles get applied at the beginning of the stylesheet, which are altered at the end of the stylesheet - causing this jarring switch of styles on very page load.

For example, I have copied a bunch of styles, downloaded from from prsimjs, into my custom.less files. These appear towards the bottom of style.css. When the page loads, I see just default <code> styes for a few hundred milliseconds, then my prsimjs styles get applied and my code samples are nicely styled.

A similar issue occured when I added:

body {
  font weight: 300;
}

to custom.less (because there is no "base-text-font-weight variable).

Is this jarring effect normal? or am I using this module-theme incorrectly? How can I solve this issue? Thanks.

Comments

24ma13wg created an issue. See original summary.

jbd44’s picture

jbd44 commented
Title: Altered styles only appear after a few hundred milliseconds » New/altered styles only appear after a few hundred milliseconds
jbd44’s picture

jbd44 commented
Issue summary: View changes
jbd44’s picture

jbd44 commented
Issue summary: View changes
markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Active » Closed (won't fix)

Is this jarring effect normal?

No, it's not.

Frankly, I cannot tell you what the cause of this would be. This would require actually investigating the code/site to determine how things are being loaded (that is not an invitation to ask me to debug your site for you, please don't email me).

It could be any number of things, from network latency to improper or double importing/loading of CSS stylesheets.

You'll honestly have to troubleshoot it yourself.

---

Closing per: https://drupal-bootstrap.org/api/bootstrap/docs%21Contributing.md/group/...
Reason: Custom CSS/Layout (site specific)

jbd44’s picture

jbd44 commented

For anyone who comes across this post, with the same issue, here is how I went some way to resolving the issue. The issue was not my CSS, but my JavaScript.

There is actually a name for the issue I'm experiencing. It's called FOUT (Flash of Unstyled Text).

To reduce FOUT you need to prioritise the loading of JavaScript for the critical parts of your user interface: those parts that are needed first, like the text on the page.

The text on my pages is dependent on a syntax highlighter (Prisim.js) and on external fonts (TypeScript). I need this JavaScript to be loaded first and fast.

1. By default, Drupal puts JavaScript in the page footer. Load critical scripts in the head, by using header: true in your yourtheme.libraries.yml:

prism:
  css:
    theme:
      css/prism.css: {}
  header: true
  js:
    js/prism.js: {}

...or place all your critical scripts into html.html.twig - and don't include them in your libraries definition (see point 3).

2. Only use the Bootstrap JavaScript that you actually need on your site:

bootstrap:
  css:
    theme:
      css/style.css: {}
  js:
    # bootstrap/js/affix.js: {}
    # bootstrap/js/alert.js: {}
    # bootstrap/js/button.js: {}
    # bootstrap/js/carousel.js: {}
    # bootstrap/js/collapse.js: {}
    # bootstrap/js/dropdown.js: {}
    # bootstrap/js/modal.js: {}
    # bootstrap/js/tooltip.js: {}
    # bootstrap/js/popover.js: {}
    # bootstrap/js/scrollspy.js: {}
    bootstrap/js/tab.js: {}
    bootstrap/js/transition.js: {}

3. Place the TypeScript embed code directly into html.html.twig:

<head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <script src="https://use.typekit.net/xxxxxxx.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
</head>

Ultimately, I did this with my Prism.js script too.

There is also an advanced script for loading TypeScript fonts, but I found this made no noticeable difference on my pages.

In addition, when compiling my CSS using the Less compiler, I started using the -x flag to minify the output. I didn't notice any difference after doing this either.

I'd say, this reduced the FOUT time by about 75%.

If you know what you are doing you can also use Chrome Dev tools to investigate your page loading, but it's difficult to interpret the data, if you're not familiar with using this tool.

I experimented a lot with JavaScript and CSS aggregation, in the permanence configuration. I tried different combinations, but I didn't notice much difference.