Our designer designed the website without using a grid system, however luckily I found a grid system to fit it with playing some settings. It's still 12 grids but gutter and column sizes are different than the bootstrap's.. and I want to ask some questions at this point.
Is this a good behaviour to customise bootstrap from Bootstrap's official customizer or Bootstrap Live Customizer?
What is the best approach to take while you want to customize and keep responsiveness at the same time?
The settings I want to change is gutter size and column sizes. I know how to use bootstrap but I have never tried to customize it. I thought customizing bootstrap beforehand would be a better practice than using padding/margin to almost every element, which I believe complex adapting responsiveness.
What is the proper way of calculating it? And for example on Bootstrap's official customizer, which fields should I change? How should I calculate sizes for all screen sizes?
He also used 1440 x 900 while designing.
What is the best way to adapt this grid settings below? Here I'm adding the grid settings that I could fit the design:
Bootstrap has a set of variables that you can override in your project if you want. _variables.scss
Max width: $container-max-widths,
number of columns: $grid-columns,
and gutter size: $grid-gutter-width-base.
What's more, you can set different gutter sizes for each screen size: $grid-gutter-widths.
You can use not precompiled css file of bootstrap, but scss version of it and compile scss files by yourself.
Update:
Ups, author uses less version of Bootstrap. So you can change less variables: #gridColumns, #gridColumnWidth, #gridGutterWidth, and so on.
Related
So I have a nasty project in my hand with a lot of bootstrap in it. The thing is, I need to make lock at a certain 1024px and I can't think of how. I'm locking the body at 1024px but bootstrap still changes the layout regarding the width and I can't simply remove all the column classes to use only 1 since it would not adapt itself any more.
What ideas could I use to achieve this?
You can use your own customized Bootstrap css (create one here)
instead of the original/regular one. In the 'Media queries breakpoints' section, just change #screen-xs, #screen-sm, and #screen-md to 1024px and then download the customized version.
Bootstrap is designed to be mobile first and scale up rather than down.
You could reverse this by having a lot of fixed values in your own css file that overrides the bootstrap media queries below 1024. Essentially this would be a lot of work because you would be reversing bootstrap's mobile first design.
This has been already asked on SO, and the steps to make Bootstrap 3 non-responsive are described in the docs. In your case, it sounds like simply using the col-xs-* classes will work as these columns don't stack vertically and "change the layout". From the docs:
For grid layouts, use .col-xs-* classes in addition to, or in place
of, the medium/large ones. Don't worry, the extra-small device grid
scales to all resolutions.
https://www.codeply.com/go/g1dEHU6EOX
Using the standard out of the box configuration for Zurb Foundation on a page that has a large number of labels and input boxes.
I am trying to figure out the best way to "compress" the page vertically yet maintain legibility.
Is there a proper or best way to do this while maintaining the responsiveness of Foundation?
The proper way to do this is using the framework in its "sass" variant, so you can edit the _settings.scss file where you can find vars for almost every aspect, you can then:
Reduce line height
Reduce font size
Reduce padding of buttons, labels and form elements
Reduce the margin between elements
Hope this helps
It depends. Do you want the change globally across the entire project? If so, then ideally you would update the project's Scss settings. If not, then just add an overriding style that is specific to your page.
There is a lot of stuff out there on making BS3 non responsive but it all seems to focus on LESS variables. I'm using static CSS though.
http://getbootstrap.com/examples/non-responsive/
http://bigwilliam.com/turn-off-responsive-behavior-for-bootstrap-3/
Steps 1 (remove viewport) and 2 (static container width) are easy enough. But how do I set the media query breakpoints in CSS?
There's an option in Bootstrap to customize your download of Bootstrap CSS to fit your needs. If you press the link customize along Bootstrap's website, it will take you to a page that lists all the components and utilities that come included with the default download of Bootstrap CSS. You can add/remove any of these items to create a version of bootstrap that fits your particular needs.
For you case, remove the following options (Under Common CSS):
Print Media Styles
Responsive Utilities
There is also a section where you can customize and compile the LESS variables into a custom .css file. The one you could consider changing is the Media Query Breakpoints settings, but there are lots of customization options for you to browse through.
Take a look here at Bootstrap/Customize to see all the options you can change, and hopefully that will help!
set minimal width to html or body element, in that way page won't resize if browser width is less than min-width specified. but whole point using bootstrap is to easily develop responsive websites, so you are doing something terribly wrong if you want not responsive bootstrap.
html { min-width: 1000px; }
I need to use 1170px for content however i'm worried about column sizes and gutter widths. I Have three big columns with 300px and one small 150px column. Gutter width is 40px. I'm creating this on PSD and wanted to learn if it is okay for Bootstrap.
Even if the defaults for Bootstrap won't work with your site out of the box, you can customize virtually every aspect of it and download that customized copy to include in your project.
http://getbootstrap.com/customize/
Either way, you can include Bootstrap via the CDN links provided on the Getting Started page, so you can include them without adding a bunch of files to your project to quickly test whether or not the defaults will work.
So I have looked all over the web and thei site and can't quite figure it out.
I want to create a custom grid in Bootstrap. The container should be 5760px and have 36 columns with 20px gutters. I know this is ridiculously large. but what I am trying to do is essentially have 3 12 column grids (each 1920px wide) side by side.
I've tried the custom build for Bootstrap but I don't really understand the container / grid system I guess. Also I am using Sass as opposed to Less. So that presents another twist.
If I could just get the css and by pass all the Sass / Less stuff that would be great.
Ok so im going out on a limb here, but if you're working with bootstrap and you want to configure the basics so much.
What you can do is download a customized version of it.
Take a look here : Boostrap 3
Here you will be able to customize the amount of columns you wish to work with : Custom Grid Count
And you will also be able to select the container size. : Container Width
Along with all the features of bootstrap.. And all from bootstrap themselves.
Once you have all your fields filled in and edited to your spec, scroll to the bottom and 'compile' it!
As an answer goes its really the best i think I can offer!