Hi i downloaded bootstrap from their website. it is a zip file with the different css js img files. do we need to paste in both bootstrap.css and bootstrap.min.css? isnt it the same file and i'm including them twice?
No you do not need to keep both the files since .min file is only a minified(compressed) version of bootstrap.css.In order to utilize all of bootstrap features you just need to include 2 files one css(either min or normal) and one js(either min or normal).You might also consider downloading it of cdn instead of keep a copy locally here is the link http://www.bootstrapcdn.com/
Related
I've been playing around with a small app which is broken up as follows - listed in loading order:
a css file, which also imports bootstrap (size 124KB, 1.8s)
an "aurelia.js" file which contains all aurelia code (320KB, 1.8s)
a "myproject.js" file which contains my code (100KB, 0.9s)
a "dependencies.js" file which contains various dependencies (400KB, 1.2s)
The problem is that these files seem to load sequentially, taking around six seconds. How can I fix this?
I use webpack for JS and now I want to use it for styles. I have a lot of styles in different folders and i want to compile them all without requiring each of them mannaully. The question is how to gather all the .less files in the folders and compile them via less-loader?
This isn't how webpack is meant to work, really. If you really want to do this, grunt/gulp is going to be a better choice.
Webpack's require mechanism ensures you build only the CSS you need for any given entry point, and gives you dependency management as well. If you do want to use webpack, but don't want to use the style-loader to insert them into the DOM etc., you can use the Extract Text plugin to build your compiled CSS into a separate file.
I found some workaround using require.context.
First you need to create a js file in the root of the styles folder if you don't have one.
Use this code if you use css or less and always extract them
require.context('./', true, /(\.less$)|(\.css$)/);
First argument is relative path to folder in which webpack should search for the files, second tells that it should search in subfolders and the last one is regexp of the extension of the files that webpack should require. Then you need to requre this file or use it as entry point. This works if you use extract-text-webpack-plugin but doesn't work otherwise.
Using styles without extracting them to style separate file
The example above doesn't work if you don't extract them because webpack generate modules with styles but doesn't execute them. This is complete example that works in both cases:
(function (requireContext) {
return requireContext.keys().map(requireContext);
} (require.context('../', true, /(\.less$)|(\.css$)/)));
I tried to adopt the Air theme insinde the current IP.
The problem is that the resulting theme.css stays empty, Ithink due to a compilation error.
I have replaces the original less files of the theme inside the assets/less-subfolder by the twitter Bootstrap less files.
As soon as I include more than ipContent.less and variables.less (for example the original Bootstrap grid.less) the resulting css file becomes empty.
Does anybody have an idea? It's not a file permission issue that's sure.
Something about missing variables I suppose.
Thank you and cheers from Hamburg,
Thomas
I'm trying to load an entire source library of JS/CSS from Objective C (Xcode) from a UIWebView with an HTML loaded. The problem is that in the library documentation, they say you just need to load one JS file, but inside it's requiring others JS. The question is how i have to arrange the files... Just one folder with all the sources? Nested folders containing the JS/CSS just as they come on the library? or Do I need to fix the path of the requires in order to load them (say absolute or relative)?
Thanks in advance
I suggest minifying all of your JS (CSS) into 1 file. You can download tools to do this, but one easy free one online is: http://jscompress.com/
Using some command or a downloaded app would probably make the code-minify-debug process much quicker, but you can test out the idea using that online tool.
From this page,
http://www.yiiframework.com/wiki/23/how-to-create-a-breadcrumb-widget/
It seems it suggests that we should put the files in the component folder. But if my widget contains javascript and css files, where should these files be placed?
By the way, is this a good idea that I create it as an extension? If I go this way, all widget files are more self-contained in a folder inside the extension folder. But since the widget I am going to work on is very customized, it's unlikely that it will be useful to other people or my other projects. Making it an extension seems a little bit strange.
I understand that it does not really matter where I put these files as long as the paths I am using in the codes are correct but I would like to know the common practice.
I think the common practice is to put the widget in extensions folder with js & css files in an folder named asset. In the php class file, you do initialization first by publishing the asset with yii asset manager.
The file structure may be like
extensions/
widget_name/
widget.class.php
assets/
plugin.js
style.css
I would join the recommendation to put the widget under /protected/extensions.
I put the assets in a slightly more detailed manner: /protected/extensions/WidgetClassName/assets/ and the widget view files in /protected/extensions/WidgetClassName/views/...
Don't forget to edit your /protected/config/main.php and add a row in the 'import' section (for autoloading of the widget): 'ext.WidgetClassName.WidgetClassName.*'