Bootstrap 101 for Developers

At the PHP Meetup, we discussed using Bootstrap to build a web app. Here are my notes from Bootstrap 101.

4 Basic Principles of Design

Developers who create web apps should be familiar with the 4 basic principles of design: Proximity, Alignment, Repetition and Contrast.

Proximity

The way elements are grouped together to create a sense of unity

Alignment

  • Place items in relation to other items; do not place them arbitrarily.
  • Grid Theory
    • Use the Golden Ratio (Divine Proportion)
    • Remember the Rule of Thirds You want to place elements in spots where a person is naturally drawn to.
    • Use tools like a 12 Column Grid or gridulator.com which makes grids for you

Repetition

Use elements repeatedly in your web app. Users expect consistency in your design.

Contrast

When 2 items are different, they should compliment each other and not conflict. When you do, you have contrast. Such as when you use white text on a black background.

Use Bootstrap to speed up your development

Computer with codeWhy use Bootstrap? Bootstrap is a front-end framework. It uses CSS and JavaScript. Bootstrap is cross browser and cleans up CSS by using Normalize. CSS is built using LESS. It helps you to speed up web development. You can make good looking apps quickly. Since you can use Bootstrap to build your front-end quickly, you may be tempted to use the defaults. Don’t. You can modify Bootstrap quickly and effectively.

Have you used Bootstrap to build web app?