CSS request from nowhere?

Kirby 2 Solved ✅
1

Hi all - I am new to Kirby and am having a go at creating my first custom template simply by altering the default free template that comes with the install package.

My issue is I keep getting 404’s for css files that aren’t being requested in the html. Very weird!
Fore example, I’ve reduced the code in the default.php file to:

<!DOCTYPE html>
<head>
    <title>Template / Home</title>
    <link rel="stylesheet" href="assets/css/master.css">
</head>

<body>
 test
</body>

</html>

Yet I get 404’s as shown - where are they being requested?!

adm1b7.png1600×138

Thanks!

2

Your master stylesheet tells the browser to request a bazillion CSS files:

/* FONTS*/
@import 'https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i';
@import '../fonts/font-awesome-4.6.3/css/font-awesome.min.css';
@import '../fonts/stroke/style.css';
@import '../fonts/elegant/style.css';
@import '../fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css';
@import '../fonts/flaticon/flaticon.css';

/* PLUGIN CSS */
@import '../libs/bootstrap/bootstrap.css';                /* bootstrap */
@import '../plugins/bootstrap-select/css/bootstrap-select.css';   /* select customization */
@import '../plugins/headers/header.css';                /* header */
@import '../plugins/headers/yamm.css';                /* header */
@import '../plugins/slider-pro/slider-pro.css';         /* main slider */
@import '../plugins/owl-carousel/owl.theme.css';                 /* other sliders */
@import '../plugins/magnific-popup/magnific-popup.css';            /* modal */
@import '../plugins/animate/animate.css';                        /* animations */
@import '../plugins/revealer/css/revealer.css';                        /* animations */
@import '../plugins/parallax/parallax.css';                        /* parallax */
@import '../plugins/flowplayer/skin/playful.css';          /* video-player */

/* MAIN CSS */
@import 'theme.css';
@import 'color.css';
@import 'responsive.css';

Note that this is also a performance bad practice: the browser will have to fetch the HTML to learn it has to fetch this stylesheet, then it fetches the stylesheet and only then knows it needs all the other ones, so it starts requests (but the request queue might be already full with requests for images and scripts, so it might not be able to prioritize it and browsers tend to download between 6 and 10 files at a time, tops).

The recommended solutions are:

  1. Bundle all the stylesheets in one biggish stylesheet (concatenate, minify). This can be handled by your PHP tools (I don’t think Kirby does it, but there might be plugins for that) or by a separate build tool (with a desktop UI like Prepros, or something Node.js-based like Gulp, Grunt, etc.).
  2. If some resources can’t be bundled or it doesn’t make sense to bundle them with the rest, make sure you call them with <link rel="stylesheet"> rather than @import, so the browser as the information earlier and can prioritize requests.
3

Thanks! All sorted - pretty stupid of me!