Bootstrap from Twitter is a sleek, intuitive, and powerful front-end mobile first framework for faster and easier web development. It provides free collection of tools useful for creating websites and web applications.
A brief about Bootstrap
- Collection of CSS and HTMl conventions
- Uses latest browser techniques
- Provides stylish typography, forms, buttons, tables, grids, navigation and a lot more
- Built with LESS framework
- Provides a uniform solution to the most common, everyday interface tasks developers come across
Mark Otto (@mdo) and Jacob Thornton (@fat) released Twitter Bootstrap to the world in August 2011
Bootstrap functionalities and features - A deeper look!
Scaffolding Feature
With Bootstrap you get a 12 column grid with two options:Fluid - if you need your website to be 100% wide and use up all the width of the screen you should choose this option.
Fixed - if you're creating a standard website you probably won't be needing all 100% of the screen so you may choose the 940px option for example.
Base CSS
Bootstrap provides fundamental HTML elements, styled and enhanced with extensible classes.Components
There are dozens of reusable components built to provide navigation, alerts, popovers and more with Bootstrap.JavaScript
Bootstrap also features 13 custom jQuery plugins that bring the components to life. There are tooltips, popovers, modals and more to look out for.Building an app from scratch without a visual designer? Have a very limited time frame available for front-end development? Then this is for you.
Want to set
benchmarks, best-practices, processes and standards within your front-end engineering team? Most of the techniques and strategies used in this framework are worth adopting for a team of front-end
engineers.
If you have a solid understanding of the basics of CSS, markup and JS, Twitter Bootstrap is for you. It has well defined rules for HTML and CSS.
Twitter Bootstrap Usage Statistics Websites using Twitter Bootstrap
This chart shows that out of the top 1 million sites, around 28784 sites utilize Twitter Bootstrap effectively. The popularity is increasing gradually. To cope up with the interactive web environment, it is vital to go for a framework like Bootstrap.
1) While designing for Bootstrap, use a 12 grid structure to create the design.
2) Bootstrap provides a set of 200 Glyphicons and therefore, rather than using custom icons, it is advisable to use Bootstrap Glyphicons available on http://getbootstrap.com/components/
3) Keep the typography restricted to the style provided by Bootstrap (only change the font if required). Overhauling it completely may hamper the development.When it comes to typography, a common rule of thumb is to limit lines of text (i.e., the measure) to 50-75 characters for improved readability. To put it in Bootstrap terms, your text should use 6 columns at most, given the default 14 pixel font size.
4) By default, Bootstrap often doesn’t provide sufficient margins and paddings. Adding whitespace in design might improve the readability.
5) If the Bootstrap theme design requires using tables, the tables should match up to the Bootstrap table styling. It might be difficult to adapt to the custom table styles in Bootstrap.
6) When designing for Bootstrap, it is also advisable to design form elements with the user interface compatible with Bootstrap. Using custom radio buttons, submit buttons and select boxes might create issues in the coding.
7) Provide the optimized images for each viewport size as well as high-density/retina displays.
8) Design mobile version first and keep a 480px wide version with content spanning 450px and 15px gutters down both sides. Keep tablet mock-up 768px wide.
Learn
Learn about customizing Bootstrap themes from the documentation available on Twitter Bootstrap.
Match the selectors
If you are overriding Bootstrap’s styles using CSS; when overriding a class, try to use the same selector that Bootstrap uses.
Use original generator
If you are generating a custom build code, generate it from the original generator.
Encapsulate your code
Digging deep into LESS framework will also allow you to customize the code. Install LESS, modify the LESS and recompile with the old file with the new custom file, but whatever you do encapsulate your code.
Add Assets & Alpha Transparency
Add some assets like custom fonts and textured background for a better look and feel. Use alpha transparency and pick up a right color palette and scheme matching your brand guidelines.
Start with supporting variables first
Whether you are using a generator or editing the source, begin your modifications with the supported variables first. They might be sufficient for your small needs.
Challenges
It’s easy to start with Bootstrap, however consider below points before jumping into Bootstrap.
- Twitter Bootstrap can sometimes create conflicts with existing HTML and CSS files. Moreover, finding bugs is time-consuming.
- As it’s built with LESS it doesn’t provide native support for Compass and SASS.
- Twitter Bootstrap builds an attractive, responsive website, but if not built correctly, it can slow down the speed of the site.
- Bootstrap doesn’t provide fallbacks for users without JS or those who disable JS.
Keep in mind that Bootstrap is fully customizable and powerful, if used correctly.
Webby Monks offers MAGICAL PSD TO BOOTSTRAP CONVERSION WITH A BEST IN CLASS QUALITY HTML that is cross-browser compatible, mobile-optimized and W3C validated. With 50+ custom Bootstrap projects and a gallery of 100+ interactive components, Monks are the maestros of custom Bootstrap mobile first framework development. Get your PSD to Bootstrap conversion today!
www.webbymonks.com
Sources: BuiltwithBootstrap | GetBootstrap