I have decided to start using HTML5BP and Bootstrap2 (with responsive option) as my starting point for future projects, and thought that Initializr.com’s package generator was a great way to get the two offerings working. So I downloaded the Initializr package, with the boilerplate, Responsive Bootstrap 2, modernizr, respond, jQuery development, LESS, and IE classes options selected.
Everything went as expected after placing the zipped package’s contents into a clean working folder. And opening the index.html file properly displayed the expected Bootstrap styled “hero” template. Which was great for local development, but I wanted to be able to compile the LESS files locally and upload a proper CSS file to my sever for production code.
Enter SimpLESS/LESS.app and my first roadblock.
When using SimpLESS/LESS.app, one is supposed remove the following 2 lines from index.html (according to the comments in that file):
<link rel="stylesheet/less" href="less/style.less">
<script src="js/libs/less-1.2.1.min.js"></script>
and replace them with:
<link rel="stylesheet/less" href="less/style.css">
Here is the actual comment from index.html:
<!-- Use SimpLESS (Win/Linux/Mac) or LESS.app (Mac) to compile your .less files
to style.css, and replace the 2 lines above by this one:
<link rel="stylesheet/less" href="less/style.css">
-->
This is where I run into the problem. Even though SimpLESS is compiling all the LESS files properly, and placing the result into a “style.css” file, in the “less” sub-directory, and the above lines have been replaced with , Safari doesn’t seem to load Style.css.
What have I done wrong?
I should also not that a script error is being generated:
file://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js The requested URL was not found on this server.
But the error occurs even when <script src="js/libs/less-1.2.1.min.js"></script>has been used to properly display the page.
EDIT: I guess it may be helpful if I included the HTML for index.html 🙂
First, with LESS being interpreted at the browser level, using less.js (everything works):
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet/less" href="less/style.less">
<script src="js/libs/less-1.2.1.min.js"></script>
<!-- Use SimpLESS (Win/Linux/Mac) or LESS.app (Mac) to compile your .less files
to style.css, and replace the 2 lines above by this one:
<link rel="stylesheet/less" href="less/style.css">
-->
<script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<div class="navbar navbar-fixed-top">
..... basic template content removed to save space ........
</div>
<div class="container">
..... basic template content removed to save space ........
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.js"><\/script>')</script>
<script src="js/libs/bootstrap/transition.js"></script>
<script src="js/libs/bootstrap/collapse.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Next linking to the LESS compiled “style.css”, which never gets loaded:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet/less" href="less/style.css">
<script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<div class="navbar navbar-fixed-top">
..... basic template content removed to save space ........
</div>
<div class="container">
..... basic template content removed to save space ........
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.js"><\/script>')</script>
<script src="js/libs/bootstrap/transition.js"></script>
<script src="js/libs/bootstrap/collapse.js"></script>
<script src="js/script.js"></script>
</body>
</html>
UPDATE: found the answer, will post it when stackoverflow allows me 🙂
Ok, figured it out. The stylesheet link code included in the comment was the cause. The actual link code should be:
This added “type” and put the correct “rel” value. So it ended up being an error in the comments inserted by initializr.