Adding JS/CSS Libraries to _header.twig / site

A forum for Bolt related questions / issues

Adding JS/CSS Libraries to _header.twig / site

Postby sportpal » Tue Oct 30, 2012 4:56 am

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
sportpal
 
Posts: 2
Joined: Tue Oct 30, 2012 4:08 am

Re: Adding JS/CSS Libraries to _header.twig / site

Postby hansfn » Tue Oct 30, 2012 8:06 am

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>
hansfn
Developer
 
Posts: 3282
Joined: Sun Nov 25, 2007 7:48 pm
Location: Molde, Norway

Re: Adding JS/CSS Libraries to _header.twig / site

Postby Bob » Tue Oct 30, 2012 8:13 pm

sportpal wrote: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
Lead Developer
 
Posts: 1374
Joined: Tue Nov 20, 2007 11:16 pm

Re: Adding JS/CSS Libraries to _header.twig / site

Postby Bob » Tue Oct 30, 2012 8:16 pm

hansfn wrote: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
Bob
Lead Developer
 
Posts: 1374
Joined: Tue Nov 20, 2007 11:16 pm

Re: Adding JS/CSS Libraries to _header.twig / site

Postby hansfn » Tue Oct 30, 2012 11:37 pm

Thx, Bob, learned something new there. It does make a lot of sense though.
hansfn
Developer
 
Posts: 3282
Joined: Sun Nov 25, 2007 7:48 pm
Location: Molde, Norway


Return to Bolt Discussion

Who is online

Users browsing this forum: No registered users and 1 guest

cron