Omnira Docs v1.0.0

Editing the HTML directly

The files in template/ are clean, indented and commented, so you can edit them by hand in any code editor. This page covers the common edits.

Find your way around a page#

Every page follows the same outline:

HTML
<head> … page title, description, stylesheets, colour settings … </head>
<body>
  <header class="site-header"> … logo and menu … </header>
  <div id="mobileNav"> … phone menu … </div>
  <main id="main">
    <!-- ================ Section: hero (slider) ================ -->
    <section class="sec sec-hero …"> … </section>
    <!-- ================ Section: services ================ -->
    <section class="sec sec-services …"> … </section>
  </main>
  <footer class="site-footer"> … </footer>
  … demo switcher, colour switcher, back-to-top button, video player …
  <script src="../assets/js/omnira.js"></script>
</body>

Search for Section: to jump between sections. The name after it matches the section reference, which also explains what each part is for.

Change text or a link#

Edit the words between the tags, or the href="…" of a link. Keep the tags themselves. To highlight words in the primary colour like the demos do, wrap them in <em>…</em>.

Add or remove a card#

Cards in a row are repeated blocks. To add one, copy a whole card, from the start of its column (<div class="col-…">) to its matching closing </div>, and paste it next to the others. Then change its text and image. To remove one, delete the same block. Keep rows full: 3 or 6 cards in three columns, 4 or 8 in four.

In Visual Studio Code, click just after an opening <div and press Ctrl/Cmd + Shift + \ to jump to its matching closing tag. That makes selecting a whole block easy.

Remove or move a section#

Select from a section's comment line down to its closing </section>, then delete it or cut and paste it elsewhere inside <main>.

Change a section's background#

A section's classes include its tone, e.g. class="sec sec-features tone-light pad-md". Change tone-light to tone-alt, tone-dark or tone-primary. Change pad-md to pad-sm or pad-lg for less or more space.

Buttons and icons#

HTML
&lt;a href="contact.html" class="btn-o btn-o-primary"&gt;Get in touch &lt;i class="bi bi-arrow-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;

Button styles: btn-o-primary, btn-o-outline, btn-o-light, btn-o-dark, btn-o-accent, btn-o-link; add btn-o-sm for a smaller one. Icons are <i class="bi bi-NAME"> with any name from Bootstrap Icons.

Animations#

Elements with data-reveal fade in as they scroll into view (data-reveal="left" and "right" slide in). Remove the attribute to show something immediately. Animations are switched off automatically for visitors who prefer reduced motion.

Changes on every page#

The header, footer, colours and fonts are repeated on every page. Use your editor's Replace in Files (Ctrl/Cmd + Shift + H in Visual Studio Code), limited to your demo's folder, to change them everywhere at once. If you find yourself doing this often, switch to the source files.

Custom CSS#

Add your own styles at the end of assets/css/omnira.css (or in a new file linked after it) so they're easy to find later:

HTML
/* My changes */
.hero-title { font-size: 4rem; }
.site-footer { background: #0b1020; }

If you later switch to the source files, move these rules into an SCSS file (see Styles), because npm run build recreates omnira.css.