Bootstrap is a CSS(Cascading Style Sheets) library developed by Twitter that lets you create responsive websites with easy to understand naming convention and well-designed grid system.
It has gained popularity due to its easy of use and pre-processor support, here are some good practices that will make your Bootstrap powered environment clean and easy to manage and maintain.
Use PreProcessors
Bootstrap offers Less based builds, these builds let you choose what modules you require and are needed to be enabled and helps you override the style sheets with writing lesser lines of the stylesheet.
Things like colors of text and background color of elements classes like navbar can be changed by changing the information stored in the variables.
Use of PreProcessors can make your Bootstrap lighter and have a cleaner code base, that is not bloated by the defaults.
Use scripts depending on the structure and modules
What I mean to say is if you website does not contain large amount of Bootstrap, then don’t use the bootstrap.min.js instead use the individual module files in development and later minify them to one file in production, so if you have a bootstrap based drop-down menu, you don’t have to use the complete bootstrap JavaScript library and only use the dropdown.js with its helper files.
This will make your website lighter and less bloated with things that are not going to be used and the client has a smaller file to render.
These are all the major steps I take while developing a website with Bootstrap.
Thank you for reading,
If you have any question feel free to leave a comment below.
