Could not load Kickstrap.There are several common reasons for this error.
Download the latest version of Kickstrap and move all the files to the location of your site. Bootstrap is already included. You shouldn't need anything else.
Note: By default, Kickstrap uses less.js client-side, requiring you to run Kickstrap from an actual server address, not "file://" or "C:/...".
The default index.html file is an example page with a similar, but shorter guide than this. To begin making your own site, I recommend using blank.html instead. This contains the Kickstrap HTML header and footer, with everything linked up.
If you're running Kickstrap in a subdirectory (e.g. "http://domain.com/blog/"), be sure to set your @rootDir
variable in kickstrap.less to that subdirectory beginning and ending with a slash (in this case, "/blog/").
Select a theme by opening your theme.less file. This should be at the same level as your Kickstrap folder.
// BEGIN THEME // ----------- @import "Kickstrap/themes/spacelab/variables.less"; @import "Kickstrap/themes/spacelab/bootswatch.less";
Now just make sure the @import
lines are pointing to your theme. In the above example, you could change both instances of "spacelab" to "amelia" to use the included amelia theme instead.
// BEGIN THEME // ----------- @import "Kickstrap/themes/amelia/variables.less"; @import "Kickstrap/themes/amelia/bootswatch.less";
If you wish to expand on this theme, simply start writing CSS or LESS below those @import
s. If you want to skip the theme, using Bootstrap's default instead, just get rid of the @import
lines.
Kickstrap comes with a few pre-bundled apps. You can find this in the Kickstrap/apps directory.
Apps, as well as many other settings, are set in kickstrap.less at the same level as your Kickstrap folder.
Adding and removing apps is as simple as adding or removing them from the comma-separated list.
// APPS // ------- @apps: "pinesnotify, bootstrap/tooltip, prettify, //knockout, //updater"; // Name should match the app's folder name in Kickstrap/apps/.
However, you can also disable apps by typing two backslashes (//) in front of it. This is useful when you want to temporarily toggle off an app only to turn it back on later.
You may also notice single backslashes (/) can be used to refer to "subapps". For example, you can add the entire Bootstrap JS library with bootstrap
or a single component of bootstrap such as bootstrap-tooltip with bootstrap/tooltip
.
Learn to love your browser's console. Kickstrap uses this like a chat window to tell you what's going on.
To troubleshoot how your apps and other parts of your site are running, open your console using the shortcuts to your right.
If an app is not loading, you can troubleshoot its status via the arrays created there. Chrome, Safari, and Firefox with Firebug display these arrays best. For further troubleshooting, trying running the dependencies from the apps directly via good old html <script>
and <link>
tags.
For more information on troubleshooting, see debugging in the Extend section
OS | Browser | Command |
---|---|---|
Mac | Chrome | Command + Opt + J |
Firefox | Command + Shift + L (Firebug) Command + Opt + K (Default) |
|
Safari | Command + Opt + C | |
Windows | Chrome | Ctrl + Shift + J |
Firefox | Ctrl + Shift + L (Firebug) Ctrl + Shift + K (Default) |
|
Internet Explorer | F12 then Ctrl + 3 | |
Safari | Ctrl + Opt + C |
Due to limitations with LESS CSS, variables can only be set once. This means the @apps variable unfortunately cannot be appended with additional values, it is either used as-is page to page or not. Hopefully dynamic variables will be supported in the future.
By default, Kickstrap will load all the apps from settings.less on every page of your application. However, you may want to use different apps on different pages.
This requires removing @apps from settings.less and loading an individual apps.less file instead. Say you have an app you want to run only on your home page but you also have some apps you want across your application. Here is what your settings.less file looks like now:
settings.less
// APPS // ------- @apps: "qunit, bootstrap, homepage"; ...
This will work fine, but it will load the "homepage" app on every single page. To correct this let's make a new apps.less file just for the homepage. We'll call it apps-home.less.
apps-home.less
// APPS // ------- @apps: "qunit, bootstrap, homepage"; ...
For all other pages, we'll use apps.less with the homepage app removed.
apps.less
// APPS // ------- @apps: "qunit, bootstrap"; ...
kickstrap.less is designed to be a customization hub for your Kickstrap site.
Here are some key parts of this file you may want to edit.
@import
line to turn off Kickstrap console. Note, this only turns off console output from Kickstrap, and not the console itself.@import
is commented-out by default so you can see your LESS changes as they are made. When uncommented, client-side less.js will save your stylesheet output in the user's browser, making page load times very fast. Be advised, however, that it can be tricky to refresh the user's cache if needed. To refresh the cache manually, simply type clearCache()
in your console.Kickstrap tucks away some useful root files from the HTML5 Boilerplate project you may want to include in the root of your site. The reason why these are stashed this way is to maintain a clean file structure for new users and to remove the burden of deleting each and every one of these files if not needed.
To use the root goodies files, copy all contents from Kickstrap/extras/root goodies into your root.
These files include:
Using LESS.js client-side is great for rapidly building your site and seeing your changes. Unfortunately, however, it has a detrimental effect on page load time. Fortunately, there are some excellent free tools for compiling your LESS to css.
This very site has its LESS files compiled to a 67kb css file via LESS.app for Mac OS X
Important: Do not directly compile theme.less or any other .less file that is not kickstrap.less. Some compilers which "watch" for changes will try to compile theme.less as you edit and save it. This will cause it to lose the important variables and dependencies set in kickstrap.less.
Mac: I recommend LESS.app for Mac OS X. From the same developer is the paid and excellent CodeKit. p>
Windows: I recommend WinLess.
.Not recommended: SimpLESS, Crunch have not worked well throughout the development of Kickstrap.
If you see that big red rectangle on your page instead of one of Bootswatch's wonderful themes, there are a few common reasons why this might happen:
To activate color schemer, already included in your Kickstrap/apps directory, just add it to the comma-separated @apps
list.
The following commands should be run from the console while Color Schemer is open.
You can also increase the saturation or luminosity of the selected color via the generated GUI on-screen. Just look for the four circles surrounding that color square.