Skip to content

Semantic elements

Jump to bottom
Enio edited this page Nov 26, 2024 · 3 revisions

Introduction

Semantic elements are essential to site design, helping with accessibility, SEO and organization, as well as compatibility with modern technologies. This section of the wiki can therefore be used on sites not using Atomix.
However, semantics is mandatory for certain uses of Atomix. These elements will help you get your code working and organized correctly with Atomix.

Building a site

Atomix needs a few minor changes to work properly:

  • The body must have the body class
  • There must be (preferably) a header, a main and a footer. And these must have a class (with the same name as the element) for use by Atomix.
  • Each element must have a distinct class (depending on the use case): a paragraph tag must have a paragraph class, a link tag must have a link class…
  • Containers must make sense, preferably using articles, sections…
  • Validate your code with the W3C Validator, use best practices…

Template

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Atomix tester</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/enioaiello/atomix/dist/atomix.min.css">
</head>
<body class="body">
    <header class="header">
        <nav class="navbar">

        </nav>
    </header>
    <main class="main">

    </main>
    <footer class="footer">

    </footer>
</body>
</html>

Specific additional elements can be added via Atomix: an improved navbar (with brandings, elements, icons…), a footer that “sticks” to the bottom of the page (even if the page is empty)…

Navbar template

The navbar is one of the first things you need to do on your site: it contains everything the user needs to navigate freely between your site's various functionalities. For example, an icon redirecting to an account area, a list of main pages, your company/project logo.
Atomix makes navbars quick, easy and consistent.

<header class="header">
        <nav class="navbar">
            <div class="brand">
                <a href="index.html" class="link">
                    <img src="../assets/images/logo.png" alt="Atomix logo" class="logo">
                    <h1 class="name">Atomix tester</h1>
                </a>
            </div>
            <ul class="menu">
                <li class="item">
                    <a href="#" class="link">Home</a>
                </li>
                <li class="item">
                    <a href="#" class="link">About</a>
                </li>
                <li class="item">
                    <a href="#" class="link">Contact</a>
                </li>
            </ul>
            <div class="separator"></div>
            <div class="icons">
                <a href="#" class="icon"><i class="ri-search-fill"></i></a>
                <a href="#" class="icon"><i class="ri-shopping-cart-fill"></i></a>
                <a href="#" class="icon"><i class="ri-account-circle-fill"></i></a>
            </div>
        </nav>
    </header>

About this code:

  • The navbar contains your nav. Its size can be changed (the default is 80%) to give your site its own identity.

If you want it to take up the full width of the page, or to be smaller and higher in height, you'll need to (for the moment) switch to custom CSS.

  • The brand container stores information about your company (in the form of a link). You can integrate an image, a title, a subtitle, an icon…
  • The menu list contains internal, external and disabled links. You can include your site's main links, links to potential partners and more.
  • The separator is a modular invisible separator that can be added as many times as required. It automatically separates your navbar elements by spacing them apart. The separator takes up as much space as possible.
  • The icons container stores all your icons: social icons, functionality icons… You can use external tools or images to define your icons. Fontawesome and Remixicon recommended!

If you need a header that “sticks” to the top of your page, simply use the fixed class on the header.

Main template

The main contains your entire site. If it's empty, the container takes up all the space on the page, so that the footer is at the bottom of the page.
You can use the horizontal and vertical classes to align content accordingly.

Footer template

The footer contains your site's copyright, credits and useful links. In this example, only the copyright is applied.

<footer class="footer">
        <div class="content">
            <p class="copyright">&copy;2025, AtomixCSS.</p>
        </div>
    </footer>

You can use the same elements present in the header.

Usable CSS elements

  • line is an element for displaying a line that is 25% wide, and for putting a space between two elements
  • separator is an element used to create an invisible gap in the content. It has three sizes: small, normal and big

Usable CSS classes

  • center aligns content horizontally and vertically
  • horizontal aligns content horizontally
  • vertically aligns content vertically
  • fixed allows you to have a header that stays on your page
Clone this wiki locally