Speeding up Application Development With Bootstrap
Bootstrap, one of the most used HTML/CSS/JavaScript front-end frameworks, offers a little more than just fancy customizable user interface elements. It provides a great starting point for many types of projects, a plethora of components, and many nifty styles predefined for responsive layout and utility classes to help keep your HTML and CSS code clean.
In this article, Toptal designer Lijana Saniukaite walks us through some practical Bootstrap tips and best practices to speed up your application development.
Bootstrap, one of the most used HTML/CSS/JavaScript front-end frameworks, offers a little more than just fancy customizable user interface elements. It provides a great starting point for many types of projects, a plethora of components, and many nifty styles predefined for responsive layout and utility classes to help keep your HTML and CSS code clean.
In this article, Toptal designer Lijana Saniukaite walks us through some practical Bootstrap tips and best practices to speed up your application development.
Lijana Saniukaite
Lijana has 11+ years leveraging her skills in full-stack web/mobile development, QA, project management, entreprenueurship, and design, too.
Previously At
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.
<div class="container">
<div class="row">
...
</div>
</div>
… 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.
<div class="row">
<div class="col-sm-7 col-md-9 col-xs-6">Left column</div>
<div class="col-sm-5 col-md-3 col-xs-6">Right column</div>
</div>
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
<p class="text-center">I am centered text</p>
… or center-block
<div class="center-block">I am centered text</div>
not .center or <center>
2. When changing font size
If you need smaller or bigger fonts, you can use one of these classes:
<p class="lead">I'm bigger paragraph text.</p>
<p class="small">I'm smaller paragraph text.</p>
In case you need bigger or smaller headers don’t forget about .h1, .h2, .h3, .h4, .h5, .h6, .small. Use it like this:
<h1 class="h2">Smaller Title with .h2</h1>
<h3 class="h1">Bigger Title with .h1</h3>
<h4 class="small">Smaller Title with .small</h4>
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.
<div class="clearfix">...</div>
4. When killing .row class margins
Just use .clearfix instead of defining your own styles (or worse, using inline styles):
<div class="clearfix">...</div>
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.
<ul class="list-unstyled">
<li>...</li>
</ul>
<ul class="list-inline">
<li>...</li>
</ul>
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 <form>) 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.
<div class="pull-left">...</div>
<div class="pull-right">...</div>
Easily realign text to components with text alignment classes.
<p class="text-left">Left aligned text.</p>
<p class="text-right">Right aligned text.</p>
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.
Utilize Available Bootstrap Resources for Application Development
With Bootstrap’s popularity comes a wealth of helpful resources: articles, tutorials, third-party plug-ins and extensions, templates, theme builders, and so on. So whether you’re looking for inspiration or code snippets, you’ll have everything you need to accelerate your progress.
You would think that having so many resources available, everyone would take advantage of it and use it through their projects, but believe it or not - that is not the case. Some developers waste their time and slow project progress by skipping some great code snippets or resources. Although you should not just blindly copy and paste, you must understand the good parts and adopt them to your coding style and technical needs. The ability to find and sort out good resources and be able effectively utilize it is also a skill and requires years of experience and knowledge.
Below you will find a list of useful resources to get started with:
Templates, Themes and Plugins
Official Themes from Bootstrap’s creators: themes.getbootstrap.com.
Marketplaces with premium Bootstrap themes and templates: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.
Free Bootstrap Themes & Templates: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.
“The Big Badass List” - a list of 319 useful Bootstrap resources: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/
AngularJS
BootstrapUI written in pure AngularJS by the AngularUI Team.
ReactJS
React-Bootstrap is a library of reusable front-end components. You’ll get the look and feel of Twitter Bootstrap, but with much cleaner code, via Facebook’s React.js framework.
Django
Bootstrap 3 integration with Django: https://github.com/dyve/django-bootstrap3
Jekyll
Jekyll-Bootstrap is a full blog scaffold for Jekyll based blogs.
WordPress
WordPress starter theme Sage with a modern front-end development workflow. Based on HTML5 Boilerplate, gulp, Bower, and Bootstrap.
Material Design
Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework.
Conclusion
Bootstrap is one of the best available frameworks that offers you many great tools and resources in order to accelerate and speed up your application development process.
It saves you many hours/days of work when designing and coding an awesome UI. Every component and plugin is thoroughly documented with live examples and code blocks for easier use and customization. It is highly recommended by many developers and very popular for both prototyping and production. It is a very good tool for making mobile-friendly responsive websites. Bootstrap gives you a great starting point for many types of projects, the option to hand it over to a designer and say “make this look fancy!” without them needing to hack their way through the code. Most importantly, it allows you to develop the structure first, and address fonts, colors and fancy styles later. Take the time to study what it can do and be smart about how to use it the best way so you can get where you want faster.