I'm developing an ASP.NET MVC application using dotless and bundling.
When my CSS is optimised I get a link such as:
<link href="/bundles/global.css?v=xxxxx" rel="stylesheet"/>
However, when optimisation is disabled I get:
<link href="/css/header.less" rel="stylesheet"/>
<link href="/css/content.less" rel="stylesheet"/>
<link href="/css/footer.less" rel="stylesheet"/>
In Chrome these less files are read just fine.
However, is it common practice to use .less files directly as stylesheets?
I'm concerned that some browsers might not recognise the stylesheets as they don't end in .css and therefore will ignore them.
UPDATE: For clarification, the .less files are pre-compiled server side and therefore are valid CSS files. No client-side processing is happening.
I'm pretty sure as long as the user has Javascript enabled then the only thing that will process and interpret the .less files into CSS is the less.js library. You could also check their Browser Support.
I also wouldn't suggest using LESS in production as it's whole purpose is to help you create dynamic stylesheets even faster than normal in development. If you leave it in production then each time the browser loads the page it will have to download the less files and render them which is more time consuming than simply compiling your files into one .css file.
Edit:
You could ensure that the browser doesn't reject your file and treats your less file as a css file by setting the MIME type on your server to text/css for files with the .less extension.
For example if you're using Apache you could use the following .htaccess file to do so.
AddType text/css .less
Related
I am trying to make my first website. I am using Django for it. I have a question related to the inclusion of css/js from Bootstrap.
What is the difference between installing it and linking it using BootstrapCDN?
What happens if that link is no longer accessible? Will it affect the website?
Can't I just include those files in statics directory?
I have this in base.hml file of my app:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'flatly.css' %}">
<link rel="stylesheet" href="{% static 'main.css' %}">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
The main point and reason for using CDNs for loading any files (not just Bootstrap files) as opposed to hosting those files on your server is SPEED!
CDNs can drastically increase the speed/performance of your website.
That is because of 2 things:
CDNs allow more files to be loaded in parallel i.e. at the same time! While if you host the same files on your own server, they will be loaded one after the other and depending on how many files (including image files etc.) your web page has to load, that alone can make a huge difference in performance.
Files that are used on MANY websites (such as Bootstrap files for example) are already cached in the browser of your website visitors! So, they don't have to load them at all which is an even greater gain in speed/performance. This assumes that you are using CDNs that are used by thousands or hundreds of thousands of websites to load the same files (because the browser will only use cached files if the URL/path to those files on your website is identical to the CDN URLs that another website, previously visited by the user, also uses).
Also, you can include a small piece of JavaScript or jQuery that checks whether or not the external CDN file is available and if the CDN happens to be down for some reason, then and ONLY THEN that piece of JavaScript would load the corresponding files from your local server.
A quick answer: you can use both it won't affect "link is no longer accessible" don't worry those are official CDN's and most of the people uses cdn for those css and js.
So first way is that you include all the static files from your own domain (localhost or static storage) in this case all the request for those static files will be handled by your server. If you are using localhost it won't affect you much but when you host it on server it will drain a little bandwidth traffic of your server.
On the other hand if you use cdn then you will save space as well as bandwidth of your server
I am trying to import Font Awesome and Google Fonts into my Ember app but they aren't working. None of the styles are being applied.
I am using ember-cli-sass. Am I not able to import a stylesheet from a CDN? Does it not compile .css files? I tried looking for a .scss file for Font Awesome on a CDN but I couldn't find any, and I don't think Google offers .scss files at all.
app.js
import 'fonts.scss'
fonts.scss
#import '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
#import '//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300';
When I add <i class="fa fa-user"></i> to my template, none of the Font Awesome styles are applied. Why aren't the stylesheets being imported?
There are two main ways to do this. If you don't mind fetching it from the internet, you can add them as links in your <head> tag in index.html.
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300" rel="stylesheet">
Or you can download the files and include them in your scss build. This gives you more freedom to customize them. You might want to do this to minimize the number of API calls your app requires in order to load, as you've heard that will make your app load faster. But consider that if the fonts you are loading are popular (and these two are) then your user may already have them cached, making them blazingly fast.
If you want to download the files into your build here is what you do. Keep in mind that CSS is valid SCSS, so if you can get a CSS file you can always just rename it .scss and include it in your build. But you can't import a file from the internet in your scss. Your scss gets parsed and compiled into CSS before your app even gets served. The files need to be available from your project folders.
Font Awesome
For FontAwesome 4.7 you can get the sass files and include it in your project pretty easily. Go to http://fontawesome.io/ , click the "Download" button, download the files. You need two folders, the "scss" folder and the "fonts" folder. Add those two folders to your project. Open the scss/_variables.scss file and change the #fa-font-path to be the path to the font directory. Include the font-awesome.scss file in your scss. You can also find the instructions at http://fontawesome.io/get-started/
If you want to start to get fancy you can then edit the files to only include the icons you want. There are several ways to do this, but I won't get into that here. It's licensed under the MIT license, so you should be able to do this legally.
Google Fonts
Open a browser and paste http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300 into the url. You will actually get the css file. Copy and paste into a .scss file and include it in your build. With Google Fonts each font has its own license. Open Sans is covered by the Apache 2.0 license, so you can do this.
There is no support in SASS for importing a CSS file
If you are using Ember, the best way would be to either download the CSS into the vendors folder and added to ember-cli-build.js.
Alternatively, if you want to use the CDN, you can add the CSS to the index.html in Ember.
Ok so I work for a company that uses Bootstrap and less css. Right now for each client they include all our "core" less files that dont change along with the less files that are only for that customer. We want to clean this up and have a central location for the "core" files and then in each client folder all we have are the 2-3 less files that are only for the client.
Can bootstrap compile less from multiple locations?
This is structure as to what we have now and what we want.
What we have now:
Client 1:
Customer Less files
"Core" less files
Client 2:
Customer Less files
"Core" less files
Client 3:
Customer Less files
"Core" less files
What we want:
"Core" less files
Client 1:
Customer Less files
Client 2:
Customer Less files
Client 3:
Customer Less files
Hope this makes sense. Thanks
I expect your question is about client side compiling of your less code (see: http://lesscss.org/#client-side-usage).
When using the less.js client side compiler you can include more than one file:
<link rel="stylesheet/less" type="text/css" href="core.less">
<link rel="stylesheet/less" type="text/css" href="client.less">
<script src="js/less.js" type="text/javascript"></script>
When you move core.less in the above situation to an other domain:
<link rel="stylesheet/less" type="text/css" href="http://yourdomain.com/core.less">
You will end up in a cross domain issue in the first. This can be fixed by enabeling CORS, see: http://enable-cors.org/. On the domain where core.less has been installed, the server should send an Access-Control-Allow-Origin: * header.
less.js loads the less files with a XMLHttpRequests which supports CORS for most modern browsers see http://caniuse.com/#search=cors. More details can be found at http://www.html5rocks.com/en/tutorials/cors/
Notice that the less.js compiler compiles each file independent from each other in a different scope. So the client.less file in this example can not use mixins and variable defined in core.less.
Please also notice that you should not use client side compiling for production in most cases because of performance issues.
While building large applications with meteor, we do face the regular problem of editing the stylesheets files. Once a file is edited, the whole application reloads which takes time each time a little change is made. A large project implicitly implies complex css files. For this reason I chosen to use the sass in order to structure them and be more efficient in the development processing. What I'm looking for is a workflow where I can change the .scss files in an editor and watch the result in real time in my meteor app.
Here is what you need (it looks fastidious but do not be afraid, it worth it):
Setup your project to externalise .css files
Meteor compiles all the .css files into one monolithic one, most of the css editors are not expecting this behaviour. For the development phase, I do recommend to use the traditional approach of including the stylesheet to the html page itself. to do so:
Create a public folder in the root of your meteor project: meteorProject/public
Add a css file into this folder: meteorProject/public/style.css
Import the stylesheet in your main html code <link rel="stylesheet" type="text/css" href="/style.css" />
What you did ? You created a public repository accessible through the path localhost:3000/ then you added the stylesheet style.css to this repository, that one became available through the relative path /style.css. By using this technique, meteor will not compile neither include by itself the stylesheet to your project, you just load it manually in the regular way using the link tag. Now it is time to configure an editor.
Now that the styles are imported the way they were 10 year ago, you can use compatible tools which will override the style to allow live editing. A simple one but only for css is the well known Espresso (formerly CSSEdit), open the page and override the styles… but that one is currently not supporting .scss files.
Editing .scss files in realtime with meteor:
To achieve this, you will need to use Sublime Text 2 or 3 as the editor, you can get it here: http://www.sublimetext.com/3 it is not free but there is no feature nor time restriction. So if you continue using it, just buy it to support the developers team.
You will need the awesome tool to allow the live edition which is takana, get it here: https://github.com/mechio/takana
That takana is freaking awesome! the concept is the following: Once installed and ran it will create a server interacting with the sublimetext editor, then you are requested to add a js snippet to your code so that the browser will get connected with the takana server and reload the .css or .scss files in realtime without having to reboot meteor.
To setup the meteor project with takana just do the following:
open the terminal
sudo npm install -g takana (enter your password if requested)
start takana in another terminal by providing it the absolute path of the meteorProject/public folder created above is might look something like: takana /Users/aUser/meteorProject/public
Add to your main html page the js snippet <script type="text/javascript" src="http://localhost:48626/takana.js"></script>
You are all set, now to use it
Start your meteor project in a second terminal. command meteor from the right path…
Open any browser to your meteor page i.e. probably http://localhost:3000
Open sublimetext, try editing your style.css file, the css changes are automatically displayed on the browser page without saving anything.
This is also working with .scss file. Just rename the style.css to style.css.scss and edit it within sublime text. Here the magic happen, you are editing a scss file with live result on a meteor application without having to reload anything.
Once you are satisfied with the result you can either compile the .scss to a .css file and add it the regular way to the project, or use the meteor .scss package which will do this for you at each restart. Note: Don't forget to remove the js and style snippet one to your code once in production.
Last but not least: you can open the project in several browsers and see them be refreshed in live while you edit the file in SublimeText, also it worked fine with Safari, FF but for some reasons I had to use "Google Chrome Canary" instead of "Chrome". Please comment if you made it work on other browsers such as IE, Opera or even if it worked with the regular "Chrome" on your computer.
I have Less CSS working with my Django site in local development. Everything looks fine. I'm including the files as follows:
<link rel="stylesheet/less" type="text/css" href="{{ STATIC_URL }}less/base.less">
<script src="{{ STATIC_URL }}js/less-1.1.3.min.js" type="text/javascript"></script>
However, when I deploy the project to Heroku, Less CSS inexplicably doesn't work. What do I have wrong?
I know for a fact that I have static media set up properly: I can download base.less and less-1.1.3.min.js from the correct paths just fine.
Note: I realize that it's best to compile and minify my .less files for production, but this is just a staging server for development purposes.
Note 2: If you know how to add compilation of Less CSS to the Heroku deployment process, without having to install node.js, I'd be interested in learning how to do that in addition to my main question..
The problem is that less.js loads the .less stylesheets through XHR, which doesn't work unless you set the appropriate Access-Control-Allow-Origin header, which S3 doesn't permit (https://forums.aws.amazon.com/thread.jspa?threadID=34281).
As a workaround some people have suggested setting up an HTTP Proxy, which adds the necessary header. (http://motoole.com/2011/10/19/hosting-font-face-fonts-on-s3.html) and (http://zefer.posterous.com/pure-html-ajax-solutions-to-upload-files-to-s)
Otherwise, you're going to have to compile the .less files to CSS, as less.js isn't going to work.
Of course, another alternative (which I use), is to simply deploy the static files to an Apache server, and not host them in S3.
Take a look at https://github.com/nigma/heroku-django-cookbook
It makes use of the post_compile hook provided by heroku-buildpack-python to install nodejs and lessc.