Skip to main content

Atoms

Overview​

The entire CSS language can be organized into style primitives called atoms.

Here are the main categories.

  • Background
  • Borders
  • Colors
  • Display
  • Flex
  • Float
  • Gradients
  • Interactions - Animations, easing
  • Link
  • Object fit, aspect ratios
  • Opacity
  • Overflow
  • Position
  • Shadows
  • Sizing
  • Spacing - Margin, padding, gap
  • Text - Font families, sizes, weights
  • Vertical align
  • Visibility
  • Widths - Media query breakpoints, content widths
  • Z-index

Outlined below is a more comprehensive list.

Layout​

  • Aspect Ratio
  • Container
  • Columns
  • Break After
  • Break Before
  • Break Inside
  • Box Decoration Break
  • Box Sizing
  • Display
  • Floats
  • Clear
  • Isolation
  • Object Fit
  • Object Position
  • Overflow
  • Overscroll Behavior
  • Position
  • Top / Right / Bottom / Left
  • Visibility
  • Z-Index

Flexbox & Grid​

  • Flex Basis
  • Flex Direction
  • Flex Wrap
  • Flex
  • Flex Grow
  • Flex Shrink
  • Order
  • Grid Template Columns
  • Grid Column Start / End
  • Grid Template Rows
  • Grid Row Start / End
  • Grid Auto Flow
  • Grid Auto Columns
  • Grid Auto Rows
  • Gap
  • Justify Content
  • Justify Items
  • Justify Self
  • Align Content
  • Align Items
  • Align Self
  • Place Content
  • Place Items
  • Place Self

Spacing​

  • Padding
  • Margin
  • Space Between

Sizing​

  • Width
  • Min-Width
  • Max-Width
  • Height
  • Min-Height
  • Max-Height

Typography​

  • Font Family
  • Font Size
  • Font Smoothing
  • Font Style
  • Font Weight
  • Font Variant Numeric
  • Letter Spacing
  • Line Height
  • List Style Type
  • List Style Position
  • Text Align
  • Text Color
  • Text Decoration
  • Text Decoration Color
  • Text Decoration Style
  • Text Decoration Thickness
  • Text Underline Offset
  • Text Transform
  • Text Overflow
  • Text Indent
  • Vertical Align
  • Whitespace
  • Word Break
  • Content

Backgrounds​

  • Background Attachment
  • Background Clip
  • Background Color
  • Background Origin
  • Background Position
  • Background Repeat
  • Background Size
  • Background Image
  • Gradient Color Stops

Borders​

  • Border Radius
  • Border Width
  • Border Color
  • Border Style
  • Divide Width
  • Divide Color
  • Divide Style
  • Outline Width
  • Outline Color
  • Outline Style
  • Outline Offset
  • Ring Width
  • Ring Color
  • Ring Offset Width
  • Ring Offset Color

Effects​

  • Box Shadow
  • Box Shadow Color
  • Opacity
  • Mix Blend Mode
  • Background Blend Mode

Filters​

  • Blur
  • Brightness
  • Contrast
  • Drop Shadow
  • Grayscale
  • Hue Rotate
  • Invert
  • Saturate
  • Sepia
  • Backdrop Blur
  • Backdrop Brightness
  • Backdrop Contrast
  • Backdrop Grayscale
  • Backdrop Hue Rotate
  • Backdrop Invert
  • Backdrop Opacity
  • Backdrop Saturate
  • Backdrop Sepia

Tables​

  • Border Collapse
  • Border Spacing
  • Table Layout

Transitions & Animation​

  • Transition Property
  • Transition Duration
  • Transition Timing Function
  • Transition Delay
  • Animation

Transforms​

  • Scale
  • Rotate
  • Translate
  • Skew
  • Transform Origin

Interactivity​

  • Accent Color
  • Appearance
  • Cursor
  • Caret Color
  • Pointer Events
  • Resize
  • Scroll Behavior
  • Scroll Margin
  • Scroll Padding
  • Scroll Snap Align
  • Scroll Snap Stop
  • Scroll Snap Type
  • Touch Action
  • User Select
  • Will Change