Menu
I'm relatively new to both bootstrap and less and this is a test run. The goal is to take the bootstrap classes and turn them into simple and semantic classes using less. I keep getting error messages saying that .col-sm-12 and .col-md-8 are undefined.
How do I do resolve this issue.
/*less styles file*/
@import "bootstrap.min.css";
@boom: #ea7000;
@screen-sm: ~"(min-width:768px)";
@screen-md: ~"(min-width:992px)";
@screen-lg: ~"(min-width:1200px)";
.tim {
height: 200px;
@media screen, @screen-sm {
background-color: black;
.col-sm-12;
}
@media screen, @screen-md{
background-color: @boom;
.col-md-8;
}
}
424
You should import the bootstrap.lessfile. So, download the full bootstrap project, and copy out the less folder. It contains everything. And then put the less folder in your project. Also make sure to add the less.js file to your project if you want to get your less compiled while your working. Look at lesscss.org for more information. And also make sure that you have a local server like mamp or xamp, because you can't see the results if you are just serving static html from file:// ....
In your custom less file do something like this:
custom.less
@import "../less/bootstrap.less";
section {
.make-row();
}
.left-navigation {
.make-sm-column(3);
}
.main-content {
.make-sm-column(9);
}
html
<head>
<link rel="stylesheet/less" href="css/custom.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
</head>
<section>
<div class="left-navigation">
</div>
<div class="main-content">
</div>
</section>
If your goal is to make beautiful semantic HTML using Bootstrap, I would suggest you give up now or face insanity. I discovered quite painfully that trying to get semantic markup out of BS 2 is impossible. It requires complex nesting rather than a mix-in architecture to achieve what you want, even if you use less or sass. Also, the classes and ids are referenced by its JavaScript components so it can't be changed. You can create your own styles, but it defeats the purpose of using a framework like BS. I can't comment on version 3 and would love to hear other people's experiences with it.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
