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
Related
If I have the following code in a webpack project with css-loader and style-loader plugins:
import 'index.css'
It generates an inline style in a <style> tag. Is there any way to leverage browser caching feature by having it generate a <link rel="stylesheet" href="index.css"> instead? I know I can put CSS files in the public folder, but then it won't be in the Webpack build pipeline. Is there some existing CSS loader plugin that does this? Or are there strong arguments for abandoning this approach altogether (ofc. not putting them render-blockingly in the document <head>)?
There are no arguments against this. I would even say this is more common than to leave the css in the chunks. But you need to use a plugin for this.
Until recently the go to here was extract-text-webpack-plugin, but now if you are using webpack 4 I would suggest mini-css-extract-plugin.
You might want to turn this off for local development. It gets in the way of HMR.
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.
I have a web application with python controllers, where output plots are plotted by Bokeh. In my master template.html file I load bokeh-0.9.2.min.css and bokeh-0.9.2.min.js as shown below.
My question is "If I run my web app as a browser app in offline mode, Is it possible to download these two files into my static/jss folder and run it offline?"
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.9.2.min.css" type="text/css" />
<script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.9.2.min.js"></script>
For anyone who stumbles upon this question, there is now a convenient way to load the Bokeh JS and CSS files inline instead of via CDN. This can be done by setting the mode argument to inline in the io.output_file function:
output_file('plot.html', title='Bokeh Plot', autosave=False, mode='inline', root_dir=None)
Yes - you should be able to download the js and css files from the cdn (using wget or similar) into static/js and static/css files. Then you just have to change the href/src paths to your local directories to load the statics.
I examined the head on an html file produced by a bokeh python script bokeh.plotting.output_file and noticed a reference to lib/site-packages/bokeh/server/static/js/bokeh.min.js
I have a .LESS stylesheet, I found a way to change variables value throw JavaScript with an old modified version of less.js
https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc)
the problem is that worked well on the designing stage because I was compiling the .LESS with the browser, now I'm building the site with asp.net, I decided to use dotless, the problem with compiling the .LESS file in the server is that dynamic variables convert to static, delete my variables and do not let me change the value throw JS.
The question is, Is there a way to say asp.net that the .LESS file must be compiled by the browser on the client?
Because just importing the .LESS file and the JS file in my html page doesn't work,
<link href="~/Content/css/UI.less" rel="stylesheet/less" type="text/css" />
the browser doesn't find the .LESS file and respond with a 404 HTTP Response.
Does asp.net hide that file or something?
PD: I already tried not adding the dotless dependency to the project which supposedly compile the .LESS file
Well I could find an answer, The only problem of the 404 HTTP response was that IIS does not support the file extension .less with a MYME-Type of stylesheet/less so for security reasons I suppose It hide that for requests, and what I had to do was configure that con the console like...
appcmd set config /section:staticContent /+[fileExtension='.less',mimeType='text/css']
Use dotless if your want the server to compile the LESS stylesheet.
Use the less.js file if you want to compile in the browser.
Also, instead of the appcmd command you can tell Web.config that your application will serve .less files
<staticContent>
<remove fileExtension=".less" />
<mimeMap fileExtension=".less" mimeType="text/css" />
</staticContent>
This way, you don't have to run appcmd if you deploy your code to another machine.
I would like to use ServiceStack as a pure AppHost implementation without using MVC. I want to use it to drive a Single Page App.
Serving the SPA's single HTML shell page is straightforward enough and I've found plenty of examples on doing that. However, I also need to serve a number of JavaScript files and I'm assessing the best way of doing this. I can simply put script tags in the HTML shell page but then I don't get the benefits of bundling and minification, and I would have to maintain this every time I add a new JavaScript file.
All these problems are solved with bundling solutions such as Cassette or ASP.NET MVC4 Bundles. But how would I use these with ServiceStack AppHost?
The ServiceStack.Bundler project is great but it seems to have dependencies on ASP.NET MVC, e.g. as a base for the HTML Helpers which render the JavaScript tags in the HTML.
I'd like to be able to do this without any dependency on MVC, if possible.
If you haven't taken a look at GruntJS yet, it's worth a look (http://gruntjs.com/). By creating some simple tasks, it can combine & minify your HTML, JS, and CSS and has no dependency on .NET. There are a lot of other really useful tasks available to GruntJS as well (js lint checks, JS unit test running, and tons more). You can easily setup different tasks for your environments as well (ie, don't combine/minify when deploying to dev server).
What it allows you to do is create a purely static HTML, CSS, and JS SPA, and you can manage that in a completely different solution/project than your ServiceStack AppHost.
So in your example, you'd just reference the scripts in your index.html file like you normally would and when you're ready to deploy to staging/production you'd run your grunt task which would bundle/minify your code for you and output the static html, min.css, and min.js files for you to some deployment directory. It's really powerful and flexible.
I used to use Bundler and I recently made the switch to GruntJS and I haven't looked back.
So, I don' think there is anything to need to do within ServiceStack's AppHost to use a 'bundling-and-minification' solution. To simplify the 'Bundling' process...
1 - 'Bundle' files from a folder(s) creating a new file(s)
2 - Reference the 'Bundled' file(s) from a View/Html
How to 'Bundle' files from a folder(s) creating a new file(s)
Cassette
Cassette seems to handle this process with 'some magic' (see web.config modifications for insight) that calls the Configure method of the CassetteBundleConfiguration class. Installing the Nuget package takes care of 'setup' for you.
ServiceStack.Bundler
ServiceStack.Bundler has a few different ways to handle this process...1) Manually with bundler.cmd, 2) A VS extension 3) Post Build Script 4) Short-cut key to an External Tool
Reference the 'Bundled' file(s)
You can do this however you like as long as you know the path of the file(s)
<link href="/Content/some.css" rel="stylesheet" type="text/css" />
<script src='some.js'></script>
Cassette offers some convenient rendering features
#Bundles.Reference('yourbundle')
#Bundles.RenderStylesheets()
#Bundles.RenderScripts()
ServiceStack.Bundler offers some as well (I think this is the code the depends on System.Web.MVC)
#Html.RenderJsBundle()
#Html.RenderCssBundle()
Note: These are just writing out the <link> and <script> HTML tags.
It seems neither Cassette nor Microsoft.AspNet.Web.Optimization (the bundling solution included with MVC4 projects by default) have dependencies on ASP.NET MVC. Therefore either solution can be made to work with an AppHost implementation of ServiceStack.
For Cassette:
It all works just fine if, from NuGet, you install:
ServiceStack.Host.AspNet
ServiceStack.Razor
Cassette.Aspnet
... and then use Cassette from a Razor 'cshtml' file as usual.
One small gotcha which did cause me to scratch my head for a few minutes:
The order in which the HttpHandlers are listed in your web.config is important. The ServiceStack.Host.AspNet package adds an HttpHandler path which uses a wildcard meaning any further HttpHandlers, such as that for Cassette.axd, are never reached.
Simply changing the order in my web.config from:
<httpHandlers>
<add path="*" type="ServiceStack.WebHost.Endpoints.ServiceStackHttpHandlerFactory, ServiceStack" verb="*" />
<add path="cassette.axd" verb="*" type="Cassette.Aspnet.CassetteHttpHandler, Cassette.Aspnet" />
</httpHandlers>
to:
<httpHandlers>
<add path="cassette.axd" verb="*" type="Cassette.Aspnet.CassetteHttpHandler, Cassette.Aspnet" />
<add path="*" type="ServiceStack.WebHost.Endpoints.ServiceStackHttpHandlerFactory, ServiceStack" verb="*" />
</httpHandlers>
fixed the problem. I don't know if installing Cassette.Aspnet from Nuget first would have prevented this issue from occurring in the first place.
For Microsoft.AspNet.Web.Optimization:
From NuGet, you install:
ServiceStack.Host.AspNet
ServiceStack.Razor
Microsoft.AspNet.Web.Optimization
Having done this, you can use Microsoft.AspNet.Web.Optimization bundling and minification as normal.
I added a BundleConfig.cs file, followng the convention you'd find in a default MVC4 project. I then call BundleConfig.RegisterBundles(BundleTable.Bundles); from the ServiceStack AppHost file.
Thereafter, all #Scripts.Render() statements in Razor files work just fine.