Bootstrap is one of the best and most used HTML/CSS/JS front-end frameworks. Almost any web developer who has made a website or two has heard of this popular framework. It offers so many ready-made components and resources, Bootstrap can significantly speed up your application development.
Every good developer is concerned with saving every second in their development process. Being efficient means faster deployment - the sooner and more often we deploy, the faster our end users get a better product. Therefore spending a few hours or days on planning the process and strategy can save us not only a few minutes, but many hours.
I personally have been working with this framework for the last 4 years on 90% of my projects. In this article, I would like to share with you a few tips which can help you to speedup your application development without missing some of Bootstrap’s awesome capabilities.
Understanding Bootstrap
Even though it’s a framework that is very easy to start with, don’t be fooled by its simplicity at first sight. Before rushing into a project, spend time playing with the framework and getting the lowdown on the key pieces of its infrastructure and exciting components. This will help avoid The 10 Most Common Bootstrap Mistakes.
Dedicate an hour to read documentation on Bootstrap’s site or learn more from a great post on Toptal’s blog, What is Bootstrap? A Short Tutorial on the What, Why, and How. And, great article Bootstrap 3 Tips and Tricks You Might Not Know on scotch.io.
If you find reading documentation a boring task and you would rather read some code instead, then the best place to start is Bootstrap’s website. Open up your web inspector, scan through the site’s source code, and check every code block and its elements. It is probably one of best and quickest ways to grasp the basics.
Dig into the page structure and learn how the layouts are constructed.
… resize your browser window or use Chrome’s Viewport Resizer to learn more about media query utilities.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width:
@screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width:
@screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width:
@screen-lg-min) { ... }
@media (max-width: @screen-xs-max) { ... }
@media (min-width:
@screen-sm-min) and (max-width: @screen-sm-max) { ...
}
@media (min-width:
@screen-md-min) and (max-width: @screen-md-max) { ...
}
@media (min-width:
@screen-lg-min) { ... }
… and how and when to use them, get familiar with column classes for the best responsive design results.
Take a look at W3Schools where you will find a complete Bootstrap reference of all CSS classes, components, and JavaScript plugins - all with “Try it Yourself” examples:
- Bootstrap’s grid system explained: grids in Bootstrap
- Basic CSS classes: typography, buttons, forms and form elements, helper classes, images, tables
- Individual components: glyphicons, drop-downs, navs.
Inspect source code and and try to get acquainted with as many class names as possible. Learn about their use cases - the hows, whens, and whys. This will help you move forward faster when writing HTML and styling UI elements. Learning more about these components will help you avoid bloating your stylesheets with lots of unnecessary duplicate code. Keep it lean and clean by using and reusing existing components, instead of creating too many new ones that do the same as the ones that already exist within the framework.
This is especially important when working in a team of several developers. Make sure you do not end-up writing tons of duplicated code creating too many styles for the same case each time over and over again when translating new designs to the code. Keeping the UI development consistent and well documented with UI style guides can also add a couple of knots up to the productive teamwork. In addition, you will find that when adding new features or pages to your application you will move forward with less frustration. I have been involved in over a dozen of big projects, and in comparison I’ve seen a number of cases where the framework was literally hacked and every time the new CSS code was added it would break UI on other pages. It would get pretty exhausting going through all the site and fixing these types of bugs. Not only that, think about the cost and all the money spent on extra developer time and QA help.
7 Most Common Time Wasting Styling Mistakes
1. When centering text or divs
If you need to center a div and/or content, you can use one of these classes:
Use text-center
I am centered text
… or center-block
not .center or
2. When changing font size
If you need smaller or bigger fonts, you can use one of these classes:
I'm bigger paragraph text.
I'm smaller paragraph text.
In case you need bigger or smaller headers don’t forget about .h1, .h2, .h3, .h4, .h5, .h6, .small. Use it like this:
Smaller Title with .h2
Bigger Title with .h1
Smaller Title with .small
3. When clearing floats or forcing elements to self-clear its children
No need to create classes like .clear, you can always use Bootstrap’s .clearfix instead.
...
4. When killing .row class margins
Just use .clearfix instead of defining your own styles (or worse, using inline styles):
...
5. When unstyling or inlining unordered lists and other elements
Remove the default list-style and left margin on list items. This only applies to immediate children list items. In case you need to apply the same for nested lists, you will need to add the class name on those as well.
...
...
Similarly, for checkboxes or radio buttons, we have .checkbox-inline and .radio-inline.
And you can always add .form-inline to your forms (which doesn’t have to be a ) for left-aligned and inline-block controls.
6. When sizing buttons
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
7. When floating and aligning items to the right or left
Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins with any CSS preprocessor.
Use .pull-right, .pull-left, .text-right, .text-left instead of .right, .left, .left-float, .right-float.
...
...
Easily realign text to components with text alignment classes.
Left aligned text.
Right aligned text.
Do Not Customize the Framework Core Files Directly
When working on big projects, I found that the best way to use the framework effectively is to build off of it and not customize its core files directly. This concept is similar to other platforms and libraries you might use for the project.
Although, if you are building a small site and have a design mockup that might not require much change or updates, you might find that customizing the framework for your needs is a better option. For example you might want to strip out all of the stuff you don’t need directly in the framework files, or you can go to Bootstrap’s site customize section where you can easily configure all the components, variables, and jQuery plugins to get your very own version. In this case, you might speed up your site development and cut the time styling or dealing with overrides.
However, if you are starting or working on a big site with several developers or more - it is best to keep things separated and well organized. Move the framework files outside the main custom CSS folder and keep it in a non-edit non-version folder and remove unused CSS by utilizing Grunt or Gulp plugins grunt-uncss or gulp-uncss. Another alternative to keep it separate is to serve it through CDN. Having the framework’s code separate and untouched gives you a better and faster option when upgrading it to the latest version. It also helps to minimize a number of scalability and styling issues, or being slowed down when making additions with rapid continuous UI changes.
Utilize scaffolding tools like Yeoman or Slush, and package managers like Bower, Python’s pip, Node’s NPM, or Ruby Gems since they’re doing much more than adding files to your application’s path. I really appreciate the power of Bower - it can definitely do a little more than just download a file or two. Using a package manager is a good idea since most likely the complexity of your project will grow and the amount of third-party plug-ins and how you maintain them will become insane and time consuming. Bower will help you keep track of each plugin and its dependencies including anything related to Bootstrap.
Be the first one to write a response :(
{{ reply.member.name }} - {{ reply.created_at_human_readable }}