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
Related
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.
When learning CSS and making responsive column layouts, I was taught the flexbox method (but also the fact that you should avoid using it too much). Recently, I watched a newer video from teamtreehouse that uses columns, column-counts and so on, to make a responsive column design. Which one is better to use, or is there a third option that is the best?
Edit: Sorry, apparently it's an older video. The reason I'm asking is because it wasn't on my web design track so I wasn't sure whether it was relevant anymore.
Most modern page layouts are moving away from floated columns and migrating to flexboxes. You'll find that even bootstrap 4 are going to be basing their layouts on flexbox.
The main advantage of using flexbox I find is vertical alignment, which is revolutionary. Because before that was one of the biggest pains developers had to face. You can also re-order dom elements which is pretty cool. There's also flex basis, which allows you to have a div with a fixed dimension, and allow other divs to occupy the remainder of the width/height. The possibilities are endless!
TL;DR Flexbox makes your life hella easier. Only if supporting older browsers isn't an issue.
I came across the column-count in our codebase, and was surprised by it, after 6 years of being a frontend dev, I hadn't heard of it. So I dove into it a little bit and also found this thread. To answer the original question above:
When to use column-count
When you are using a lot of text or for instance checkboxes, and you want to order them into columns, column-count is a good option. It basically creates the columned layout of a news paper article for you. So you give the number of columns and the browser will calculate the height. The drawback here is that you often times don't want multiple columns on smaller devices, so you would have to put it within a media query. If you want to know more about it, read this article: https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/
When better not to use column-count
If you want to have more control over your columns and rows, for instance where certain content should go within the column, use flexbox or grid. Also when you don't want columns to have the same width, you are better of with flexbox or grid.
Note that CSS grid is not the same as the old floated columns. It sounds like teamtreehouse used CSS grids.
The CSS grid is a 2d system (rows and columns) while flexbox is 1d (either rows or columns). So they can be used in conjunction, css grids for the page layout and flexbox for the internal detail layout. See :
https://tutorialzine.com/2017/03/css-grid-vs-flexbox
You might want to take a look at Boostrap if you are already comfortable with CSS and want a responsive design. It's easy to pickup. I find it saves me alot of time and effort rather than coding your own CSS for every project.
When working with css you need to constantly think what browsers you want to support, and then choose which features to use. For that there's a handy website http://caniuse.com/
For example in your case you can see that ie8 doesn't support columns http://caniuse.com/#search=columns and neither it supports flexbox http://caniuse.com/#search=flexbox so if you want to support ie 8 I suggest you would use the tipical floated column approach. There's many grid systems out there but I'd go with as suggested above. http://getbootstrap.com/
Using Bootstrap 3 and saw that there is a revamped grid system (col-xs, col-sm, col-md, col-lg). I can see that sometimes you will want to have a few columns when viewing a site on a mobile phone or portrait mode tablet and hence the reason why someone may want to use col-xs-2 and col-sm-2 or whatever. However, I like to keep things simple: is it best to just stick with the "col-md-x" class and design the site with that in mind? So, any device viewport smaller than 970px will stack vertically (col-md breakpoint is 969px) . Personally, I think MOST designs look ugly and cluttered when you have more than one column on pages less than 750px.
Is the "col-md-x" class is a good baseline for a responsive site? For design purposes, it seems the most manageable and easiest to work with.
Beside the break point of your grids there will also be the #grid-breaking-point. At this point the b.e. the navbar collapses.
I agree with you its good idea to the set a main break point. If you don't change the #grid-breaking-point (768px) i should prefer the small grid (col-sm-) as the basic personally.
The break point of the the small grid (col-sm-) will be at 768px too.
The mobile first approach guidelines are recommended these days, meaning the sm size would be the best to target at outset, expanding the content into larger sizes as you build.
This is also reflected well in CSS, defining baseline styles for small screens and adding a series of "min-width:" operators to match up to the various breakpoints (768px et al)
I had experience with Twitter Bootstrap and Foundation, and I personally think the only thing I want to use is their grid system. Other features are just bloated.
So I read about the prospect of a grid layout. All of the articles I found are oriented toward an 'artistic' explanation (golden ratio ect). I am a coder at heart, I need a clear & logical reason to use a grid layout (for example: 'columns can be easily stacked on top of each other on mobile screen, and expand horizontally on larger screens'). Can someone give me the pros and cons of applying a grid system to my website? Personally do you think using a grid system is good?
If the answer is yes, should I use a premade grid system like from Twitter Bootstrap/Foundation or just make one for my own? All of the other features are unnecessary for me an irrelevant to my problem.
Thanks! :D
I agree with #kunalbhat that this might not be the best area to ask this but since you did I will try to answer it.
The grids are designed allow for speed and adaptability. Speed in multiple senses. The first part of the speed is the speed of writing the code. You can easily get the layout you want when you are using the grid system and everything aligns correctly. You don't have to remember your tables and columns and col-spans, etc.
The second speed is modifying your code. Inevitably you will need to go back and make changes, with a grid this is easily to do. Changing a col-md-7 to a col-md-6 easily makes a little tweak in the layout of your page that can easily be tracked and performed.
You mentioned responsive design, both Bootstrap and Foundation have responsive grids. The grids will snap to different sizes based on the viewport size. However you have control as well. For example if you want something to take 1/12th the screen in desktop, 1/4th on a tablet, and 100% on a phone that is easily done with Bootstrap and Foundation, both have grid classes that target specific viewports.
The also provide visibility classes based on those viewports.
For the "bloated" part that is easily solved. Using SCSS you can easily only import portions of a library. For example for one project I was on I only imported the Grid and it was considerably smaller.
I happen to think that this is a SO question, simply because of one of the main cons of CSS grid systems: semantic.
I think semantic is important for a web developer and having a class named col-md-7 is not the most semantic thing to do.
But I like grids, because they are easy and quick to use, so I started to use LESS. Because it allows me to use variables and functions(mixins) in CSS, I can build my own grid system on my CSS rather then on my HTLM.
You can start on Frameless and customize your own 'classes'.
I am building a responsive layout with Twitter Bootstrap and I am finding it difficult to keep the layout looking good across all sizes/devices.
In my early attempts I tried simply using the grid for placement, but page elements never ended up where I wanted them at different sizes. Now I am at the point where I am using media queries to override some of Bootstrap's styles and my own styles. This seems like it may cause a maintenance headaches down the road.
Rather than overriding styles I am thinking that I should add/remove the styles based on the screen's size by registering for media query events.
Can someone offer advice on good practices for adjusting the layout of a page at different screen sizes using Bootstrap?
I am looking for general advice, but I can post code and screenshots if that will help.
Update: Looks like media query events are not well supported.
Your on the right track. Use CSS media Queries. Firefox has a nice add on that enables you to adjust the page to a particular viewport so that you can see the changes pixel by pixel, though Im sure chrome would have something similar
There are no special tricks just because its bootstrap, as long as you have enabled the responsive stylesheet then you are pretty much good to go
This is a good place to start for media queries
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/