I have set up a page and have implemented bootstrap using the CDN code that is recommended to access the online bootstrap server:
for the CSS:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
Javascript:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
However eventually my site will have to go live and I'm not certain that this code will suffice when that happens and I feel I should download the actual bootstrap code.
Furthermore if I download the bootstrap code properly and put it in a hypothetical media folder called "css2" such that it won't interfere with my own custom css files, where do I then put crispy_forms.
As of now I am holding them in the downloaded crispy forms files within "media"- on the same level as "myproject" but the "{ load crispy_forms}" tag doesn't look in the media folder because the "CRISPY_TEMPLATE_PACK = 'bootstrap3'" does not specify a path to look for the crispy forms content... the crispy forms website tells to look up the django documentation for how to organise my media folder but searching the website under "cripy forms" returns nothing.....
Finally, I have added crispy forms to my installed apps:
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myproject.myapp'
'crispy_forms', ###Registered
)
However when i migrate and run the server I get an error:
ImportError: No module named myappcrispy_forms
so I rearranged the order of the modules and then got this error:
ImportError: No module named crispy_forms
Should i download bootstrap properly or do the CDNs suffice?
Where do I store the bootstrap code and how will it affect my own CSS code?
How do register the module crispy_forms? and where do I store the crispy forms folder there is little documentation on this?
Thanks
Using CDN has it's pros and cons: it allows you to cache bootstrap files, so that your site pages should be downloaded faster from the second time. On the other hand, you do not usually need to use all the bootstrap css functionality, but only a tiny bit of it. In that case local and "self-cleaned" bootstrap files are prefered. Project collectors like Gulp can really help you with the "cleaning" of bootstrap css.
I usually store bootstrap files in /static/css/bootstrap.min.css
and /static/js/bootstrap.js - in the same folder with other css and js files. In order to give your own css more priority just link it in html file after bootstrap files.
Well, personally I think crispy_forms have quite clear documentation. To start using it you should only: install it, add app to Installed apps in settings.py and point to the css framework you want to use by setting a template pack variable. From docs you can see that crispy no longer upload it's own bootstrap files. It will use yours instead.
Related
for example I have a public folder that stores all the css files, and a view folder that stores the ejs files. So when I link the css file in the ejs file, I do
<link rel=”stylesheet” href=”styles.css”>
or
<link rel=”stylesheet” href=”/styles.css”>
I don't understand how it gets the css file without me redirecting it, whereas in react I need to do e.g.
import "../public/styles.css"
which makes sense to me as I am starting from the current directory.
link- is a common JS syntax, and is added to the head of the HTML, optional for older browsers that doesnt recognize import.
import- es6 syntax
there is no much of difference between them, only in mechanism
I have a page design (HTML template, CSS, and some jquery on ti) which is pretty legacy and the current task is to make it work with Vue as a first step (we have a plan to override it fully later). Also, it uses Jquery MDB (I know there is a VUE MDB but we plan the move from MDB and it makes no sense to buy the license), so what I want to achieve is to include jquery and MDB to index.html (not like npm dependencies as I just have a local MDB file) and also to have a access to jquery from inside the VUE.
So currently in index.html, I'm including dependencies like this:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="<%= BASE_URL %>vendors/bootstrap.min.css">
<link rel="stylesheet" href="<%= BASE_URL %>vendors/mdb/mdb.min.css">
<script src="/vendors/jquery-3.4.1.min.js"> </script>
<script src="/vendors/mdb/mdb.min.js"></script>
but when I'm trying to use jquery in VUE for example like this $('.datepicker').pickadate({... I'm getting the error ‘$’ is not defined
What should I do to make external jquery work in/with VUE?
UPDATED
What I did, now I have iin the index.html like this:
<script src="/vendors/jquery-3.4.1.min.js"> </script>
<script src="/vendors/mdb/mdb.min.js"></script>
and as an addition, I also install npm jquery package and including it to the file which needs it like this: import $ from 'jquery' . Now I'm getting different error, B(...)(...).pickadate is not a function and I'm not user what is this B(...)(...) as in code I have $('.datepicker').pickadate({...
Probably it's some conflict as now I have 2 jquery in the page...
I'm using Select2 in a sails project (https://select2.org/getting-started/installation). For that I added the following lines in my layout.ejs
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
But when I run the application with the command sails lift the two lines are automatically deleted from the layout.ejs.
I know it's not the editor (I'm using vscode) because I test that looking for the problem. Do you know what I can do to solve that?
Sails uses Grunt to generate files and automatically add resources into layout.
Scripts are inserted between <!--SCRIPTS--> and <!--SCRIPTS END-->
Styles are inserted between <!--STYLES--> and <!--STYLES END-->
So if you add resources manually between these tags, they will be deleted by Grunt.
See https://sailsjs.com/documentation/anatomy/tasks/config/sails-linker.js for more informations
I want to install the Angular Material library in a project, but I am behind a corporate firewall and even configuring the proxy doesn't work, it seems the proxy blocks certain types of files. Is there a way to install this offline?
FYI this is my BundleConfig
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/font-awesome.min.css",
"~/Scripts/angular-loading/loading-bar.css",
"~/Scripts/nya-bs-select/nya-bs-select.min.css",
"~/Content/angular-ui-switch.css",
"~/Content/site.css"));
bundles.Add(new ScriptBundle("~/bundles/angular")
.Include("~/Scripts/angular.js",
"~/Scripts/angular-route.js",
"~/Scripts/angular-ui/ui-bootstrap-tpls.js",
"~/Scripts/AngularApp/app.js")
.IncludeDirectory("~/app", "*.js", true)
.Include("~/Scripts/smart-table/smart-table.js",
"~/Scripts/angular-loading/loading-bar.js",
"~/Scripts/nya-bs-select/nya-bs-select.min.js",
"~/Scripts/moment.js"));
You can either use the CDN link in your reference, as explained in the docs, or download the source from CDN.
excerpt from the docs:
<head>
<!-- Angular Material CSS using GitCDN to load directly from `bower-material/master` -->
<link rel="stylesheet" href="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.css">
</head>
<body>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
<!-- Angular Material Javascript using GitCDN to load directly from `bower-material/master` -->
<script src="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.js"></script>
</body>
Or grab the Source
download from here, save of your pc and include in your project ?
It's really confusing; I don't know why they can't put a freakin' Zip archive on GitHub like everyone else that contains all the dependencies. (They include a Zip file, but without the distribution minified files.)
By looking at the source code of the Angular Material site, it seems you can use the following links to get the latest files:
https://material.angularjs.org/latest/angular-material.min.js
https://material.angularjs.org/latest/angular-material.min.css
I'm going to use .less in my css.
Based on my understanding there different kind of way to use .less.
you can pre-compile it then use the css generated by .less
another one is using this scripts below:
This
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less.js" type="text/javascript"></script>
or
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>
as for my understanding it doesn't need the css file because it will generate one for itself once it runs.
I've already installed Web Essentials and it is easy to follow number 1 because it generates the file already when you save it or build it. However, I'm planning to use number 2.
I've read: "Web Essentials uses the node-less compiler and it always uses the latest version" so I don't think I need to install anything.
When I run it i got this error:
FileError: _http://localhost:xxxxxx/Content/style.less wasn't found (404)
Actually, the VS intellisense can't even find the .less file when I put it in href="" so I code it anyway.
I've already look into these no one setup in Visual Studio Web Essentials.
http://verekia.com/less-css/dont-read-less-css-tutorial-highly-addictive
http://www.sitepoint.com/a-comprehensive-introduction-to-less/
http://webdesign.tutsplus.com/articles/get-into-less-the-programmable-stylesheet-language--webdesign-5216
http://lesscss.org/#using-less
It's because IIS doesn't know what a .less file is and therefore won't serve it. You need to add the following to your web.config's <system.webServer> section:
<staticContent>
<remove fileExtension=".less" />
<mimeMap fileExtension=".less" mimeType="text/css" />
</staticContent>
Try to use this tutorial. You have to include your css file. Some tools like Koala generate your css file to output folder ( Web Essentials do it too).
You have to include generated css.
If you are using less.js you have to set options in server side (that you see in this webpage).
dotless
I'm planning to use number 2.
I would definitely advise against using the less.js file as a script on your page. This will slow your page down as you have to download the js file and then it has to process your less file. As you are using Visual Studio and Web Essentials this is totally unnecessary, it will compile the CSS file for you.
Web Essentials automatically compiles a CSS file for you either on save or build depending on your settings. All you then need to do is add the CSS file to your page and NOT the less file.
<link rel="stylesheet" type="text/css" href="styles.css">
More info on settings within Web Essentials for less can be found on the Web Essentials site.
Less features