Using Bootstrap CSS Framework in Your Project

null is the most popular and widely used CSS framework and there is a good reason for its popularity. It gives developers well styled CSS for the elements used most in the modern web. Things like buttons, form controls, navigation and much, much more. Since it’s written in LESS it keeps the CSS of bigger projects such as GroupDocs well organized so it is easy to follow and maintain your CSS code. Bootstrap is mix of CSS style templates and JavaScript plugins. This article focuses on using Bootstrap CSS framework. Keep in mind that the framework focuses on giving users a vast set of CSS templates that ranges from basic typography and buttons, to menus, forms and tables. AT the end of the day, the CSS files of the library are packed with a lot of code, some of which you probably don’t need, depending on your project’s size and content. Personally, I wouldn’t recommend using Bootstrap CSS framework in small projects, for example small business web sites and portfolios, business card website or small WordPress templates.

Bootstrap It or Not?

Start by deciding whether you need using Bootstrap CSS framework in your project. Check the design: what functionality and what kind of elements are in your project? If you need just one or two Bootstrap modules or plugins, just search for stand-alone solutions. Don’t include the whole framework just so you can use the buttons or the input styles. Instead, copy the CSS from the official site and download the standalone JavaScript plugin from Bootstrap’s official git repository. But if you decide that you really want to use Bootstrap CSS in your project because you’ll be happy to use maybe half of the styles, how do you exclude those you don’t need without braking the framework code? First, learn how to compile LESS files. There is a lot of free software which can do this for you, so you should not be worried about it. Just make a quick search on the subject and pick a software solution which suits your taste. I’m currently using Crunch. You can also try to find a plugin which compiles LESS to CSS for your favorite text editor. You’ll probably find one. Now let’s strip the Bootstrap down a bit. Assuming you’ve downloaded the whole pack of LESS files, for now you just need to open the major file: bootstrap.less. As you can see, all the other files in this folder are included in the main one, so every time you compile this file, all of the code from the rest are included in the output CSS file. When I start optimizing Bootstrap for a new project I first comment out all of the files, except the following ones: variables.less, mixins.less, reset.less, layouts.less, type.less. Commenting a line in LESS is pretty standard. Just put “//” at the beginning of the line we want to be ignored by the browser.

Why Should We Keep Those Files?

variables.less and mixins.less are pretty vital and necessary in order for Bootstrap to function normally, because those two files store pretty much all of the variables and mixins (functions) that are used in the rest of the files. reset.less contains basic CSS reset styles which you should have in any project, but if you have better reset styles you can use them instead by placing them in the same file. type.less contains pretty much Bootstrap’s whole typography so you’re strongly encouraged to edit this file so it reflects the design of your project. If you’re uncertain how to use it, just comment this file out as well.

How Do I Usually Proceed with the Optimization?

I then start to uncomment the other files necessary for my project. For example I have a few buttons, text inputs and navigation bars in the design of my new project. In order to use Bootstrap’s styling for them, I’ll uncomment the following files: buttons.less, forms.less, navbar.less. I also have one modal window so I’ll need modals.less as well, so I’ll include that as well. I then extend and change the code in those files as much as necessary until everything it is styled according to the current design. To optimize your bootstrap.css as much as possible, comment out or remove the styles you’re not using from the loaded .less files. If you don’t understand the LESS syntax it is probably better to avoid doing that so you don’t mess up something in the files, which could results in an error, making it impossible to compile the framework. Of course, after compiling you can add your own styles at the end of bootstrap.css, but you’re strongly encouraged to learn LESS so you can modify the existing files or to create new less files yourself. You can look forward to a future article explaining the basic things about LESS in order to write your own styles and other goodies with or without resorting to Bootstrap. AR