I have an ASP .NET MVC 5 project. The template came with bootstrap, and I have generally left it alone. I now want to use the Bootstrap source as well as Bootswatch variables files for styles. Previously, I have put all the resources needed to build the libraries in to a separate project and written a custom build script, but there must be an easier way. I have found a few related packages, but none provide anything comprehensive.
Are there premade NuGet packages that will set up the two libraries? If not, what do I need to do to get it up-and-running (including automatic build in VS)?
Depending on the setup of your project, it may be better to get your Bootstrap-specific CSS from a CDN, even if using MVC.
Check Bootstrap CDN as well as their Bootswatch resources for quick easy usage:
<!-- Default Theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<!-- if you wanted Amelia, use this instead: -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" />
Related
I just started Front-End-Developing and wanted to use Frameworks to make it more simple. So, I discovered Tailwindcss. However, tailwindcss requires my server to have node.js and npm in order to install it and i cant really install these packages on my server. Thats why I wanted to ask if you can use Frameworks, like Tailwindcss or React, without installation. I then later discovered a website called "skypack", where all those packages can be used without installation. Now, in my HTML-File, where I wanted to install Tailwindcss, I have the following written:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="module">
import tailwindcss from 'https://cdn.skypack.dev/pin/tailwindcss#v3.1.8-diwqGRTxzuOsx0Oh1GvI/mode=imports/optimized/tailwindcss.js';
</script>
<div class="bg-sky-400 aspect-square"><p>test paragraph</p></div>
</body>
</html>
Unfortunately, the css isn't applied on the paragraph. Did I import it wrong? Does skypack work at all? And are there other ways to implement Frameworks without npm?
Thanks!
You can use tailwind CDN
Add these following lines to the <head></head> tag of your HTML page
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
</head>
For development and/or testing purposes you could use tailwindcss's "Play CDN" option. You can find instructions for that at:
https://tailwindcss.com/docs/installation/play-cdn
For production use you'll really want to follow their instructions here:
https://tailwindcss.com/docs/installation
You'd do that on your desktop/laptop computer or wherever you're developing locally, not on your server. Then run the CLI build process. That process will generate the CSS files you actually include in your HTML.
You don't need to install Node.js and npm on your server. You just need it on your development machine, then you upload the generated files to your server (or however you deploy your code when it's ready for production).
Disclaimer: I'm not an expert with using tailwindcss or even Node.js, I'm just getting into it after having written CSS/JS/HTML by hand for many, many years.
I am using Tailwind CSS Play CDN for local development, and would like to use PostCSS to build a production version
Basically every time I need to manually replace the following line in index.html
<script src="https://cdn.tailwindcss.com"></script>
with
<link href="/dist/main.css" rel="stylesheet">
before pushing to production site
What is the best way to do that automatically each time I publish the website?
Quotes from tailwind docs
Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not the best choice for production.
So you need to use build tools like webpack, Rollup, Vite, and Parcel
Tailwind CSS with Parcel
Using Postcss
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>
What is a good strategy for automatically applying and/or updating cache buster variables on my javascript and stylesheet references in an ASP.Net website?
E.g. Transforming
<script type="text/javascript" src="/js/myScript.js" />
to
<script type="text/javascript" src="/js/myScript.js?rev=12345" />
UPDATE: Continuous Integration is not required.
I am using continuous integration (Jenkins to be specific), so it would be great if the method for updating the variables was based on the build number for instance.
While I can live with applying the original variables manually in the source code and just updating them via the strategy, it would be a nice addition if the strategy could also apply the original variable if it did not already exist (say to legacy code).
Off the top of my head, I can imagine using a Powershell script that scans through all *.aspx and *.ascx files and uses a regular expression to find the appropriate references and update them. But you know what they say about using regular expressions... then I have two problems :)
You may also want to look into Cassette, RequestReduce and Bundler.
Cassette: Automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS, Sass and HTML templates.
RequestReduce Makes your website faster - sometimes much faster - with almost no effort
Auto generates sprites from your background images
Optimizes Sprite PNG format and compression
Minifies CSS and Javascript
Optimizes caching headers and ETags
Runs on any IIS web site including Classic ASP and PHP
Can sync content accross multiple web servers
Works well with CDNs
Compiles Less, Sass and Coffee script
Bundler: "Compile, Minify, Combine Less/Sass/Css/JS/CoffeeScript files. Easily use from MVC"
The answer to cache buster variables in ASP.Net is to use one of the various CSS/JS minification libraries.
I was thinking that the cache buster variables would need to be updated with each deployment to our servers, but the minification libraries apply a hash tag based on the contents of the individual CSS/JS files.
Since I am developing a .Net 3.5 website my choices were a little restricted. I ended up using SquishIt (available as a NuGet package) and it was SO easy to integrate.
<link href="/<my_css_path>/<css_file_1>.css" rel="stylesheet" type="text/css" />
<link href="/<my_css_path>/<css_file_2>.css" rel="stylesheet" type="text/css" />
<link href="/<my_css_path>/<css_file_3>.css" rel="stylesheet" type="text/css" />
became
<%= Bundle.Css()
.Add("~/<my_css_path>")
.Render("~/<my_css_path>/combined_#.css") %>
and that is basically it! Similar idea with the javascript. As long as debug="true" in your web.config for local development and debug="false" for your staging/production environments, SquishIt will leave your CSS/JS unseparated and unminified for local development and then combine, minify and hash (for cache busting) for your other environments.
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.