I just want to use MaterializeCSS framework inside my ionic 2 app instead of native ionic components.
I read this Third-party libs IONIC
And I did :
"npm install --save materialize-css" - for installing materializeCSS in node_module folder
"npm install --save #types/materialize-css" - for typescript intellisense
And added in map.ts file:
import { Materialize } from 'materialize-css';
And this line in map.html file :
<a class="waves-effect waves-light btn">button</a>
Hoping that I will see beautiful MaterializeCSS button.
Unfortunatelly it doesnt work.
I tried also simply add css and js files in my main index.html file like this :
<link rel="stylesheet" type="text/css" href="../node_modules/materialize-css/bin/materialize.css">
<script src="../node_modules/materialize-css/bin/materialize.js"></script>
But somehow it doesnt see node_modules folder.
After hours of effort Im asking for help.
Related
I am trying to use this simple lightbox for embedding a video on my Django project. Locally with:
python3 manage.py runserver
it runs fine. However, once deployed to Heroku the app struggles to find the css and the js of lity, though it is located in the correct folder. Has anyone run into a similar problem?
The project is live here:
https://dry-depths-69493.herokuapp.com/
And the git-repo is here:
https://github.com/Datenrausch/heroku
Looking at your code in github, I see that ... master/honoradar/static/honoradar/lity/ has no subfolder named dist, but your HTML looks for that subfolder.
Try changing these lines from index.html to the correct files (I'm not sure which are the correct ones)
<script src="{% static 'honoradar/lity/dist/lity.js'%}"></script>
<link rel="stylesheet" href="static/honoradar/lity/dist/lity.css">
or add a dist subfolder with the correct files.
I'm trying to deploy my project to heroku, but I faced a problem: there is no CSS and JS in deployed site. When I open page source of deployed site, for example here is next script in page source:
<script type="text/javascript"
src="/static/static/scripts/validation.js">
When I go to src link, it shows internal error. I guess that if my scripts were saved somewhere in Inet and src would be a link to it, then it would work correct. But when deploying my site, all my scripts and CSSare in static folder. When run site locally, it's okay, when through heroku, it can't see CSS and scripts. Is there any solution for it?
Instead of relative path linking use static template tag.
{% load staticfiles %}
<script type="text/javascript" src="{% static "somepath/validation.js" %} ">
set STATIC_ROOT and run python manage.py collectstatic
Check the Heroku doc for Django and Static Assets
Official documentation for Managing static files.
We'd like to use GruntJS (http://gruntjs.com/), a package we're familiar with, to minify JS and compile LESS to CSS (among other things) when we deploy our Django app to Heroku. Has anyone figured out a smart of doing this yet?
I wasn't able to find anything after a couple of hours of looking myself.
Try using django_compressor with COMPRESS_PRECOMPILERS settings.
COMPRESS_PRECOMPILERS = (
('text/less', 'lessc {infile} {outfile}'),
)
Template:
{% compress css %}
<link type="text/less" rel="stylesheet" href="/static/css/styles.less" charset="utf-8">
<style type="text/less">
#color: #4D926F;
#header {
color: #color;
}
</style>
{% endcompress %}
The django-grunt project looks promising. I haven't tried it myself yet, though - at first glance it doesn't seem to support the nice grunt development watch-server workflow for quicker development that you get in a Yeoman webapp (at least it's not documented on their README).
For my current open source project, I created a kind-of hacky solution that I'm still iterating on, but it does work:
I keep my static files and the base template as a normal Yeoman-scaffolded Grunt project in its own GitHub repo, using buildcontrol to export the built files in a separate branch for Heroku deployment
the Django app is a normally laid out Django app, with some script magic to link up the development or production versions of the frontend code into my static folders (I can keep grunt server running to quickly iterate on the frontend code)
to deploy to Heroku, I use a minimally-modified python buildpack that fetches the production branch of the frontend repo and links it up using the aforementioned script (I tried building it using grunt on Heroku, but it took ages to fetch all the npm dependencies every time, so I found buildcontrol to be much more efficient)
Update: I'm since iterating on making everything work in a single repo in this project.
I tried to use Animate.css in one of my Django Project (if interested here's the link).
Overview:
So to deploy the code, I run python manage.py collectstatic, as always. Till I don't include the animate.css in the {% styles css/base-min.css %} tag using django-sekizai and django-compressor together with the help of GIST.
The collectstatic just works fine, as soon as I include it in the project, the same command stucks.
For time being to use the animation.css in the project, I have directly included it with the help of
<link href="{{STATIC_URL}}/css/animate.min.css"
rel="stylesheet"
type="text/css"
media="screen"
/>
But, the question remains, why is the collectstatic commands fails in general to compile the animate.css?
Dependencies to other python libraries can be declared by pip's requirements.txt.
But is it possible to declare a dependency to a pure js library?
The library is available from github. The files should be downloaded an made available for django static file handling.
Background: setting up new development environments of a custom django application should be easy.
How do you handle this in your development environment?
As pointed out by #guettli you can use fanstatic packages.
E.g. requirements.txt
django
js.jquery
js.bootstrap
js.underscore
# ...
without django-fanstatic:
Then in your settings.py you can have:
import js
STATICFILES_DIRS = (
('js', js.__path__[0]),
)
And this is what I have in my base template:
<script src="{{ STATIC_URL }}js/jquery/resources/jquery.min.js"></script>
<script src="{{ STATIC_URL }}js/underscore/resources/underscore-min.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap/resources/js/bootstrap.min.js"></script>
with django-fanstatic:
django-fanstatic
provides a middleware to change the WSGI response. Some more info in this blog post.
pip install only python packages, so if you want to install a Javascript library, you should create a package that contains only the javascript library (declared as additional files).
Not sure if this is really mighty to do this.
Fanstatic already creates a lot of javascript packages (jquery, bootstrap, ...)
You can use the packages without using fanstatic ...
http://www.fanstatic.org/en/latest/libraries.html