When it comes to the front end design framework which is easy to use and is responsive for all screen. The first thing that came to our mind in bootstrap. If you don’t know bootstrap try learning it here with bootstrap . In this post we will talk about mistakes and best practices of bootstrap and css.
- Do not put row and col classes under same tag.
- While customizing bootstrap do not customize the bootstrap.css file instead make another css file and override the classes there and just load the second file after bootstrap this will solve the purpose.
- Avoid using transforms and translate.
- Use vertical align and horizontal align instead of giving position from top.
- If you are writing for IOS. First get to know te media queries they use as they are different from other devices.
iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}
iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}
iPhone 6:
@media screen and (device-aspect-ratio: 375/667) {}
iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}
iPad:
@media screen and (device-aspect-ratio: 3/4) {}
- Do not use position: fixed as it is not supported in iPhones and will break.
- Writing media query don’t override the breakpoints of bootstrap at few places. If you are doing it do modify the breakpoints of bootstrap also.
- Always use inspect element to check if your elements are covering the space they need to. Header should contain the whole header footer should cover the whole footer etc. Like in the image banner covers the whole banner.
These are few simple things you can use or avoid to get best out of bootstrap. This is just a simple things that I figured out during my last project.
Also if you are not using less try using it. It is awesome.
