Examples:
Default styling
.is-active
active states
<button class="burger [modifier]"><span class="burger-icon"><span></span></span> Menu</button>
Atomic Bulldog - UI/pattern library
- 1 - Atoms
- 1.1 - Accessibility (A11Y)
- 1.1.1 - Screen reader Only
- 1.2 - Aspect ratio container
- 1.3 - Brand
- 1.4 - Burger
- 1.5 - Buttons
- 1.6 - Background cover
- 1.7 - Media cover
- 1.7.1 - Media cover responsive embedded video
- 1.8 - Focus - global style
- 1.9 - Form elements
- 1.9.1 - Form Text
- 1.9.2 - Inputs
- 1.9.3 - Label
- 1.10 - Images
- 1.10.1 - Responsive image, Srcset (`img` tag)
- 1.11 - Modifiers
- 1.11.1 - Background colors
- 1.11.2 - Box shadow
- 1.11.3 - Display utilities
- 1.11.4 - Flex utilities
- 1.11.5 - Font families
- 1.11.6 - Font sizes
- 1.11.7 - No Scroll
- 1.11.8 - Rounded element
- 1.11.9 - Spacing
- 1.11.10 - Text colors
- 1.11.11 - Text position
- 1.11.12 - Text transform
- 1.12 - Overlay
- 1.13 - Typography
- 1.13.1 - Blockquotes
- 1.13.2 - Languages
- 1.13.3 - List
- 1.13.4 - Paragraph
- 1.13.5 - Titles
- 2 - Molecules
- 2.1 - Form
- 2.1.1 - Form Group
- 2.1.2 - Input group
- 2.2 - Navigation
- 2.2.1 - Main navigation
- 2.2.2 - Skip Navigation
- 3 - Organisms
- 3.1 - Accessibility settings panel
- 3.2 - Form
- 3.3 - Navigation Bar
- 4 - Layouts
- 4.1 - Container
- 4.1.1 - Container fixed
- 4.1.2 - Container Fluid
- 4.2 - Grid
- 4.2.1 - Grid - Set number of columns
- 4.2.2 - Grid Modifiers
- 4.2.3 - Grid Fallback
- 5 - Templates
- 5.1 - Page Container
- 6 - Sass variables
- 6.1 - Aspect ratios
- 6.2 - Box shadow
- 6.3 - Breakpoints
- 6.4 - Colors
- 6.4.1 - Grays
- 6.4.2 - Color Swatches
- 6.5 - Container Sizes
- 6.6 - Font Families
- 6.7 - Font Sizes
- 6.8 - Grid
- 6.9 - Icons
- 6.9.1 - Icons list
- 6.10 - Spacers
- 6.11 - Theme classes
- 6.12 - z-index
- 7 - Sass Mixins
- 7.1 - focus-style
- 7.2 - ie-only{}
- 7.3 - max(#{bp(your bp)}){}
- 7.4 - min(#{bp(your bp)}){}
- 8 - Sass Functions
- 8.1 - em($size, $context: 16)
- 8.2 - map-deep-get($map, $keys...)
- 9 - Vendors
- 9.1 - a11y.css
- 9.2 - Family.scss
- 9.3 - Icomoon
- 9.4 - bootstrap-reboot.scss
- 10 - Themes
- 10.1 - Theme Invert
- 10.1.1 - Themes.Invert.Atoms
- 10.1.2 - Themes.Invert.Variables
- 11 - Project settings
- 11.1 - Use CSS variable Flag