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.
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.
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.
Which is the best way to convert/change an existing drupal site to a responsive pattern? I have searched lot, but not getting any right direction or guideline. My current site is running with drupal 7 and zen theme. Do I need to change the theme to responsive one like bootstrap or there have any other better solution.
I think you got the answer in your question! I used the Bootstrap theme for Drupal to make my websites responsive. It works perfectly. You can find it here:
Bootstrap project for Drupal
The theme is shipped with sub-theme starter kit you can use to pimp your own theme safely.
You don't convert the Drupal site but the HTML output, to responsive.
How the HTMl is generated (the Drupal theme) is not relevant.
Regardless of what theme you are using, something that I found useful is just open your website in Chrome, and using Developer tools, I add media queries as required to a new CSS, fixing only what looks too cluttered or small in the simulated device.
Some steps include:
Add a new folder to workspace (Sources tab)
Add a local (initially empty) css link to the drupal header (to work with the actual site, or you'll have to take the task to generate an off-line version of your site, fixing all the links to point to your local computer, or to setup that theme in a local server, as MAMP)
replace all the WIDTHs from container that prevent the site to be reduced with the browser's viewport (as you reduce the window size) with MAX-WIDTHs (same value), and set a new WIDTH to 100%. Now your design will be flexible under the original width.
hide, float, or change the position of divs to flow nicer with the new viewport width.
A trick I use a lot with big marketing elements (not article content with lots of text) is to make them elastic, so they look always the same relatively to the viewport. To accomplish that: re-define font-sizes AND all dimensions in em. Then and add "font-size: 1vw;" to the first parent that can be proportional to the viewport's width or matches the full viewport, and when your viewport resizes, all the elements will scale as well.
setup a few classes as .mobile-hidden or .desktop-only to hide/show redundant elements in mobile view.
(Obvious) make texts bigger and add give enough padding to small elements to be easily touchable.
Then just upload your CSS to the theme and change the url in the link you created before in the header.
Voilá: responsive theme.
Note: Keep in mind many scripts these days modify the DOM and new elements might need to be styled later, once you run some cart, or functionality which generates/changes elements and their styles.
Good luck.
I'm using the Bootstrap framework for a web application. The responsive design works very well for the primary part of our site which needs to work on smaller screens. However, there's an admin section where the responsiveness is both not that necessary (will be administered on desktops) and gets in the way (the forms/tables require tweaking to work at smaller sizes).
Is there an easy, scalable way to turn off bootstrap responsiveness for certain pages?
Right now, we have a single bootstrap .css file with the #sizing elements included. I could separate out boostrap.css and bootstrap-responsive.css and then only call responsive on pages that need it. I presume that would work, but would mean yet another setting (it's a cakePHP app).
Ideally, I'd like to assign a class to the body or main container that would override the responsiveness -- <div class="container non-responsive">
One other note -- I'm really only concerned about the responsiveness below 1024px in this case. The way it expands in larger screen sizes works well in the admin section.
Separating them will be easier even though it's another setting. When you download Bootstrap from their home page (http://twitter.github.io/bootstrap/, instead of via their Customize page or via the GitHub project) it already separates the responsive styles into a separate file.
However, you can add your own styles that are more specific than each of the responsive styles in Bootstrap and override them. It could get hairy though because you'd basically have to repeat everything in bootstrap-responsive.css and override manually for each style property specified by Bootstrap's responsive file.
A better approach might be to edit bootstrap-responsive.css and prefix each style within the media query with ".responsive " and add the "responsive" class to the body element of the pages that you DO want to be responsive.
Hope this helps.