I'm developing a website using LESS and I can't seem to get it working. I just keep getting the following message:
Less has finished and no sheets were loaded.
I'm running on a http-server web server to see the effect of the less and my Chrome Console has no errors or 404's etc. The code I have in place is super basic as I'm just testing for the time being. Only thing I can think it might be is a script ordering issue or maybe a conflict?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>TrakMan | Re-Brand | Version 1</title>
<!-- LESS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<!-- Styles and Fonts -->
<!-- Font Import -->
<link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Trakman Styles -->
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
</head>
<body>
<!-- JS SCripts -->
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap JS CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Font Awesome CDN-->
<script src="https://use.fontawesome.com/c704ae342d.js"></script>
</body>
</html>
variables.less:
// Colours
#primary: #F86301;
#primary-light: #FF8C3A;
#primary-lighter: #FFA564;
#primary-dark: #C75200;
#primary-darker: #9C4100;
#dark: #222;
#light: #E7E7E7;
// Fonts
#family: 'Maven Pro', sans-serif;
#size: 14px;
styles.less:
#import "variables.less";
html {
font-family: #family;
font-size: #size;
}
body {
background: #dark;
}
Related
I have this html code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/static/index.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script src="/static/index.js"></script>
</head>
<body>
<div class="container-fluid" id="content">
<div id="suggestion_modal_content" class="modal">
<div>
</div>
Close
</div>
</body>
</html>
now, this is how the modal looks like (after I am adding text):
when I use google dev tools, this is the modal element css values:
when I remove the line max-width:500px, the page looks like I need (full screen).
I tried to add:
.modal{
max-width: none;
}
but it does not work.
What am I doing wrong?
The jQuery Modal CSS is being included after your custom CSS. Because both stylesheets use the same selector (.modal) with the same specificity, the one that comes last in the cascade (in this case, the jQuery Modal CSS) overwrites the other's style.
You should change the order of the stylesheets in the <head> element, and ensure your custom styles always come after any vendor styles. This will allow you to overwrite vendor CSS while using selectors of the same specificity without having to use !important.
<!-- jquery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- custom -->
<link rel="stylesheet" href="/static/index.css"/>
<script src="/static/index.js"></script>
I am writing a commandline tool for myself to generate a quick html bootstrap starter and I have an index page, which is supposed to include a basic navbar at the top and a footer that sticks to the bottom of the page. I have used this same template before for other projects and it worked perfectly. But for some reason it won't work now. all the content is stuck at the top of the page. If I inspect the page, the entire html tag contents are at the top of the page and most of the page is blank document. Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="static/css/custom.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<title>Bootstrap Starter</title>
</head>
<body class="d-flex flex-column">
<!-- Navbar-->
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-text">
Bootstrap Starter
</span>
</nav>
<!-- Content -->
<div class="container content"></div>
<!-- Footer-->
<div class="footer">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script><!-- Footer bar-->
<div class="p-4 mt-5 bg-light text-center"><small>© Your Name, </small></div>
</div>
</body>
</html>
And here is the css:
* custom styles */
/* Sticky footer */
html, body {
height: 100% !important;
}
.content {
flex: 1 0 auto !important;
}
Can anyone tell me why this isn't producing the desired result? Thanks.
Your css was moved into the document and now it works. What this indicates to me is an issue with the external stylesheet. I notice that you have 2 custom stylesheets, 1 before 3rd party stylesheets and 1 after. The browser respects the order, so if your code was in the first stylesheet the 3rd party stylesheets may have overwritten your custom rules.
When using the blockquote class in Bootstrap 4.1.3 the effects are applied except for the sidebar.
Here's how it looks in tutorials:
Here's how it looks in my browser (chrome):
I've tried it in different browsers, and I couldn't solve it with this post.
Is it just my computer? Is there another css class overriding the sidebar? Thanks for your help.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<title>Bootstrap</title>
</head>
<body>
<div class="container">
<blockquote class="blockquote">
<p class="mb-0"> Text for the blockquote. Text for the blockquote.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384- q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous">
</script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous">
</script>
</body>
</html>
The post you linked to seems to be encountering this error because he is using a beta version of Bootstrap. Is it the case for you somehow? Have you checked the codepen linked in the post?
I have this project where I applied a theme (getelella in exact) where when I left it looks good and fine (save the project and shutdown pc), but when I open my project again the layout is messed up. I created a new project and it happened again. Can you help me guys what could be the problem here please?
Update, additional info:
At every time I freshly open my project, I run it to check my current progress but it doesn't start to build and it stays there for 20 mins before it runs the project.
As requested in the comment:
<!-- Bootstrap -->
<link href="~/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Font Awesome -->
<link href="~/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<!-- NProgress -->
<link href="~/vendors/nprogress/nprogress.css" rel="stylesheet" />
<!-- iCheck -->
<link href="~/vendors/iCheck/skins/flat/green.css" rel="stylesheet" />
<!-- bootstrap-progressbar -->
<link href="~/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" />
<!-- JQVMap -->
<link href="~/vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet" />
<!-- bootstrap-daterangepicker -->
<link href="~/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" />
<!-- Custom Theme Style -->
<link href="~/build/css/custom.min.css" rel="stylesheet" />
<!-- jQuery -->
<script src="~/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="~/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="~/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="~/vendors/nprogress/nprogress.js"></script>
<!-- Chart.js -->
<script src="~/vendors/Chart.js/dist/Chart.min.js"></script>
<!-- gauge.js -->
<script src="~/vendors/gauge.js/dist/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="~/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="~/vendors/iCheck/icheck.min.js"></script>
<!-- Skycons -->
<script src="~/vendors/skycons/skycons.js"></script>
<!-- Flot -->
<script src="~/vendors/Flot/jquery.flot.js"></script>
<script src="~/vendors/Flot/jquery.flot.pie.js"></script>
<script src="~/vendors/Flot/jquery.flot.time.js"></script>
<script src="~/vendors/Flot/jquery.flot.stack.js"></script>
<script src="~/vendors/Flot/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="~/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="~/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="~/vendors/flot.curvedlines/curvedLines.js"></script>
<!-- DateJS -->
<script src="~/vendors/DateJS/build/date.js"></script>
<!-- JQVMap -->
<script src="~/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="~/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="~/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="~/vendors/moment/min/moment.min.js"></script>
<script src="~/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Custom Theme Scripts -->
<script src="~/build/js/custom.min.js"></script>
I had a similar problem with some static html pages, and I have found out that there were a couple of JavaScript libraries placed in the wrong place. So I sought for the paths in your script. I see that all of them begin with a tilde:
<script src="~/vendors/bootstrap-daterangepicker/...
<script src="~/build/js/...
I have changed the paths in one of my pages and replaced two dots with a tilde and... bingo! the layout was lost. Then I have changed them back to two dots, like this:
<script src="../vendors/bootstrap-daterangepicker/...
<script src="../build/js/...
and... voilá! the layout was back again.
I suggest you check carefully your paths and change the beginning tilde to dots or whatever be needed and see if you can get your project to work.
This code works, bootstrap is loaded inside of the head tag.
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<!--some stuff-->
</body>
</html>
But when I put that code in a component.html file and import it:
<html>
<head>
<link rel="import" href="component.html" >
</head>
<body>
<!--some stuff-->
</body>
</html>
Bootstrap doesn't work.
Can someone help me?
component.html:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
You would need to place this script tag, just before the closing body tag
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Jquery library must be loaded First or prior to this https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js file.
As this bootstrap.js is written using Jquery itself we need the main library to be loaded first so that the code inside the bootstrap file is meaningful, Else the browser compiler has no clue of the code, Hence the error.