I know you have heard about Bootstrap earlier and may be you have used it for one or many websites. Yet let me give some introduction you about Bootstrap. It is a framework from Twitter to create responsive website and HTML5 based applications with the great deal of ease. If you are aware of the word ‘framework’ or you have worked on any of the framework earlier then you must know about the benefits of it and if not then I am making it easy to you to understand.
Bootstrap Framework is Good for
- Portable, Tablets, and Computer Websites
- Portable, Tablets, and Computer Web Applications
- Large or Huge Websites and Applications
Bootstrap Framework Offers
- A decent set of different CSS selectors
- A 12 Columns Grid System that functions admirably for current sites (Number of columns can be customized as per the need)
- Dynamic CSS e.g. LESS and SASS
- A good debugging system for HTML and CSS
- Handy navigation styles
What is Responsive
What You Need to Know
As I discussed above about what Twitter Bootstrap offers and for what it is made? In general you need to be good in the following subjects to create a responsive website or application.
1. Graphics User Interface or GUI Designing
You must have good sense of creating Graphic User Interface or mockups for a website. This is the first thing that you would be asked by your team leader or client to do. Generally people use Adobe Photoshop and GIMP (Open Source alternative of Photoshop) to create these types of designs. Only knowledge of these applications are not sufficient you must know about design principles, color schemes, typography etc in detail along with the knowledge of mobile and web context.
2. HTML5 and CSS3
Want to become a PRO in responsive website designing using Bootstrap then don’t ignore HTML5 and CSS3. If you have basic knowledge then that will not work you must know various points such as:
- Use of all HTML5 selectors
- Use of HTML5 in semantic way
- Use of HTML5 APIs such as Geolocation, Audio, Video, Drag & Drop, Canvas, and LocalStore
- CSS3 Id and Class Selectors
- CSS Specificity
- Compound CSS
- Other professional ways of writing CSS
4. Dynamic CSS such as LESS and SASS or CSS Preprocessors
Dynamic CSS is a revolution in the cascading style sheet industry. Now you don’t need to write your CSS in redundant and fixed ways. You can use variables, mixins, functions etc to make your CSS compact and flexible for your website. Bootstrap supports LESS and SASS both types of dynamic CSS so that Apple, Windows and various others user can take the benefits of it.
5. Grid Systems
A Grid System is the key of any responsive website designing framework. Bootstrap also uses one of the best grid systems in it to provide refined control over managing the layout of your website. Its grid system has 12 columns with various break points.
Some common grid systems are:
- Golden Grid System
- Responsive Grid System
Modernizr is a great library to detect features of a browser for html5 and CSS3 so that you can provide a good fallback for better user experience in your website. Modernizr provides basis compatibility for html5 and CSS3 too in various browsers.
Shiv and Shim
You can use any one from Shiv and Shim for cross browser html5 in your website. Special IE 7, 8, and 9 use this for html5 features support.
If you are facing any CSS3 related compatibility issues then go for this library. It is very cool library.
It makes your old IE browsers such as IE 6, 7, and 8 compatible for CSS3 Media Queries.
View Full Presentation on slideshare: