Adding JS/CSS Libraries to _header.twig / site

[sportpal]

Hi Bob,

Nice work with Bolt.

1. I tried to add additional js/css library, namely Jquery UI to _header.twig locally and also externally using Jquery CDN. Header points accurately to files when rendered, yet no Jquery UI widget (i.e accordion) is being displayed. Am I missing something? (noticed in documentation/credits page says some parts of JqueryUI had been used)

Code: Select all

<script src="{{ paths.theme }}js/jquery-ui-1.9.1.custom.min.js"></script>

Code: Select all

<link rel="stylesheet" href="{{ paths.theme }}css/jquery-ui-1.9.1.custom.min.css"/>

2. When calling external/CDN library, what is the proper way to reference an external file and does it make any difference, using only // as in case with the code below, or http://?

Code: Select all

<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>

3. I noticed you added Skeleton Boilerplate to your home page. Was it just matter of adding library to your css and referencing it in header or additional steps are required. It is located in themes folder. On the other hand when in documentation section of the site all the JS/CSS files are in /view/ folder. I assume documentation files are new contenttype or other source.

Code: Select all

<link rel="stylesheet" href="/theme/boltsite/css/skeleton.css">

- Home Page

Code: Select all

<link rel="stylesheet" href="/view/css/skeleton.css">

- Documentation pages

Thanks and cheers from Toronto
Goran

[hansfn]

2) When referencing external resources, give the full URL (with protocol). In other words:

Code: Select all

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

[Bob]

1. I tried to add additional js/css library, namely Jquery UI to _header.twig locally and also externally using Jquery CDN. Header points accurately to files when rendered, yet no Jquery UI widget (i.e accordion) is being displayed. Am I missing something? (noticed in documentation/credits page says some parts of JqueryUI had been used)

Code: Select all

<script src="{{ paths.theme }}js/jquery-ui-1.9.1.custom.min.js"></script>

Code: Select all

<link rel="stylesheet" href="{{ paths.theme }}css/jquery-ui-1.9.1.custom.min.css"/>

That should work. What does it say in the rendered HTML (i.e. 'view source' in the browser) ?

2. When calling external/CDN library, what is the proper way to reference an external file and does it make any difference, using only // as in case with the code below, or http://?

Using "//" is a neat little trick to make it work for both https and http. It basically means 'use the protocol that you're already using'.

Code: Select all

<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>

3. I noticed you added Skeleton Boilerplate to your home page. Was it just matter of adding library to your css and referencing it in header or additional steps are required. It is located in themes folder. On the other hand when in documentation section of the site all the JS/CSS files are in /view/ folder. I assume documentation files are new contenttype or other source.

Don't look to closely to the docs site. It's all kinds of hackish, and will probably be re-done properly soon. http://bolt.cm uses skeleton too, and is much better.

To answer your question: yes, if you want to use skeleton, just toss it in /theme/yourthemename/css/ and use it in the template:

Code: Select all

   <link rel="stylesheet" href="{{ paths.theme }}css/base.css">
   <link rel="stylesheet" href="{{ paths.theme }}css/skeleton.css">
   <link rel="stylesheet" href="{{ paths.theme }}css/layout.css">


see here: view-source:http://bolt.cm/

[Bob]

2) When referencing external resources, give the full URL (with protocol). In other words:

Hans, I like it without protocol, it's valid and generic. More info: http://stackoverflow.com/questions/5500 ... t-src-http

[hansfn]

Thx, Bob, learned something new there. It does make a lot of sense though.