I'm using nuget to load jQuery and jQuery Mobile packages into my project. Nuget is loading jquery.mobile-1.0.1.min.css and jquery.mobile.structure-1.0.1.min.css. Which should I use? Both? What are the differences?
The primary difference is that the jquery.mobile.structure-1.0.1.min.css provides basic css styling while the jquery.mobile-1.0.1.min.css is the structure plus default theme swatches.
If you are using your own custom theme (maybe from themeroller) then you should be fine with just the structure file. Check out this page for more information on different download configurations.
Related
I use Visual Studio 2019 to develop a web ASP.NET MVC application.
When I debug, or execute my web application, with the browser debugger F12, I can read in the sources menu (view photo) that my pages are based on sccs style sheets located in a scss directory.
How to generated this directory? Why most of the css (coming from bootstrap) are translated into sass files ? Is it due to the package Web.Optimization which generate bundles? I don't understand the process and its utility.
Can someone answer my questions ?
For information, I installed bootstrap 4.5.3 with NuGet, and I noticed that several files where created in"Content" directory in the project explorer (bootstrap-grid.css.map, bootstrap-reboot.css.map, etc). So I think bootstrap is maybe the reason of scss files like _reboot.scss).
Scss files are translated (by engine Sass) into css. Only that files browser can understand.
I think files from picture are just in public folder.
(*.map, *.min.css, etc) files are optional.
In Bootstrap documentation is written:
compiled and minified CSS and JS (bootstrap.min.). CSS source maps (bootstrap..map) are available for use with certain browsers' developer tools
https://getbootstrap.com/docs/3.4/getting-started/#whats-included-precompiled
The minimized files are size optimized and maps are helpful for developer tools use.
Thanks Apan.
Finally, I can keep only the 2 files bootstrap.css and the js, because MVC minimizes them with bundling process.
I am configuring grunt for SAPUI5 project. I can configure grunt taks for minify, test and etc. I see there is grunt-ui5 grunt plugin but I am not able to understand what exactly this plugin is doing or useful to SAPUI5 projects.
Thanks
The grunt-openui5 plugin by SAP is documented at github.
It can be used to build UI5 themes and package components and libraries into preload-files.
UI5 tries to load most of the modules of a component or library with a single request from a component-preload.json / library-preload.json file. If it cannot find a preload file, it has to request all modules individually resulting in many many requests and thus poor performance.
grunt-openui5 is used to create these preload files. It also minifies the code while doing so.
The grunt-ui5 plugin is something inofficial which seems to do similar things. You would have to ask the author directly to get more information. I recommend to use the official grunt-openui5 plugin.
For ui5 applications it's not common to use the grunt task for minification , instead we use the grunt-openui5 task. It will create the preload file, which is a json object that contains the whole app.
{
"version":"0.0",
"name":"app name",
"modules":[
"control1": "code for control1",
"control2": "code for control1",
]}
When control1 is required, ui5 just uses the preload to get the code for control1. In this way, ui5 avoids triggering a new request. Anyway, If the preload file is not present, it will have to request control1.js .
If you want to see a real preload file, open any ui5 app and go to the network tab of the browser.
Using the grunt-openui5 plugin for grunt, it will do the work for you, and will give you as a result a library.css, rtl, library-parameters.json (same thing, but for themes) and the preload.json (for the js files).
Instead of using grunt-ui5, I would recommend you to use the the oficial plugin grunt-openui5!
grunt-openui5 is a really amazing grunt plugin created by bunch of SAPUI5 core dev team ;)
It mainly allow you to do 4 things:
create Component-preload.js (optimized and minified version of your app)
create library-preload.js (optimized and minified version of a custom library)
create a custom theme
create a local web server to test your app locally
I've covered it a little bit on my blog post Custom Control 101 if you want to check it out.
I'm using it in daily basis and you can read some of my blog posts about it.
Just a small remark: in the future, consider switching from grunt to gulp, as gulp is newer and faster. For SAPUI5 there are packages with same functionality in gulp, as ingrunt.
I'm starting a new project with asp.net mvc4 internet application.
First thing I did was install a package called Twitter Bootstrap for Asp.Net MVC 4 Sample via nuGet.
This installed other two packages Bootstrap and Twitter Bootstrap for Asp.Net MVC 4.
When I run the application,I get this
I didn't face this problem in previous projects. When I installed twitter bootstrap, things were fine when i built the application.
Can anyone explain or suggest, what might be going wrong?
Edit 1:
I have another project where bootstrap works fine. When I run the two projects in chrome and check the network, file that are loaded for both the projects are same.
There is a file BundleConfig.cs (or a specific BootstrapBundleConfig.cs) in your "App_start" folder of your MVC4 project.
It will have a declaration of something like this:
// It won't look exactly like this..
bundles.Add(new StyleBundle("~/Content/bootstrap/css/style").Include(
"~/Content/bootstrap/css/bootstrap.css",
"~/Content/bootstrap/css/bootstrap-theme.css"
));
Now you must go to your "Views/Shared/_Layout.cshtml" file (or whatever you base layout is) and add the following line within your head section.
<head>
/// Other stuff in here
// This renders the boostrap style
#Styles.Render("~/Content/bootstrap/css/style")
// include any overrides to bootstrap you have after the library
</head>
My team and I are currently developing an application for both Android and iOS using ASP.NET MVC 4, HTML5, and PhoneGap. The development works perfectly fine; however, one question remains unanswered: What is the recommended approach to generate the three files PhoneGap needs (one HTML page, one JavaScript file, and one CSS stylesheet) from our MVC solution?
Would you recommend using a Razor template-based approach? Or would you simply automatically copy the output HTML source after each build? Or would you suggest something completely else?
This morning, we decided to let ASP.NET MVC render a single view containing all our application's HTML which references several JavaScript files and CSS stylesheets. We then automatically grab the rendered HTML source and copy an index.html into a certain export folder on our local machine. That folder is ready to be deployed because it contains only one HTML file and additional JavaScript and CSS resources – exactly what PhoneGap expects.
I have two flex projects: A project with my custom theme and another project in which I want to use my custom theme. However, every time I modify the theme, I have to import it again, clean and refresh the project. I am using Flash Builder 4.5. Does anybody know a better way to use the custom themes?
I found the solution to the problem. It is not that difficult and the results are great; you will be able to edit the theme, go to the design view of the project using the theme and see the results (no imports, no cleans, no refreshes).
Steps:
Open both projects at the same time in Flash Builder
In the main project (the project using the theme), go to Project > Properties > Flex Build Path
Select the Library Path tab and click Add Project
Select the project containing the theme
You're done! The main project will now depend on the theme and will recompile the theme every time you build.
Hope it helps!