Better Bootstrap by Atomic Design

Atomic Design by Brad Frost
Available Free Online

Atomic Design

  • Interfaces are systems, not a collection of individual pages
    • Atoms are the smallest modules in the system: typography, buttons, icons
    • Molecules make organisms: repeatable segments
    • Organisms: templates
  • Pattern-based design streamlines our process

Use Bootstrap to create a design system

Bootstrap

Don't start from scratch, use our tools more efficiently

Rapid Prototypes

Big-Picture Design

Variables
Alter Bootstrap's core, modifying colors, sizes, buttons, typography, and the grid system throughout the site.
Mixins
Use SASS Mixins to combine and expand Bootstrap's core with semantic css names and less unnecessarily repeated code
Use or Replace Built-ins
Utilize core Bootstrap elements and scripts or develop drop-in replacements with the appropriate build files

Suggested Customizations

  • Replace Glyphicons with Font Awesome
  • Replace Bootstap Carousel with Owl Carousel or Slick Slider

Use core Bootstrap elements

In Sketch with the UI kit

or

In Code with Bootstrap Live Customizer