Cozy Bootstrap documentation

Cozy Bootstrap is a theme for Bootstrap with Cozy look and colors.

Tools used

• Autoprefixer with the browserslist from Cozy to help for the compatibility with old browsers
• Cleancss to minify the CSS
• PostCSS to replace bootstrap colors with CSS variables
• Stylelint and vnu to avoid stupid errors
• BackstopJS for visual tests
• Semantic-release for publishing to npm.

Differences with vanilla bootstrap

We want to have a Cozy look and to reduce the weight of the generated CSS.

• Most components are not included
• Some utilities are not included
• Configure bootstrap for Cozy colors and settings
• Use the font Lato
• Only -md breakpoint
• Add responsive size variants for buttons: .btn-md-sm, .btn-md-md, and .btn-md-lg
• img have a max-width: 100% by default
• Add the .wrapper, .wrapper-top, .banner, .avatar, .btn-icon, .icon, .logo, .illustration, .fullbleed, .reverse-y, .horizontal-separator and .vertical-separator CSS classes

Pages

• Alerts
• Buttons
• Cards
• Forms
• Modals
• Login (stack)
• Unavailable application (stack)
• Typography
• Wrapper
• Accordions