I've got a Grails 2.2.1 application that makes use of the Twitter-Bootstrap plugin, which supplies the basic CSS and javascript elements of Bootstrap to Grails applications, along with a tag lib and some other features.
The thing is, I want to use a custom CSS file that offers our company colors, and right now I can only do that by pulling in our own CSS from the app that overrides the elements in the plugin's own bootstrap.css file, meaning that the plugin loads its CSS file first and the app loads its own secondly. And these files are very big and heavy.
My users, especially those on mobile devices, don't need the burden of an extra 125k of CSS along with the extra processing that comes with doing each rule twice.
Short of building my own custom version of the plugin, is there anything I can do that will prevent the plugin's bootstrap.css file from getting into the web page with my own boostrap.css file?
The plugin uses resources to declare the twitter bootstrap files. Luckily resources have a option of overriding definitions of declared modules.
So in your ApplicationResources.groovy, add:
modules = {
overrides {
'bootstrap-css' {
resource id: 'bootstrap-css', url:'/css/mycustombootstrap.css'
}
}
}
Related
I'm using PhpStorm for a Bootstrap project.
Is there any way to make PhpStorm autocomplete get and predict CSS classes from external file without linking this file to the edited file?
Or any way to select stylesheet file and make PhpStorm use its' classes inside whole project without linking this CSS file to the edited file?
In HTML templates/partials completion includes selectors from all project stylesheets - unless you have some styles explicitly linked/embedded in your partial via <link> or <style> tag. See https://youtrack.jetbrains.com/issue/WEB-2223 and linked tickets.
Vuejs templates will be treated differently since 2017.2 - see https://youtrack.jetbrains.com/issue/WEB-25767
I have not been able to get an explanation of which files are needed in a JQuery Mobile Web site. The stackoverflow documentation on JQuery Mobile shows that there is one file for css and one file for js:
jquery.mobile-1.4.5.min.css
jquery.mobile-1.4.5.min.js
However, downloading the JQuery Mobile 1.4.5 package one ends up with many more. All files that have ".min" appended to the name of the asset, is a minimized version.
The standard download includes one js (the one mentioned above). That is required, as well as JQuery itself. At this date, the latest jQuery that is compatible with jQuery Mobile 1.4.5:
jquery-2.2.4.js
(correct me if that is not true)
For css files standard download includes:
jquery.mobile-1.4.5.css
jquery.mobile.structure-1.4.5.css
jquery.mobile.theme-1.4.5.css
jquery.mobile.external-png-1.4.5.css
jquery.mobile.icons-1.4.5.css
jquery.mobile.inline-png-1.4.5.css
jquery.mobile.inline-svg-1.4.5.css
It appears to me that the first file contains all the rest. So that one can choose to include all at once with one file. The others, I guess, would be used if less code is wanted in a streamlined version of JQuery Mobile. However if one does not use jquery.mobile.css, which are needed in HTML at the top of the page?
If one uses ThemeRoller, jquery.mobile.theme.css becomes MySITE.css (whatever name was selected during the export process in ThemeRoller). If one uses a custom theme, then that theme css is needed, along with jquery.mobile.structure.css.
If one includes jquery.mobile.icons.css, does that in turn include in the external-png, external-svg, and inline-png files?
And what is "jquery.mobile-1.4.5.min.map" for and when is it needed?
That would all be good information for the documentation in stackoverflow.
I created a custom theme (mysite.css) in ThemeRoller so I include the following in HTML (in the appropriate link of script tag):
mysite.css
jquery.mobile.icons-1.4.5.css
jquery.mobile.structure-1.4.5.css
jquery-2.2.4.min.js
jquery.mobile-1.4.5.js
Is that correct?
In an Angular style app, I would expect the typescript files to be bundled together and basically all loaded at start up of the app. In an MVC type app (a view per page, not a SPA), I would expect to only load typescript for that page. I don't want to load typescript that is not relevant for that page.
I split my typescript into separate files (basically one class per file). I then set up import/export clauses in the files to reference the classes. I think this approach will work better when I go to use external libraries (jquery, etc). If I use namespace, later on when I go to use third party libraries I don't think it will work.
However, that means I need to look at some sort of loader. If I have lots of little typescript files I don't necessarily know when all files have loaded before attempting to use them, which is the sort of thing that requirejs looks after. I haven't used web pack but I think it does the same sort of thing?
But that would mean I would need a requirejs config for each MVC page which doesn't seem to be very efficient. What approach should I be taking to load all the typescript files I require for the specific MVC page, bearing in mind I could end up with dozens of MVC pages?
There is now (2021) a partial solution to this question. I'm not sure it is "efficient" but it does load multiple Typescript files on different MVC pages.
If you alter your typescript config to output ES6 modules, tsc will create one JS file fore each TS file, each in an ES6 module. If you then use a module script tag, the browser will import the files as needed
<script src="scripts/modules/start.js" type="module"></script>
<!-- and/or -->
<script type="module">
import { loadStats } from 'pages/homepage.js'
<!-- note that this is JavaScript -->
loadStats();
<script>
This does require users to be using a modern browser: https://caniuse.com/es6-module
This is not a panacea - there are lots of gottchas and work arounds, one big one being that import statements must be in JavaScript Module style, not TS style
import { loadStats } from 'pages/homepage' // <-- Will not work at runtime
import { loadStats } from 'pages/homepage.js' // <-- Use this style. Note the JS extension
as tsc does not correctly convert import statements. This should point at the TS file (as the created JS files will have the same relative path), Visual Studio appears to be able to cope for the purposes of intellisence and compiling.
We managed to get npm to work for typings, but struggled for other packages. We have, though, been able to retro-fit typescript into an older MVC app this way (we wanted/needed type checking for API calls).
I am working on minifying js and css files in grails application. My original plan is to use the resources plugin to minify the resources (also had a look at jawr and performance-ui, but resources seems to be de facto standard these days).
Resources makes it easy to minify individual CSS files using YUI, but we have over 40 JS files, which we'd like to concatenate into a single file (and the files will need to be concatenated in the right order too) I haven't seen anything suggesting that Resources supports this out of the box, these are the approaches we have planned so far :
Add new grails taglib to concatenate the js and css files to create one js and one css file and minify using the resources plugin. A naive implementation will mean the yui-minify runs every time the page is served (!!) so we'd need to inytroduce caching somehow.
Use the BuildConfig 's grails.war.resources to minify the js and css. This would get round the caching issue, as the resource would only bebuilt and minified at build time, but will require us to use grails run-war to test locally, hence any minification-related errors won't get caught until later in the dev cycle.
This must be a fairly common problem. What are other people doing? Would like to hear about any other approaches or best practices I can use.
You can make all your resources using the same bundle, with this, you will have only one merged js. Example:
main {
resource id: 'mainjs', url: 'js/main.js'
defaultBundle: 'mybundle'
}
second {
resource id: 'secondjs', url: 'js/second.js'
defaultBundle: 'mybundle'
}
According to the docs:
The "bundle" mapper adds together resources of the same type to reduce
the number of files your client pages request.
The "bundle" mapper looks at the value of the "bundle" property on
resources and if found, will add the resource to a new synthetic
aggregated resource.
This aggregated resource is itself processed through mappers, so it is
subject to the other optimisations you apply to the kind of resource
the bundle is aggregating.
Bundles are always in the base directory of the static resources
folder - which means references to files inside the bundle must be
re-adjusted so they continue to refer to the same files. This is made
possible for CSS files by the csspreprocessor and cssrewriter mappers.
I have created a custom theme using Jquerymobile.com themeroller.
A mobile website which i have created using default theme values like .js and .css folders.
Now i want to change that theme of my website to my new custom theme,created using themeroller.
How to include those files to my coding?
When you download the themerolloer that you create, there is a sample index.html file that uses the theme that is enclosed. Look at that to see what files need to be included in your page, but more importantly, look at that code to see what CSS classes are being used - no point in including them in your page if you aren't using using the Themeroller classes
You can see all the steps, and a full tutorial on the Getting Started page