Bahunya logo

Bahunya

A classless CSS framework with a navbar and dark styling for around 10.46 kB.

Use it by pasting the following into your <head>

Now write your web app with semantic html elements and watch it look pretty right out of the box, no css classes needed!

See the project on Github~

Goal of the Project

The ultimate goal of Bahunya is to be a CSS "framework" that can provide almost everything you really need for a web app or website without introducing any new CSS classes at all.

I observed that many of the most common UI elements in websites can be wholly described by semantic HTML elements rather than `<div>`'s with classes. What's more is that most CSS frameworks tend to style these elements very similarly. So why not remove the classes altogether and use semantic html elements (`<nav>`, `<main>`, etc), which can help improve accessiblity for screen readers, and also make the website source easier to read and write for developers.

That's the north star of this project: to get as far as possible toward that goal without introducing classes (this will mean Bahunya might not have a grid system or other things where classes needed). If you have ideas on more things to add without classes, feel free to contribute!

How to make the navbar

Example:

<nav>
  <a href="/">Bahunya</a>
  <a href="/test.html">test</a>
  <a href="/markdown.html">markdown</a>
</nav>

What about a navbar with nested lists?

<nav>
  <ul>
    <li>
      <a href="#text">Text</a>
      <ul>
          <li><a href="#text__headings">Headings</a></li>
          <li><a href="#text__paragraphs">Paragraphs</a></li>
          <li><a href="#text__blockquotes">Blockquotes</a></li>
          ...
      </ul>
    </li>
    <li>
      <a href="#embedded">Embedded content</a>
      <ul>
          <li><a href="#embedded__images">Images</a></li>
          <li><a href="#embedded__audio">Audio</a></li>
          <li><a href="#embedded__video">Video</a></li>
          ...
      </ul>
    </li>
    <li>
      <a href="#forms">Form elements</a>
      <ul>
          <li><a href="#forms__input">Input fields</a></li>
          <li><a href="#forms__select">Select menus</a></li>
          <li><a href="#forms__checkbox">Checkboxes</a></li>
          ...
      </ul>
    </li>
  </ul>
</nav>

As you can see, the navbar works whether you use a unordered list with sub-unordered-lists (<ul>'s with <li>'s) or if you just put the <a>'s right under the main <nav>. Both work, although I think the latter option might be better for screen readers.