Better Bootstrap by Atomic Design
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
or