HTML5 UP not working correctly in Django/Mezzanine project

Question

I am trying to use HTML5 UP! with a Django/Mezzanine project and I am having problems getting skeljs to correctly load the style css files.

This is how I am loading files in my base.html file:

<script src="{% static "js/jquery.min.js" %}"></script>
<script src="{% static "js/skel.min.js" %}"></script>
<script src="{% static "js/init.js" %}"></script>
<noscript>
    <link rel="stylesheet" href="{% static "css/skel-noscript.css" %}" />
    <link rel="stylesheet" href="{% static "css/style.css" %}" />
    <link rel="stylesheet" href="{% static "css/style-wide.css" %}" />
</noscript>

this are my skeljs settings:

    var _settings = {
        skelJS: {
            prefix: 'style',
            resetCSS: true,
            boxModel: 'border',
            containers: 1200,
            useOrientation: true,
            breakpoints: {
                'widest': { range: '*', containers: 1360, grid: { gutters: 50 }, hasStyleSheet: false },
                'wide': { range: '-1680', containers: 1200, grid: { gutters: 40 } },
                'normal': { range: '-1280', containers: 960, grid: { gutters: 30 }, lockViewport: true },
                'narrow': { range: '-1000', containers: '100%', grid: { gutters: 25, collapse: true }, lockViewport: true },
                'mobile': { range: '-640', containers: '100%', grid: { gutters: 10, collapse: true }, lockViewport: true }
            }
        }

};

This is the output that I get from the server:

[24/Apr/2014 17:08:46] "GET / HTTP/1.1" 200 23532
[24/Apr/2014 17:08:46] "GET /static/js/skel.min.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/js/jquery.min.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/js/init.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/css/mezzanine.css HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/css/bootstrap-theme.css HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/js/bootstrap-extras.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/css/bootstrap.css HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/grappelli/tinymce/jscripts/tiny_mce/tiny_mce.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/js/bootstrap.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/mezzanine/js/tinymce_setup.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/mezzanine/js/jquery.tools.overlay.js HTTP/1.1" 304 0 
[24/Apr/2014 17:08:46] "GET /static/mezzanine/js/jquery.form.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/mezzanine/js/editable.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:47] "GET /static/mezzanine/css/editable.css HTTP/1.1" 304 0
[24/Apr/2014 17:08:47] "GET /static/mezzanine/js/jquery.tools.toolbox.expose.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:47] "GET /theme/static/css/style.css HTTP/1.1" 301 0
[24/Apr/2014 17:08:47] "GET /theme/static/css/style-wide.css HTTP/1.1" 301 0
[24/Apr/2014 17:08:47] "GET /theme/static/css/style-wide.css/ HTTP/1.1" 404 1629
[24/Apr/2014 17:08:47] "GET /theme/static/css/style.css/ HTTP/1.1" 404 1619

This is the folder structure for the relevant files.

├── manage.py
├── requirements.txt
├── settings.py
├── settings.pyc
├── static
│   └── media
├── theme
│   ├── admin.py
│   ├── admin.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── models.py
│   ├── models.pyc
│   ├── static
│   │   ├── css
│   │   │   ├── skel-noscript.css
│   │   │   ├── style.css
│   │   │   ├── style-mobile.css
│   │   │   ├── style-narrow.css
│   │   │   ├── style-normal.css
│   │   │   └── style-wide.css

score 0 · Answer 1 · answered May 07 '14 at 01:53

Maybe you should config your static folder in setting.py like this:

STATICFILES_DIRS = (
    "C:/myfile/project/python/mocs/static",
)

and config your static url like this:

STATIC_URL = '/static/'

and then you can put the static files into your codes, make sure the url on pages should be a correct relative path from your static folder

score 0 · Answer 2 · answered May 07 '14 at 20:18

Find the solution! The prefix was not set correctly.

var _settings = {
    skelJS: {
        prefix: 'static/css/style',
        resetCSS: true,
        boxModel: 'border',
        containers: 1200,
        useOrientation: true,
        breakpoints: {
            'widest': { range: '*', containers: 1360, grid: { gutters: 50 }, hasStyleSheet: false },
            'wide': { range: '-1680', containers: 1200, grid: { gutters: 40 } },
            'normal': { range: '-1280', containers: 960, grid: { gutters: 30 }, lockViewport: true },
            'narrow': { range: '-1000', containers: '100%', grid: { gutters: 25, collapse: true }, lockViewport: true },
            'mobile': { range: '-640', containers: '100%', grid: { gutters: 10, collapse: true }, lockViewport: true }
        }
    }

};

HTML5 UP not working correctly in Django/Mezzanine project

2 Answers2