Compile Twitter’s Bootstrap 3 without responsive features

Bootstrap 3 will be mobile first. No more separate responsive CSS file. Nice, but what if you don’t need / want the responsive features for some reason? So i try to compile Compile Twitter’s Bootstrap 3 without responsive features.

I should expect this in print.less, but for this reason i can’t remove responsive-visibility/responsive-invisibility. You will find this functions in mixins.less. (see: )
I also drop jumbotron.less. Why should i need this at all?

After this i look to: “./modals.less:@media screen and (min-width: @screen-tablet)”, “./carousel.less:@media screen and (min-width: @screen-tablet)”, “./navbar.less:@media screen and (min-width: @grid-float-breakpoint)”, “./forms.less:@media (min-width: 768px)”. The hardcoded 768px is a mistake i think, see also: https://github.com/twitter/bootstrap/pull/8454.

@grid-float-breakpoint will defined in variables.less as “@grid-float-breakpoint: @screen-tablet;”. On the first sight i should think this should be: “./modals.less: @media screen and (min-width: @grid-float-breakpoint)”, “./carousel.less:@media screen and (min-width: @grid-float-breakpoint)”, “./navbar.less:@media screen and (min-width: @grid-float-breakpoint)”, “./forms.less:@media (min-width: @grid-float-breakpoint)”. Cause this setting depend on a breakpoint which should be independent of the grid sizes (@screen-tablet). see: https://github.com/twitter/bootstrap/issues/8459

To compile my first non responsive version i have set them all to @grid-float-breakpoint with @grid-float-breakpoint : 0px. This works well for the forms where this breakpoint sets the right alignment for the form labels. Now the alignment is always right which could be okay for a non responsive site. For the dialog the effect will a fixed width of 560 pixels in stead of a 100% (auto) width. For a non responsive site we should prefer this too. Overall it doesn’t matter cause i will replace grid.less and don’t use @screen-tablet any more.

admin

Hallo Jack,

Thanks for your response. I will check the github links.
About the stretchy web sites and the responsiveness. Please read also.
The layout will be fluid for all grids now, but the .container class will give your website a max width (depending on your screen width). The large grid container has a max width of 1170 pixels. For a max width of 940 you will need one media query only.
Yes you’re right about the responsiveness from <768. The Small grid will stack from 767 pixels and lower. You can change this value easily, see: http://stackoverflow.com/questions/17919225/twitters-bootstrap-3-grid-changing-breakpoint-and-removing-padding/17920693

Thanks for this, I’m making a Chrome Extension which is only 500px wide and thus having it responsive sucks.

One issue I have though with the CSS: When I have a dropdown menu in my navbar it is pushing the navbar area down and the list items are stretched horizontally (like the mobile menu). I would like this to work as if I am on a desktop (a nice overlay popup). Any idea how?

So as you can see, the popup is 500px (with a set height). That format is exactly how I want it, without the collapsible button to trigger the menu. To get it like this, I used the CSS you provided at GitHub.

However, when I click on the “dropdown” link, I get the following: http://i.imgur.com/14lgS0v.png I would like the dropdown to function as if I’m on a full desktop view (if you understand).