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.
Mark Otto (@mdo) and Jacob Thornton (@fat) released Twitter Bootstrap to the world in August 2011
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.
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
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 https://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 about customizing Bootstrap themes from the documentation available on Twitter Bootstrap.
If you are overriding Bootstrap’s styles using CSS; when overriding a class, try to use the same selector that Bootstrap uses.
If you are generating a custom build code, generate it from the original generator.
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 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.
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.
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