Atm I'm using col-lg, col-md, col-sm and col-xs
happens that col-xs is set to width 768px, I guess.
How can I create a new col-xxs or something smaller for eg. width 480px ?
You can use the following to accomplish this. I personally link to the bootstrap CDN in my projects and keep a local version of bootstrap so I can tap into its mixins for my site specific styles which is where I would place the following...
#media (max-width: $screen-xs-min) {
#include make-grid(xxs);
}
Just had exactly the same need and wondered why I had never had it before. This is a pretty in-depth discussion about it;
https://github.com/twbs/bootstrap/issues/10203
And I found the most useful gist to be from Jakobud here;
https://github.com/twbs/bootstrap/issues/10203/#issuecomment-42162250
Gists;
SCSS: https://gist.github.com/Jakobud/c057577daddbde4dd709
LESS: https://gist.github.com/wdollar/135ec3c80faaf5a821b0
I can't speak for the LESS version, I used the Sass version and it's been excellent.
Unfortunately #4dgaurav's answer is not enough to introduce new breakpoints when working with Bootstrap's LESS source. There's more code to just overriding variables.
If you are using LESS you could use these two additional breakpoints which work (tested!): https://github.com/brgrz/bootstrap-breakpoints
HTH
Related
I am just asking, since didn't find anything relevant here.
Is using media queries together with display: none a legit thing for creating a mobile version of the web-site? I mean, is this an acceptable practice or is there another way to do so?
I just used it on a project, looks alright, but maybe there are some snags here?
Thank you in advance.
You could only work with media queries instead of having one default css. In that case you wouldn't need to set something that you don't use in other resolutions.
e.g.
put here everything which you don't wanna show in the lower resolutions:
#media only all and (min-width: 1024)
i.e. if you're on a tablet is there a class added to body called 'tablet' or something similar..?
Bootstrap - http://getbootstrap.com
No. You have to do that yourself.
However, Bootstrap uses Media Queries and some Helper Classes to style the content for different devices (depending on the screen size)
I guess you want these features:
http://getbootstrap.com/css/#responsive-utilities
If you are using the last version (3.1.1)
You'll be able to custom the interface depending on the current size of the screen using CSS classes.
Edit:
On older versions such as 2.3.2 it's here:
http://getbootstrap.com/2.3.2/scaffolding.html#responsive
The new version is more powerful with more choices but the old one is easier to understand. (visible-tablet, etc.)
I am just getting started with less. In an attempt to mmake less ugly Bootstrap's multitude of classes on tags, I have attempted to write some simple wrappers in less.
The entireity of my code is below.
// Import boostrap.
#import "./less/bootstrap.less";
// General classes for content.
focus {
.span12;
}
content {
.span8;
}
side {
.span4;
}
The purpose of this less file is to provide nice looking wrappers that do a single thing, such as Bootstrap's .span12 class. I will, in time, extend this to buttons of sorts.
Either way, I am running into a problem when compiling the less file using lessc style.less.
The error it gives is:
NameError: .span12 is undefined in /srv/http/www/style.less on line 6, column 5:
5 focus {
6 .span12;
7 }
I have found some documentation with the .makeColumn(i) class but the problem with that is Bootstrap already has perfectly good media queries and I wanted to avoid writing my own.
Is there anyway to wrap the classes that already have the media queries or do I need to just suck it up and write my own for my wrappers?
You are going to run into a few major problems in this approach.
First, there are issues in that Bootstrap is dynamically generating the .spanX series of classes, so they are not immediately accessible as mixins, as I note in this answer.
Second, some of Bootstrap's span code is not set by the .spanX series, but is done through an attribute selector of [class*="span"] (see, as of this writing, line 602 of the mixins.less file; they are also extensively used in the responsive files for the #media rules). This selector code would not be picked up by a .span12 inclusion of code, and if you are not putting .span12 in your code, then your code will not have those properties applied. So you need to work around that.
There may be other issues not immediately obvious, but the point is, if you want to use Bootstrap for grid purposes (especially responsive), it is probably best to use it as it is designed. If you do not, then it is best to go and copy the Bootstrap code and modify it as you desire to make your own reduced grid code (if your intent is to use less overall classes in your html).
The Twitter Bootstrap 2.0-wip branch on GitHub includes a new responsive layout system. It's great for apps that need that level of responsiveness, but I'm developing a web-only app that needs to have a completely fixed layout.
Is there any easy way to override Bootstrap's responsive layout?
You can see it in action by cloning their repo, branching to 2.0-wip, and opening docs/scaffolding.html in your browser.
Thanks in advance!
Note, in 2.0.1+ the responsiveness has been moved to its own file, so it is turned off by default. To turn it on you include bootstrap-responsive.css or responsive.less.
http://twitter.github.com/bootstrap/scaffolding.html#responsive
Just remove the #media queries found in the bootstrap.css file on line 2684. That should eliminate all of the responsive qualities and just leave the standard container width intact.
#media (min-width: 768px) and (max-width: 940px) { ..... }
Just compile your own custom bootstrap on http://twitter.github.com/bootstrap/customize.html, unticking the responsive features.
Alternatively you can include following file from BootstrapCDN: http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.min.css
Ok, so Less.js has come along, and it seems that my dreams of creating a CSS framework (especially a 'grid' system), with an 'abstracted' CSS language might be about to come true.
That is, 960 and Blueprint are great and all... but it so irked me to put style information in HTML markup, such as:
class="article grid_4 pull_2"
or whatever the syntax was :)
So, now it seems that we can do it this way:
.article {
.grid_container();
.grid_four();
.pull_two();
.last();
}
Weeeeeee!
So, I'm about to get stuck into developing this for myself -- but I'm sure there are some brainiacs out there that have already done it -- so before I get into any heavy lifting...?
Any leads?
Kindly
Daryl.
This is the CSS framework you're looking for - http://semantic.gs/
The Semantic Grid System - Page layout for tomorrow.
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
All without any ugly .grid_x classes in your markup. Oh, and did we mention it's responsive?
Brought to you by LESS.js and the creator of 1KB Grid.
I checked out less , it was a push between that and the new sass (scss) syntax, but what made me choose sass is that it has a way to turn css into scss code.
The round trip was something I definitely wanted. Once that happened, then Compass presented itself. I was going to try using something to code everything in python, but it makes perfect sense to me to preprocess the css, especially since I'd like to use HTML5, and if the spec changes, then I can tweak the generation.
BTW folks, I've started that framework I was talking about.
http://github.com/DarylAntony/lesser
I'm having fun with it.