Error loading website: document.styleSheets[i].rules is undefined

[hilburger]

Hi there!

I get this error in Chrome console on loading the website with Kickstrap (1.1.0 Beta) included:

TypeError: document.styleSheets[i].rules is undefined
in kickstrap (line 188) for (j = 0; j < document.styleSheets[i].rules.length; j++) {

it's inside function setupKickstrap()

Any idea where the problem could be?

Best regards, Thomas

[adamjgrant]

Wow. This is unusual for a few reasons.

This is only attempted in older browsers as a fallback to read your applist from css and turn it into js.

Is this the latest version of chrome?

It's behaving as if you don't have any stylesheets. Do you have any stylesheets loaded on the page?

Adam Kochanowicz Envoyé avec Sparrow (http://www.sparrowmailapp.com/?sig)

Le dimanche, octobre 14, 2012 à 6:54 PM, hilburger a écrit :

Hi there!
I get this error in Chrome console on loading the website with Kickstrap (1.1.0 Beta) included:
TypeError: document.styleSheets[i].rules is undefined

in kickstrap (line 188) for (j = 0; j < document.styleSheets[i].rules.length; j++) {
it's inside function setupKickstrap() Any idea where the problem could be? Best regards,
Thomas

— Reply to this email directly or view it on GitHub (https://github.com/ajkochanowicz/Kickstrap/issues/52).

[hilburger]

Hm, strange. These are the css/js entries in Header and footer, they are loaded by Firefox. Don't wonder about the numbers behind the file names - it's Typo3 ;)

Header:

Footer:

[hilburger]

Does not seem to work to paste code in here XD Check it out here: http://pastebin.com/nChiWR5F

Oh sorry, it's in Firefox, latest version.

[hilburger]

Chrome (latest version) gives this output: Failed to load resource: the server responded with a status of 404 (Not Found) http://die-rheumatologen.pulponair.de/Kickstrap/apps/pinesnotify/config.ks

Failed to load resource: the server responded with a status of 404 (Not Found) http://die-rheumatologen.pulponair.de/Kickstrap/apps/bootstrap/config.ks

Are apps included by default? Haven't found the right place in the doc about that or I don't understand the principles enough. I just started with Kickstrap a couple of weeks ago.

I am compiling the kickstrap.css with codekit locally and thought that kickstrap.css/.js replace bootstrap.css/.js - or am I totally wrong and it's too late tonight? ;-)

[adamjgrant]

Usually this happens when you don't set your rootdir in kickstrap.less.

Adam Kochanowicz Envoyé avec Sparrow (http://www.sparrowmailapp.com/?sig)

Le dimanche, octobre 14, 2012 à 7:50 PM, hilburger a écrit :

Chrome (latest version) gives this output:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://die-rheumatologen.pulponair.de/Kickstrap/apps/pinesnotify/config.ks
Failed to load resource: the server responded with a status of 404 (Not Found)
http://die-rheumatologen.pulponair.de/Kickstrap/apps/bootstrap/config.ks
Are apps included by default? Haven't found the right place in the doc about that or I don't understand the principles enough. I just started with Kickstrap a couple of weeks ago.

— Reply to this email directly or view it on GitHub (https://github.com/ajkochanowicz/Kickstrap/issues/52#issuecomment-9429472).

[adamjgrant]

Can you just check if that config.ks file actually is located there?

If your site is not located at http://die-rheumatologen.pulponair.de/ but a subdirectory of that, like http://die-rheumatologen.pulponair.de (http://die-rheumatologen.pulponair.de/)/blog, you'd need to set /blog/ as your rootDir

Adam Kochanowicz Envoyé avec Sparrow (http://www.sparrowmailapp.com/?sig)

Le dimanche, octobre 14, 2012 à 7:50 PM, hilburger a écrit :

Chrome (latest version) gives this output:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://die-rheumatologen.pulponair.de/Kickstrap/apps/pinesnotify/config.ks
Failed to load resource: the server responded with a status of 404 (Not Found)
http://die-rheumatologen.pulponair.de/Kickstrap/apps/bootstrap/config.ks
Are apps included by default? Haven't found the right place in the doc about that or I don't understand the principles enough. I just started with Kickstrap a couple of weeks ago.

— Reply to this email directly or view it on GitHub (https://github.com/ajkochanowicz/Kickstrap/issues/52#issuecomment-9429472).

[adamjgrant]

I'm walking through NYC picking up my laundry so I haven't taken a close look yet, but I noticed kickstrap.js does not have an id on the script tag, which is required.

Check out the bare minimum html file http://getkickstrap.com/docs/1.2/advanced/

Adam Kochanowicz Envoyé avec Sparrow (http://www.sparrowmailapp.com/?sig)

Le dimanche, octobre 14, 2012 à 7:26 PM, hilburger a écrit :

Does not seem to work to paste code in here XD
Check it out here: http://pastebin.com/nChiWR5F

— Reply to this email directly or view it on GitHub (https://github.com/ajkochanowicz/Kickstrap/issues/52#issuecomment-9429214).

[hilburger]

Thanks for your quick reply :) I'm a bit confused due to my young approach towards Kickstrap.

I have the Kickstrap-folder lying in an own web server folder on my Mac, that's where I'm making the changes in the less-Files of my theme which is activated in the theme.less file. So far everything compiles well.

Then I upload the resulting kickstrap.css to the website's css folder. The kickstrap.js and a couple of other js-files (jquery, bootstrap-transition etc) are lying in an own folder. they are included via the index file.

My problem is how to handle this app thing. do I have to upload all the app folders with the ks-files to the web server, too? Or are they included somehow during compilation.

Sorry if I may look a bit short minded here but documentation is somehow hard to find.

You help and patience is really appreciated! :-)

[adamjgrant]

I'm a bit confused by the approach. It might be easier to see for myself but basically Kickstrap.js will do the following:

1. Look at the comma-separated appList in kickstrap.less
2. Append your rootDir (by default it's "/") to "Kickstrap/apps/" and then the name of each app
3. Look at the config.ks file located there
4. Load each of those resources listed in config.ks via AJAX.

It sounds like your installation of Kickstrap has been greatly disassembled, which is okay, but this is really an advanced technique and caution should be taken.

Where is your kickstrap website located, is it just http://die-rheumatologen.pulponair.de/ ?

To answer your question, the apps have nothing to do with the LESS files themselves. They should definitely be on your server!

[hilburger]

Hi Adam!

Yes, that's the website location. From these options http://getkickstrap.com/docs/1.2/first-steps/ I chose the third one "Just use CSS".

So I

1. downloaded the Kickstrap-Beta from http://getkickstrap.com/download/ (don't know how to use the files from the zip on GitHub g)
2. extracted it in a local folder (the Kickstrap1.1.0Beta.zip)
3. changed the themes.less to an own theme located in \Kickstrap1.1.0Beta.zip\Kickstrap\themes\myTheme
4. adopted little things there in variables.less and
5. compiled the kickstrap.less manually via CodeKit
6. uploaded the resulting kickstrap.css (and my custom.css, animate.css, jquery...js, kickstrap.js, some bootstrap-...js from the zip file) to the webserver.

Now, I usually change values in the theme itself only. Is this method right?

PS1. OK, I'll upload the .ks files to the webserver, too and adopt the rootDir as you said. PS2. I saw yesterday that meanwhile the auto-compile feature of Codekit seems to work again :-)

Thank you a lot!

[adamjgrant]

So what is the problem you're experiencing now, are you still getting a 404 for http://die-rheumatologen.pulponair.de/Kickstrap/apps/pinesnotify/config.ks?

If so, can you verify that file actually exists there? That's the first step for me to troubleshoot.

Also, make sure the <script> tag that imports kickstrap.js has the id "appList"

<script id="appList" src="Kickstrap/js/kickstrap.js"></script>

You'll need to upload not just the .ks files, but the files in the app itself as well as the folder. Since you're doing things manually here, it's important you know how app-loading works.

I've written up this resource for app developers that's worth a read to resolve your issue: http://getkickstrap.com/docs/1.2/extend/#develop-apps

[hilburger]

You are right, I got the errors because I had none off the apps on the web server. To be honest I did not work with them before (0.9.1 RC).

You're awesome, think that this was the main problem. Besides that I seem to have understood the principles bit by bit now :)

[adamjgrant]

Ah yeah, 1.x has really changed since :)

Adam Kochanowicz UX Designer Debtdomain.com

Le lundi, octobre 15, 2012 à 10:39 AM, hilburger a écrit :

You are right, I got the errors because I had none off the apps on the web server.
To be honest I did not work with them before (0.9.1 RC).
You're awesome, think that this was the main problem. Besides that I seem to have understood the principles bit by bit now :)

— Reply to this email directly or view it on GitHub (https://github.com/ajkochanowicz/Kickstrap/issues/52#issuecomment-9447192).