A practical checklist to configure Atomic and get your site looking great in minutes.
1
Set Bootstrap source
Choose Joomla-provided, CDN, a Bootswatch theme, or your own custom build in the Joomla tab.
2
Choose fonts and CSS custom properties
Pick Google Fonts for headings and body in the Typography tab. Atomic sets
--atomic-header-font and --atomic-body-font automatically.3
Configure layout columns and sticky header
Set header columns, content column widths, and enable the sticky header in the Layout tab.
4
Set up theme switcher: light, dark, or auto
Enable the built-in light/dark mode toggle in the Features tab. Atomic respects
prefers-color-scheme by default.5
Assign modules to positions
Go to Content → Site Modules and assign modules to Atomic positions like
hero, leftbody, rightbody, and footer.6
Add social meta
Set Open Graph and Twitter Card defaults in the Meta tab so shared links look great on social platforms.
Tip: Atomic supports all Cassiopeia module positions too. If you are migrating from Cassiopeia, your existing module assignments will continue to work.